How to hide Floating Action Button when scrolling in Recycler View

You might have seen many applications hiding the FAB on scrolling down and showing back when scrolling up. Hiding the FAB leaves nothing in the way of user and the content, making it an overall better UX.

It is very easy to achieve this kind of functionality. The prerequisites of this tutorial is that you have a basic understanding of Recycler View and FloatingActionButton.

First set up a basic Activity with a Coordinator Layout containing a Recycler View and FloatingActionButton, just as below.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="app.com.thetechnocafe.tutorials.ScrollingFABActivity">

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

    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floating_action_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        app:fabSize="normal" />

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

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context="app.com.thetechnocafe.tutorials.ScrollingFABActivity">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="match_parent">

</android.support.v7.widget.RecyclerView>

<android.support.design.widget.FloatingActionButton

android:id="@+id/floating_action_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right"

android:layout_margin="16dp"

app:fabSize="normal" />

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

Now reference the RecyclerView and FloatingActionButton in the Activity.

mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
mFloatingActionButton = (FloatingActionButton) findViewById(R.id.floating_action_button);

1 2	mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view); mFloatingActionButton = (FloatingActionButton) findViewById(R.id.floating_action_button);

Now comes the main part. We will attach a scroll listener to the recycler view, so whenever the user scrolls the list we will get notified and will toggle the visibility of the FAB accordingly. The scroll listener looks like this.

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (dy > 0 && mFloatingActionButton.getVisibility() == View.VISIBLE) {
            mFloatingActionButton.hide();
        } else if (dy < 0 && mFloatingActionButton.getVisibility() != View.VISIBLE) {
            mFloatingActionButton.show();
        }
    }
});

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

@Override

public void onScrolled(RecyclerView recyclerView, int dx, int dy) {

super.onScrolled(recyclerView, dx, dy);

if (dy > 0 && mFloatingActionButton.getVisibility() == View.VISIBLE) {

mFloatingActionButton.hide();

} else if (dy < 0 && mFloatingActionButton.getVisibility() != View.VISIBLE) {

mFloatingActionButton.show();

}

});

Lets break down the above code and understand each line.

hide() and show() are two methods provided by the FAB to hide/show the FAB button with a smooth animation.
dy is a value that changes when you scroll vertically, when the user scrolls down the value is positive and when the user scrolls up the value is negative. So we check if the FAB is visible and the value is positive(i.e. user is scrolling down) we will hide it and if the FAB is hidden and the value is negative(i.e. user is scrolling up) we will show the FAB.

Once you run the app it will look something like this. Simple and slick!

Add comment Cancel reply