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

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 1

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

Solution 2

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

Solution 3

1. I had same problem that the FloatingActionButton was completely invisible, and it was off the screen in the bottom. When I scroll down it comes up.
2. Also, the tabs were getting hidden when scrolled down but I wanted them to be visible always so I fixed it by removing app:layout_scrollFlags="scroll|enterAlways". Credits to JDev at how to avoid hiding the tabs when scrolled down?
   This resolved the FloatingActionButton issue also, it's visible now.

Solution 4

I kind of did what Gabriele suggested with moving the FAB to the containing activity. Also you will need to update the FAB's color/clickListener in onTabSelected:

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        ...

        setFloatingActionButtonForImagesTab();

    }

    ...

    @Override
    public void onTabSelected(final TabLayout.Tab tab) {
    switch (tab.getPosition()) {
        case 0:
            setFloatingActionButtonForImagesTab();
            break;
        case 1:
            setFloatingActionButtonForMusicTab();
            break;
        case 2:
            setFloatingActionButtonForVideoTab();
            break;
        }
    }

    ...

}

and then in the setup function just set the color and click listener:

private void setFloatingActionButtonForImagesTab() {
    myViewPager.setCurrentItem(0);
    floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));
    floatingActionButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG)
                .show();
        }
    });
}

Make note of the call to setCurrentItem above. It is required now that you are implementing TabLayout.OnTabSelectedListener.

Solution 5

I just ran into the same problem. Unfortunately, I don't have an answer for you, but some addon point.

It is not that the button is pushed down, it's the whole fragment been pushed down. I haven't test it so far, but I imagine, if there is a way that enables you to see the size of the fragment page, you'll see it doesn't end at the bottom of the screen as it should be.

for possible solution, I'm think about adding a padding of size "?attr/actionBarSize" at the bottom.

I'll test this, and post back when finish

update: As I used a border of 80 dp, get a screen shot (I dont have 10 reputation to post a screen shot, wth)

workaround:

<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/rootLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <include
                layout="@layout/toolbar"/>

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

        <FrameLayout
            android:id="@+id/fragment_root"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/border"
            android:layout_marginTop="?attr/actionBarSize"
            >
            <!--android:paddingBottom="?attr/actionBarSize"-->
            <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/border"></LinearLayout>
            <fragment
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:name="com.derek.hianthy.mydiary.ui.BaseFragment"
                tools:layout="@layout/layout"
                android:background="@drawable/border"
                />

        </FrameLayout>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/fab_margin_bottom"
            android:layout_marginRight="@dimen/fab_margin_right"
            android:src="@drawable/ic_action_add"
            app:borderWidth="0dp"
            app:fabSize="normal"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="false"
            android:layout_alignParentLeft="false" />

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

notic app:layout_behavior="@string/appbar_scrolling_view_behavior" been taken out. result

View more solutions

Comments

[Chandru]

Yes I agree. But my requirement is to show the FAB inside the fragment.

[Chandru]

Let us continue this discussion in chat.

[khusrav]

This solution has problems. I used this workaround, show the FAB in one fragment and hide it in another. But, then strange thing happens - when you scroll the list, the FAB re-appears itself. And why one should be bound to having the FAB in activity?

[Jared Burrows]

@cgr This resolves the fab issue but now the toolbar does not scroll.

[Victor A. Parcianello Benso]

In my case this didn't solve the problem. It looked ok until I've noticed that the first item of my list (the fragment in the viewpager contained a recycler view), was under the appbar.

[Victor A. Parcianello Benso]

I've upvoted this answer because I think it is the one closest to the right one. However, I've noticed that the first item of my recycler view starts behind the toolbar. As soon as I touch the list for scrolling, the CustomBehavior class kicks in and shows the first row in its due place.

[Brill Pappin]

Nog only that, but a nested CoordinatorLayout seems to not work either.

[zohaib khaliq]

This is not the solution bro. if we remove this "app:layout_behavior="@string/appbar_scrolling_view_behavior‌​" " the behavior action bar hiding behavior will be no more.