Android CoordinatorLayout: Scroll Aware FAB

Sometimes wrapping things up from al resources on the web can be difficult, let’s see a quick and straightforward way to implement a Scroll Aware Floating Action Button for Android and see the potential of CoordinatorLayout view, along with the Behavior classes.

Get ready

Make sure you import both the Design Support Library along with AppCompat-v7 and the RecyclerView libraries, so add the following to your build.gradle file:

dependencies {
 […]
 compile ‘com.android.support:appcompat-v7:23.0.0’
 compile ‘com.android.support:design:23.0.0’
 compile ‘com.android.support:recyclerview-v7:23.0.0’
 } //Or newer

Let’s code

I am assuming you’re conmfortable with using RecyclerView instead of ListView when displaying the list of your entries, if you’re not, learn something new. 
As of the time of writing you’re required to use either RecyclerView or NestedScrollView in order to use these kind of components, so using this approach with ListView won’t work.
Now in the xml file wrap both RecyclerView and android.support.design.widget.FloatingActionButton with a CoordinatorLayout view, like this:

Remember that's important to provide an app:layoutanchor="idofotherview" to the FAB otherwise it won't react to what happens on the ListView.

Now we’ll implement the CoordinatorLayout.Behavior subclass that will perform the actual animation of the Floating Action Button. Notice that we will not touch the ListView component, i.e. we’re not setting any ListView.setOnScrollListener() on the ListView we’re hosting in the XML, everything is defined in the CoordinatorLayout.Behavior subclass.

This particular animation makes the FAB pop in and out of the screen, obviously you can build any kind of animation.

These two methods are all we need to animate the FAB, this is so simple! All we need to do now is assigning the behavior to the FAB with app:layout_behavior=”com.mypackage.behaviors.ScrollAwareFABBehavior”. We can do it either by adding it straight in the proper xml block (in activity_list.xml above) or we can apply it programmatically:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(new ScrollAwareFABBehavior());
fab.setLayoutParams(p);

We’re done.

Useful resources

Remember to refer to the original Ian Lake’s fork for CheeseSquare in order to get your hands dirty on a fully working example.

I hope you enjoyed it, cheers!