Animate Fab Button cross to mark

Question

In my Android application I want to have a Floating Action Button to display a success state. I would like to have something like in the picture below:

But I have no idea how to animate the cross to the mark. Can someone please explain to me how I can do that? Is there maybe a library or something like that? Atm I'm using the default FAB from the design library.

Answer 1

This question got me interested in checking out AnimatedVectorDrawable, so I went ahead and made a small sample app that will achieve a similar animation, on github here.

Bad quality gif here.

Couple things to note: minimum SDK is set to 23 to make use of AnimationCallbacks for starting the 2nd animation, but you can achieve the same result using a Handler.postDelayed() with your animation durations to handle the drawable change and animation start. Since AnimatedDrawableCompat does not support path morphing, I needed two drawables to get the two different images.

Should be compatible with the Support Library AnimatedVectorDrawableCompat if you choose to use it as well.