Floating Action Button(FAB) with Animation in Material Design

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
Most of the Material Design apps use the important element as FAB which covers important functionality of their apps. 
Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.
As this class descends from ImageView, you can control the icon which is displayed via setImageDrawable(Drawable).
The background color of this view defaults to the your theme's  colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

1. Floating Action Button
You can place a floating action button using below design support widget. The layout_gravity attribute is used to define the position of the button.

<android.support.design.widget.FloatingActionButton 
android:id="@+id/fab" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="bottom|end" 
android:layout_margin="@dimen/fab_margin" 
android:src="@android:drawable/ic_dialog_email" />


2. Creating New Project

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. I gave my project name as FAB and package name as com.androidxu.floatingbutton

2. Open build.gradle and add design support library dependency.

com.android.support:appcompat-v7:23.1.1 and com.android.support:design:23.1.1

dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) test
Compile 'junit:junit:4.12' 
compile 'com.android.support:appcompat-v7:23.1.1' 
compile 'com.android.support:design:23.1.1' }

3. Open dimens.xml and add below dimensions. You can see fab_margin is added as 16dp

4.Open the layout file of main activity (activity_main.xml) and do the below changes. You can see the Floating Action Button is added in the below layout. This layout contains the toolbar and floating action button needed for the activity.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidxu.floatingbutton.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Example of Floating buttons"
        android:textSize="20sp"
        android:layout_gravity="center"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="180dp"
        android:src="@drawable/ic_action_settings"
        android:elevation="6dp"
        android:id="@+id/settings"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab1_color"
        android:visibility="invisible"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="100dp"
        android:src="@drawable/ic_action_share"
        android:elevation="6dp"
        android:id="@+id/share"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab2_color"
        android:visibility="invisible"/>

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

2.1 Floating Action Button Click Listener

The click event listener of fab is same as a normal button click event. Add the below code to your MainActivity.java to take appropriate action when fab is clicked.

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Click action
                Intent intent = new Intent(MainActivity.this, NewMessageActivity.class);
                startActivity(intent);
            }
        });

2.2 Adding the click Event in other two  Floating Action Button


Add the below code with combining the animation and other two action buttons in MainActivity.java.

package com.androidxu.floatingbutton;

import android.support.design.widget.FloatingActionButton;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    FloatingActionButton fab_more,fab_settings,fab_share;
    Animation open, close, rotateclock,rotateanticlock;
    boolean isopen = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // typecasting the buttons
        fab_more = (FloatingActionButton) findViewById(R.id.more);
        fab_settings = (FloatingActionButton) findViewById(R.id.settings);
        fab_share = (FloatingActionButton) findViewById(R.id.share);

        // loading the animation from xml file
        open = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_open);
        close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_close);
        rotateclock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_clock);
        rotateanticlock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_anticlock);

        // setting up the onClickListener() method
        fab_more.setOnClickListener(this);
        fab_settings.setOnClickListener(this);
        fab_share.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId())
        {
            case R.id.more:
                if(isopen){
                    // more button is already open
                    fab_settings.startAnimation(close);
                    fab_share.startAnimation(close);
                    fab_more.startAnimation(rotateanticlock);
                    fab_share.setClickable(false);
                    fab_settings.setClickable(false);
                    isopen = false;
                } else{
                    // more button is already close
                    fab_settings.startAnimation(open);
                    fab_share.startAnimation(open);
                    fab_more.startAnimation(rotateclock);
                    fab_share.setClickable(true);
                    fab_settings.setClickable(true);
                    isopen = true;
                }
                break;
            case R.id.settings:
                Toast.makeText(getApplicationContext(),"You clicked settings",Toast.LENGTH_LONG).show();
                break;
            case R.id.share:
                Toast.makeText(getApplicationContext(),"You clicked share",Toast.LENGTH_LONG).show();
                break;
        }
    }
}

2.3 Adding the animation to Floating Button

To add animation to the material design element create anim folder in res Folder .Adding the animation element by creating xml File

create  fab_close.xml

<scale
    android:duration="300"
    android:fromXScale="0.8"
    android:fromYScale="0.8"
    android:toXScale="0.0"
    android:toYScale="0.0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    />

<alpha
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    />

2.3.1 For Rotating  animation to the Fab add the rotate_clock.xml

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

Now run the Application and Enjoy!!