CODEWITHSUNDEEP
androidanimationandroid-5.0-lollipopfloating-action-button
Denis Loh
Denis Loh

Reputation: 2224

Android: Detail animation inside Floating Action Button

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.

enter image description here enter image description here

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?

Upvotes: 6

Views: 2309

Answers (2)

Santacrab
Santacrab

Reputation: 3195

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();

Upvotes: 0

ralphgabb
ralphgabb

Reputation: 10528

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.

Upvotes: 0

Related Questions