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.

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?

Better for you to create your own fab button. Use CardView, make it round through corner attribute. make sure it has equal width and height. Then give cardElevetion now your cardview will be floating . Add an ImageView then Give some padding to CardView so you can see something similar to FAB. Now you can animate your ImageView according to your desire inside CardView. On Animation end you can change Icon of the ImageView. — Muhammad Adil, Nov 18 '15 at 19:01

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

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.

edited May 23 '17 at 12:24

Community

1
1

answered Aug 11 '15 at 05:31

ralphgabb

10,298
3
47
56

score 0 · Answer 2 · answered Dec 22 '16 at 11:49

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

Android: Detail animation inside Floating Action Button

2 Answers2