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.

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

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

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.

Here’s the final result:

RicardoBelchior/FabToBottomNavigationAnimation

Let me know your thoughts in the comments =) or hit me up on Twitter https://twitter.com/belchii