FloatingActionButton in Fragment hidden on Toolbar collapsing

I have an activity that has 3 tabs. Each tabs page is a fragment which displays a RecyclerView. One of the fragment has FloatingActionButton in it. I’m implementing this Button in the Fragment’s layout. I’m also making it static at the bottom right of the Fragment.

Fragment layout:

  • How to find height of status bar in Android through React Native?
  • How to upload file using Volley library in android?
  • Android sdk will not install - crashes when checking for jdk
  • Show to set position of popup?
  • How to disable onCreate action when will orientation be changed?
  • How to handle Dynamic JSON in Retrofit?
  • - CoordinatorLayout
        - RecyclerView
        - FAB (without any behavior)
    

    In Activity layout, I have:

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

    The problem now is the FAB is half-hidden from the view when Toolbar is expanded, but fully shown when Toolbar is collapsed. Though this does not happen if I implement the FAB button in Activity itself. But I don’t want to have the button in all of the Fragments. I’m only putting it in first Fragment.

    Here is a gif I made to explain this clearer.

    Fab hidden

    XML for Activity 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 so that the button stays visible when recyclerview is scrolled?

    Related posts:

    Android Studio doesn&#039;t see genymotion
    Android obfuscate app using proguard keeps obfuscating library jars - or is it?
    Fragments in ViewPager not loaded when the containing Fragment is recreated
    Getting web fonts to work with phonegap and android - how?
    How Can I Know The Registered Devices In My GCM Application Cloud (List Devices)
    registerMediaButtonEventReceiver / handling volume buttons issue
  • How to programmatically reference <string> in xml file in android
  • Android WebView performance
  • What is dexopt ? ( Android Shell Command )
  • How to downsample images correctly?
  • Could not find class 'android.widget.ThemedSpinnerAdapter'
  • Android backup service - when and how often to backup?
  • 2 Solutions collect form web for “FloatingActionButton in Fragment hidden on Toolbar collapsing”

    The best option would be to just put the FloatingActionButton in the Activity, and call show() and hide() in a ViewPager.OnPageChangeListener. This way you get nice enter/exit animations that conform to Material Design guidelines.

    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:

    enter image description here

    Add

    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    

    to the RecyclerView too.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.