Android: Detail animation inside Floating Action Button

Question

I am trying to get familiar with the new design guidelines of Android Lollipop. So especially for animations, I try to achieve something like these detailed animations for icons or buttons: http://www.google.com/design/spec/animation/delightful-details.html

I was wondering how they did that?

In my special case, I have a floating action button, which is used to drop an item in a shopping cart. After the user presses the button, I want to animate the icon drawable inside that button. The animation shall have a sliding effect where the cart is moved out to the bottom of the button and the check mark is moved in from the top of the button.

I found a ViewFlipper ( http://www.inter-fuser.com/2009/07/android-transistions-slide-in-and-slide.html ), however I want to keep the button in place and only animate the icon inside the button.

On the other hand I found AnimationDrawables ( http://developer.android.com/reference/android/graphics/drawable/AnimationDrawable.html ) but there, I have to create each frame by hand, which is also odd.

What's the best way to achieve that?

Answer 1

I wonder if fab support that now, however, you can always create your own.

Create a custom linear layout that contains image view. Make it round like fab. You can then look at this animation examples

Hope it helps. Happy codings.

Answer 2

You could use a frame animation: you create 15-20 frames for the animation you want to make. You create an animation list drawable, for example animation_list.xml :

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item
    android:duration="50"
    android:drawable="@drawable/frame_01"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_02"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_03"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_04"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_05"/>
<item
    android:duration="50"
    android:drawable="@drawable/frame_06"/></animation-list>

Then you put this drawable as a src inside your custom FAB. Now you can start the frame by frame animation (when the FAB animation finishes):

ImageView mImageViewFilling = (ImageView) findViewById(R.id.animated_imageview);
((AnimationDrawable) mImageViewFilling.getBackground()).start();