Android Floating Action Button with animation

In this android project, we create 3 floating action button. The main fab button is only showing when activity is launch. other's two are invisible. After clicking the main fab button it will show the other's fab button. Those buttons are now visible and clickable. after clicking again main fab button is rotate 45 degrees and close others fab button with animation. That's our main goal today.

Let's start to making our today's android app
First, add those dependencies to your build.gradle file

dependencies {
   
    compile 'com.android.support:appcompat-v7:25.2.0'
    compile 'com.android.support:design:25.2.0'
    
}

Now we create 4 animations XML file in res > anim folder.

1.fab_open.XML
2.fab_close.xml
3. rotate_clockwise.XML
4.rotate_anti_clockwise.xml

first two are using on closing and opening fab and last 2 are using to rotate the main fab.

Let's create those file in res > anim folder

Note: we should follow code comment. That will help us to understand code easily.

1.fab_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true">
    <!-- android:fillAfter="true" is ensure thata animation transformation occur
     only after finish animation -->

    <!-- we change animation from 0 to 80 percent -->
    <!-- pivot x or y means it's is the center point of animation -->
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale=".8"
        android:toYScale=".8"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "300"
        android:interpolator = "@android:anim/linear_interpolator"/>

    <!-- now change the animation of the opacity of the object -->
    <!-- now we change alpha 0 to 1 that's means object's disappears -->
    <!-- accelerate_interpolator means that's animation start's slowly -->
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration = "300"
        android:interpolator = "@android:anim/accelerate_interpolator"/>


</set>

2.fab_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <!-- android:fillAfter="true" is ensure thata animation transformation occur
     only after finish animation -->

    <!-- same as fab_open.xml but inverse order -->
    
    <!-- we change animation from 80 to 0 percent -->
    <!-- pivot x or y means it's is the center point of animation -->
    <scale
        android:fromXScale=".8"
        android:fromYScale=".8"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "300"
        android:interpolator = "@android:anim/linear_interpolator"/>

    <!-- now change the animation of the opacity of the object -->
    <!-- now we change alpha 1 to 0 that's means object's disappears -->
    <!-- accelerate_interpolator means that's animation start's slowly -->
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration = "300"
        android:interpolator = "@android:anim/accelerate_interpolator"/>

</set>

3.rotate_clockwise.xml

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

    <!-- it rotate to 0 to 45 degree -->

    <rotate
        android:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "300"
        android:interpolator = "@android:anim/linear_interpolator"/>


</set>

34 rotate_anti_clockwise.xml

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

    <!-- same as clockwise.xml but inverse order -->
    <!-- in this animation we rotate start 45 to 0  -->
    <rotate
        android:fromDegrees="45"
        android:toDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration = "300"
        android:interpolator = "@android:anim/linear_interpolator"/>
</set>

Now add some drawable to on our android project. I am currently use vector drawable here. I also share my code here. Note you can use image or others vector drawable as you.(it also reduces android app size)

1.ic_person_outline_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,5.9c1.16,0 2.1,0.94 2.1,
        2.1s-0.94,2.1 -2.1,2.1S9.9,9.16 9.9,8s0.94,-2.1 2.1,
        -2.1m0,9c2.97,0 6.1,1.46 6.1,2.1v1.1L5.9,18.1L5.9,
        17c0,-0.64 3.13,-2.1 6.1,-2.1M12,4C9.79,4 8,5.79 8,
        8s1.79,4 4,4 4,-1.79 4,-4 -1.79,-4 -4,-4zM12,13c-2.67,
        0 -8,1.34 -8,4v3h16v-3c0,-2.66 -5.33,-4 -8,-4z"/>
</vector>

2.ic_school_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M5,13.18v4L12,21l7,-3.82v-4L12,17l-7,-3.82zM12,3L1,9l11,6 9,-4.91V17h2V9L12,3z"/>
</vector>

3.ic_share_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,
        0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,
        -0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,
        0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,
        3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,
        9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,
        -0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,
        2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,
        -2.92 -2.92,-2.92z"/>
</vector>

Ok, that's looking great.
we have done a lot. In the next part, we have created layout and java code. Click here for next part.