17

I mave a floating action button in my app which I want to sort of pop in, where it is invisible and starts to grow to a size like 60dp and then resizes back to the normal size of 56dp. How can that be done? I know how to do a normal fade in animation, but not a pop in.

qwertz
  • 6,206
  • 9
  • 40
  • 62

3 Answers3

34

I would create a animation file in res/anim and use a sequential scale animation like so:

expand_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale 
        android:fromXScale="0.0" 
        android:fromYScale="0.0"
        android:toXScale="1.1" <!--set the scale value here-->
        android:toYScale="1.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="400"/> <!--length of first animation-->


    <scale 
        android:fromXScale="1.1" <!--From whatever scale you set in the first animation-->
        android:fromYScale="1.1"
        android:toXScale="1.0" <!--Back to normal size-->
        android:toYScale="1.0"
        android:pivotX="50%" 
        android:pivotY="50%"
        android:startOffset="400" <!--start 2nd animation when first one ends-->
        android:duration="400"/>
</set>

Then in your activity:

Animation expandIn = AnimationUtils.loadAnimation(this, R.anim.expand_in);
actionButton.startAnimation(expandIn);
Rich Luick
  • 2,354
  • 22
  • 35
  • Thank you very much. Would I have to hide the button first by using visibility? – qwertz May 29 '15 at 17:33
  • You shouldnt have to if you are setting the first animation scale to start from 0.0. – Rich Luick May 29 '15 at 17:34
  • So it works perfectly, the only problem I have is it starts to expand from one corner. Instead is should expand from its center. How can I solve that? – qwertz May 29 '15 at 17:45
  • Check my updated answer with "pivotX" and "pivotY" these values are the point where it expands from – Rich Luick May 29 '15 at 17:56
  • more on that here: http://stackoverflow.com/questions/8409506/android-image-scale-animation-relative-to-center-point – Rich Luick May 29 '15 at 17:56
  • One more thing, don't forget to add android:fillEnabled="true" android:fillAfter="true" so the sizes are persisted ( looks smoother) – AhmedW Mar 22 '16 at 12:21
  • 3
    I found this animation was much smoother when I changed the "shrink" part to go down to .9 instead of 1.0. I'm not sure why though. Adding @AhmedW 's suggestion didn't help. – beyondtheteal Sep 06 '16 at 20:14
14

I found that my animation was much smoother than the current accepted answer when I switched it to use the Overshoot Interpolator. 

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/overshoot_interpolator" >

<scale
    android:duration="700"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0" />

</set>

Here is a video showing examples of the interpolators: https://www.youtube.com/watch?v=OMOJxBe9KGg

Here is where it's touched on in the Android documentation: https://developer.android.com/guide/topics/resources/animation-resource.html#View

beyondtheteal
  • 729
  • 6
  • 15
4

I took the original answer but added in an extra layer of animation to give a better pop effect.

enter code here
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:duration="100"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.2"
    android:toYScale="1.2" />

<scale
    android:duration="100"
    android:fromXScale="1.2"
    android:fromYScale="1.2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="100"
    android:toXScale="0.8"
    android:toYScale="0.8" />

<scale
    android:duration="100"
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="100"
    android:toXScale="1.0"
    android:toYScale="1.0" />
</set>
Blain Ellis
  • 61
  • 3