hide/show fab with scale animation

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 ?

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>

Anuj Sharma

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.

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>

来源：https://stackoverflow.com/questions/34553755/hide-show-fab-with-scale-animation

标签

android

material-design

floating-action-button