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.

Now reference the RecyclerView and FloatingActionButton in the Activity.

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.

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!


Gurleen Sethi

Android Developer and enthusiast, believes in developing products and content to help people. Likes to do deep thinking.

4 Comments

João Armando · August 31, 2017 at 4:52 pm

Hey, thanks! it’s worked perfect for me.

Diallo · June 6, 2018 at 10:53 pm

Hello Thank you for this good tutorial

Farid · July 11, 2018 at 3:37 am

Very Very Nice

aref · August 29, 2018 at 4:46 pm

it’s perfect . thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × 5 =