Hide the FloatingActionButton when scrolling a RecyclerView

One of my favorite components introduced with Material Design is the FloatingActionButton (FAB). These buttons are great for emphasizing the primary action of an Activity, but quickly become a nuisance when displayed over a RecyclerView as they may block the bottom list item. To avoid this, we can hide the FloatingActionButton when scrolling a RecyclerView.

In today’s tutorial we will only be hiding the FAB when the RecyclerView is scrolled upward, and it will reappear on the next down scroll as shown here:

 

Hide FloatingActionButton When Scrolling RecyclerView

Add the support library dependency

As with any support library component, like the Toolbar in my last post, we need to add a dependency to our build.gradle file for the design library, and for the RecyclerView:

Add the FAB and RecyclerView inside a CoordinatorLayout

In order to achieve this scroll animation, we must put the Views inside of a CoordinatorLayout. As the documentation states, a primary use of the CoordinatorLayout is:

  1. As a container for a specific interaction with one or more child views

Since the FAB is interacting with the RecyclerView (by hiding/showing depending on scroll) the CoordinatorLayout will help us with this process. Here is how the XML will look:

Two attributes that may be new to you are layout_anchor and layout_anchorGravity. These attributes were introduced with the CoordinatorLayout to place some Views relative to other Views.

Implement the FAB’s behavior

If you took a peak at the CoordinatorLayout documentation, you will notice the mentioned something about Behavior:

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another.

There is a FloatingActionButton.Behavior class that we can extend to implement our own behavior. Start by creating the following class:

In order for our FAB to react to the scroll of the RecyclerView, we can override onStartNestedScroll and  onNestedScroll():

This implementation is pretty straight forward. If the scroll is upward (dyConsumed > 0) and the child (the FAB here) is visible, hide it. If the opposite occurs, show it. Thankfully, we do not need to write any animations ourself! The FAB class contains methods for showing and hiding the button.

We’ve also implemented onStartNestedScroll to show that we are only handling vertical scrolls.

Attach the behavior to the FAB

Next we need to make sure the FAB behaves like we just implemented. This can be done using XML:

While writing this tutorial for you, I learned the hard way that this is not enough. As it is you will get the following error:

Caused by: java.lang.RuntimeException: Could not inflate Behavior subclass com.adammcneilly.fabscrollsample.FABScrollBehavior

To fix this, just make sure you’ve added a default constructor to your behavior class:

Once you’ve done that, you’ll be able to hide the FloatingActionButton when scrolling the RecyclerView. Great work!

The code for this tutorial can be found on my Github page.

Share this post...
Share on Reddit0Share on Google+0Tweet about this on TwitterShare on LinkedIn0Share on Facebook0

8 Comments


  1. This is such a short tutorial that actually works very well! Most tutorial that I saw don’t use CoordinatorLayout.


  2. You say is great,Thank you. But when I hide the floatingActionButton why can’t show the animation?


    1. The animation worked fine for me. What version of Android are you running this on?


  3. Thanks for your tutorial.
    Can i use ListView instead of RecyclerView ?

    I have a ListView in my app and FAb button doesn’t hide/show !!!!

    could you help me ?

Leave a Reply