hide/show fab with scale animation

Question

I'm using custom floatingactionmenu. I need to implement scale animation on show/hide menu button like here floating action button behaviour

Is there any way to do this ?

Use the fab.show() and fab.hide() methods provided by the design lib. Also you might want to check [this](http://stackoverflow.com/questions/30937028/how-to-animate-floatingactionbutton-like-in-google-app-for-android) — Skynet, Jan 01 '16 at 05:33
its not android fab library its custom fab menu [here](https://github.com/Clans/FloatingActionButton) — JosephM, Jan 01 '16 at 05:57
Why do you want to use a library when the framework provides this control for you? — Skynet, Jan 01 '16 at 06:19

score 82 · Answer 1 · edited Mar 26 '18 at 18:29

82

The design support library revision 22.2.1 added the hide() and show() methods to the FloatingActionButton class, so you can use these from now on.

FloatingActionButton mFab;
mFab.hide();
mFab.show();

You can apply your own animation on it. For more info check this.
And for more information about FAB, check the official documentation.

edited Mar 26 '18 at 18:29

Antoine Draune

323
1
3
12

answered Jan 01 '16 at 06:34

Anuj Sharma

4,294
2
37
53

6

linking google's stuff is ridiculous, we need example – djdance Aug 06 '16 at 16:06

score 27 · Accepted Answer · answered Jan 01 '16 at 06:29

You can use these scale animations for fab button, it gives same effect like design lib fab button.

scale_up.xml

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

scale_down.xml

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

Like Anuj said: `FloatingActionButton fab = this.findViewById( ... ); Animation myAnim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_up); fab.startAnimation(myAnim);` — adrianoBP, May 01 '18 at 18:23

score 8 · Answer 3 · answered Jan 01 '16 at 06:45

Load these animation on your custom view. Don't forget to set pivot point to 50% and interpolator to linear interpolator.

scale_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="100"
        android:fromXScale="0"
        android:fromYScale="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
</set>

scale_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="100"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0"
        android:toYScale="0" />
</set>

hide/show fab with scale animation

3 Answers3

Linked