Show / hide FloatingActionButton on ViewPager widgets

Question

I have an activity that has 3 tabs. Each tab page is a fragment that displays a RecyclerView. One of the fragments contains a FloatingActionButton. I implement this button in a fragment layout. I also make it static in the lower right corner of the fragment.

Fragment Layout:

- CoordinatorLayout - RecyclerView - FAB (without any behavior) 

In the activity layout I have:

 - CoordinatorLayout - AppBarLayout - Toolbar - TabLayout (SmartTabLayout) - ViewPager 

Now the problem is that the FAB is hiding from the view when the toolbar expands, but is fully displayed when the toolbar collapses. Although this does not happen if I implement the FAB button in the activity itself. But I do not want to have a button in all fragments. I just put it in the first fragment.

Here is the gif I made to explain this more clearly.

XML for action layout:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbarLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="@color/color_primary" app:layout_scrollFlags="scroll|enterAlways" /> <com.ogaclejapan.smarttablayout.SmartTabLayout android:id="@+id/viewpagertab" android:layout_width="match_parent" android:layout_height="@dimen/tab_height" android:background="@color/color_primary" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout> 

XML for fragment layout:

 <?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.RecyclerView android:id="@+id/card_list" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.design.widget.FloatingActionButton android:id="@+id/fab_add" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_plus_white_48dp" app:layout_anchor="@id/card_list" app:layout_anchorGravity="bottom|right|end" /> </android.support.design.widget.CoordinatorLayout> 

My question is: how do I make the button remain visible when scrolling through recyclerview?

Answer 1

A better option would be to simply put the FloatingActionButton in the Activity and call show() and hide() in the ViewPager.OnPageChangeListener . Thus, you will get a nice input / output animations that comply with Material Design principles .

 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (position == 0) { fabAdd.show(); } else { fabAdd.hide(); } } @Override public void onPageScrollStateChanged(int state) { } }); 

Result:

Answer 2

Add

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 

in RecyclerView too.