Transition from FloatingActionButton to bottom toolbar

Ricardo Belchior
2 min readApr 5, 2018


The latest requirement from my designer was to implement a bottom toolbar on Android, one that would transition into a FAB when the user scrolls. He specifically pointed out to the example in the Material Design guidelines. As far as I understand, this pattern can be useful to complement the action related to the FAB or when there are several actions related or useful to the current screen., on the Toolbar section

After a brief google search and not finding any code ready to copy-paste 😲Maybe I didn’t look hard enough, but I decided to give it a go. The closest sample out there to what I wanted (that I found) was written by Saúl Molinero ( and my end result was based on that. The bottom toolbar I implemented using a BottomNavigationView (

So, looking at the material guidelines, this animation seems to consist of:

  1. Animate the FAB in a curved path until approx. 66% of the BottomNavigation width
  2. Once the FAB approaches, show the bottom navigation using a circular reveal

The curved path animation was based on an old blog by Chet Haase on the topic ( To pick up the bezier curve the FAB should do, we have to pick the coordinates of start/end points and control points. I got to my final values after playing around using this tool

The circular reveal has plenty of examples on the internet, so I’ll not cover that (

To make all this code easier to manage, I wrapped everything in a simple class, FabToBottomNavigationAnim, that receives the FAB and BottomNavigation and contains only two public methods to show/hide the bottom navigation.