AndroidSketchpad

Welcome to the part two of our today's android project.
In the previous part, we create animation XML and drawable. Now we add fab code in the layout. (if you miss part one click here)

In my case my layout is activity_main.xml before doing this we need two colors in colors.xml.
Let's add this

<color name="fab1">#e2e21d</color>
<color name="fab2">#47e92e</color>

Now add three fab button. I share this code one by one.

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="150dp"
        android:layout_marginEnd="16dp"
        android:layout_gravity="bottom|end"
        android:elevation="6dp"
        android:src="@drawable/ic_person_outline_black_24dp"
        app:fabSize="normal"
        android:visibility="gone"
        android:id="@+id/fab_people"
        app:backgroundTint="@color/fab2"
        app:pressedTranslationZ="12dp"/>

next one

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="80dp"
        android:layout_marginEnd="16dp"
        android:layout_gravity="bottom|end"
        android:elevation="6dp"
        android:src="@drawable/ic_school_black_24dp"
        app:fabSize="normal"
        android:visibility="gone"
        android:id="@+id/fab_school"
        app:backgroundTint="@color/fab1"
        app:pressedTranslationZ="12dp"/>

and the last one

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:layout_gravity="bottom|end"
        android:elevation="6dp"
        android:src="@drawable/ic_share_black_24dp"
        app:fabSize="normal"
        android:id="@+id/main_fab"
        app:pressedTranslationZ="12dp"/>

Note: if you have any dought you can check full activity.xml code on GitHub.

Now time for java code.
In my case java file is MainActivty.java Add those variables-

FloatingActionButton main,people,school;
Animation fabOpen,fabClose,fabRotate,fabRotateAntiClockWise;

//fab is open or close
boolean isOpen = false;

Now assign all fab button with findViewById()

main = (FloatingActionButton) findViewById(R.id.main_fab);
people = (FloatingActionButton) findViewById(R.id.fab_people);
school = (FloatingActionButton) findViewById(R.id.fab_school);

Now time for load animation-

fabOpen = AnimationUtils.loadAnimation(this,R.anim.fab_open);
fabClose = AnimationUtils.loadAnimation(this,R.anim.fab_close);
fabRotate = AnimationUtils.loadAnimation(this,R.anim.rotate_clockwise);
fabRotateAntiClockWise = AnimationUtils.loadAnimation(this,R.anim.rotate_anit_clockwise);

If the user clicks the main fab button then we will show others button. That's is the logic. ok add main fab clickListener and use below code to show others button. After the code, I discuss code logic again Ok enough talking. Let's start-

main.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Log.e("Click", "click");

                if (isOpen){
                    people.setAnimation(fabClose);
                    school.setAnimation(fabClose);
                    main.setAnimation(fabRotateAntiClockWise);
                    people.setClickable(false);
                    school.setClickable(false);
                    people.setVisibility(View.GONE);
                    school.setVisibility(View.GONE);
                    isOpen = false;

                } else {
                    people.setVisibility(View.VISIBLE);
                    school.setVisibility(View.VISIBLE);
                    people.setAnimation(fabOpen);
                    school.setAnimation(fabOpen);
                    main.setAnimation(fabRotate);
                    people.setClickable(true);
                    school.setClickable(true);
                    people.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "Welcome to people", 
                                      Toast.LENGTH_SHORT).show();
                        }
                    });

                    school.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "Welcome to school", 
                                                      Toast.LENGTH_SHORT).show();
                        }
                    });

                    isOpen = true;
                }
            }
        });

Note: youcan recheck MainActivity.java on GitHub 

Code analysis-
1.In layout file when we created out floating action button we set those button's visibility gone excepts main fab button. we check boolean state first, isopen is true or false

2. If the answer is true that means fab is open now. So we set here close fab functionality.
2.1. set close animation on two fabs that are you want's to close.
2.2. set those fab clickable false.
2.3 set anti clock rotate animation on mainFab.
2.4 now time to invisible that's fab.
2.5 at last assign isopen to false.

3.If the answer is false that means fab is close. So we set here close fab functionality.
3.1. now time to invisible others fab.
3.1. set open animation on two fabs that are not shown.
3.2. set those fab clickable true.
3.3 set clock rotate animation on mainFab.
3.4 set click listener on those fab
3.5 at last assign isopen to true.

Wow. now we fab three fabs in our layout but only one is showing at first. After clicking main fab other's button is open with animation. And those button is now working. And again click the main fab button, others two buttons is gone. So welcome to you all. you successfully created this project.

you can find the full project on Github. Fab

Thanks for reading this post and hope this code is working and now you can use fab with animation on your own project.

Happy coding.

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.