Transition from FloatingActionButton to bottom toolbar

Hi,

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.

Image for post
Image for post
https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions, 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 (https://github.com/saulmm/Curved-Fab-Reveal-Example) and my end result was based on that. The bottom toolbar I implemented using a BottomNavigationView (https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html)

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
Image for post
Image for post

The curved path animation was based on an old blog by Chet Haase on the topic (http://graphics-geek.blogspot.pt/2012/01/curved-motion-in-android.html). 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 https://www.desmos.com/calculator/cahqdxeshd

Image for post
Image for post

The circular reveal has plenty of examples on the internet, so I’ll not cover that (https://developer.android.com/training/animation/reveal-or-hide-view.html#Reveal).

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.

Image for post
Image for post

Written by

android developer by the sea, https://www.rbelchior.me/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store