How to transform a FAB into a popup menu?

Question

According to the material design guideline "The floating action button can transform into a single sheet of material which contains all the actions".

I want to create the following animation without using third party libraries.

Answer 1

First you need to cut that animation in small parts. In that example i can deduce 3 steps:

1. a Ripple effect on the FAB triggered on click event.
2. a translation to the left applyed to the FAB.
3. a Circular Reveal animation applyed to the card.

So you need to create a FAB (visible) and a card (invisible). The FAB at it initial position and the card to it final one. After having triggered the ripple effect on the FAB (step 1) and at the end of your move event on FAB again (end of step 2), you just need to dismiss the FAB and start the Reveal animation on the card (step 3).

To launch a circular reveal animation, just call the ViewAnimationUtils.createCircularReveal method. Pass your card view, the X,Y start coordinate, the radius and that's it! The difficulty will definitely be to find the best duration and start/end coordinate between each animations to set it as smooth as possible.

If you want, you can look my post here https://stackoverflow.com/a/41957295/1053880. I used a circular reveal animation to create a switch between two toolbars. Some part of your code will be similar to mine (i also reverted my anim at the end).

Sample project on GitHub

https://github.com/fbourlieux/android-material-circular_reveal_animation

Hope this help!

François

Userful links:

• Link1: Circular-Reveal-Animation project on GitHub
• Link2: Create Circular Reveal Animation And Ripple Effect like Whatsapp
• Link3: Simple Ripple + Reveal + Elevation tutorial
• Link4: Scale, Translate, Rotate animation
• Link5: Ripple animation