androidandroid-fragmentsfloating-action-buttonandroiddesignsupportandroid-coordinatorlayout

Floating Action Button not showing fully inside a fragment


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 RecyclerView and the fab button inside a FrameLayout, where the FAB buttton is positioned bottom right. Now the problem that I am facing is the FAB button is not fully visible. Its half of the portion is hidden as shown in the screenshot below. Can any one help me to solve this issue. Thanks in advance.

FAB with RecyclerView inside FrameLayout

Note: The FAB is aligning properly once it is scrolled. The problem arises only if it is ideal (before scrolling done).

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="10dp"
        app:backgroundTint="@color/red"
        android:src="@drawable/ic_done"/>
</FrameLayout>

tabviewpagerlayout.xml

<?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/main_content"
    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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </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>

Solution

  • 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"/>