Floating Action Button not showing fully inside a fragment

Question

I am using FAB button along with RecyclerView in a Fragment. This Fragment is an instance of a TabViewPager. I am having a issue with the FAB button. I have placed the Recyc

Answer 1

It's not an acceptable solution to have to show/hide the FAB whatever tab is selected. I've tried every layout combination, but moving the FAB to the activity layout was the only solution that worked. But what if you need the button only in one tab? It's the only way that works now, but I'm expecting an update of the design library since this version is too buggy. Anyway, the bottom line is that the FAB must be a direct descendant to the CoordinatorLayout, so it doesn't get pushed down by the collapsing Toolbar...

Answer 2

You should move your FAB inside the CoordinatorLayout. Something like this:

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_gravity="end|bottom"/>

</android.support.design.widget.CoordinatorLayout>

Then you can add the RecyclerView inside the viewPager in this way:

Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new RecyclerViewFragment(), "Tab1");
viewPager.setAdapter(adapter);

where the RecyclerViewFragment layout is:

 <android.support.v7.widget.RecyclerView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Answer 3

It might be a bit late but to me the best option seemed to be create another fragment which contains the fragment with your content and the floating button. This code works very well in my application:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="domain.ItemsFragment">


    <fragment
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="com.lucyapp.client.ItemFragment"
        android:id="@+id/fragment"
        tools:layout="@layout/fragment_item_list" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</FrameLayout>