FloatingActionMenu in android

Hello guys,
 Today we are learn about how to create FloatingActionMenu in android.


ActivityMain.java

package com.samset.floatingactionmenu;

import android.animation.Animator;
import android.annotation.SuppressLint;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fabmain, fabdelete, fabsettings, fabfavorite;
    private LinearLayout fabLayoutFavorite, fabLayoutSettings, fabLayoutDelete;
    private View fabBGLayout;
    boolean isFABOpen = false;

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


        fabLayoutDelete = (LinearLayout) findViewById(R.id.fabLayoutLike);
        fabLayoutSettings = (LinearLayout) findViewById(R.id.fabLayoutSettings);
        fabLayoutFavorite = (LinearLayout) findViewById(R.id.fabLayoutdelete);
        fabmain = (FloatingActionButton) findViewById(R.id.fab);
        fabdelete = (FloatingActionButton) findViewById(R.id.fabDelete);
        fabsettings = (FloatingActionButton) findViewById(R.id.fabSettings);
        fabfavorite = (FloatingActionButton) findViewById(R.id.fabLike);
        fabBGLayout = findViewById(R.id.fabBGLayout);

        fabmain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (!isFABOpen) {
                    showMenu();
                } else {
                    closeMenu();
                }
            }
        });

        fabBGLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                closeMenu();
            }
        });
    }

    private void showMenu() {
        isFABOpen = true;
        fabLayoutFavorite.setVisibility(View.VISIBLE);
        fabLayoutSettings.setVisibility(View.VISIBLE);
        fabLayoutDelete.setVisibility(View.VISIBLE);
        fabBGLayout.setVisibility(View.VISIBLE);

        fabmain.animate().rotationBy(45);
        fabLayoutFavorite.animate().translationY(-getResources().getDimension(R.dimen.margin_55));
        fabLayoutSettings.animate().translationY(-getResources().getDimension(R.dimen.margin_100));
        fabLayoutDelete.animate().translationY(-getResources().getDimension(R.dimen.margin_145));
    }

    private void closeMenu() {
        isFABOpen = false;
        fabBGLayout.setVisibility(View.GONE);
        fabmain.animate().rotationBy(-45);
        fabLayoutFavorite.animate().translationY(0);
        fabLayoutSettings.animate().translationY(0);
        fabLayoutDelete.animate().translationY(0).setListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                if (!isFABOpen) {
                    fabLayoutFavorite.setVisibility(View.GONE);
                    fabLayoutSettings.setVisibility(View.GONE);
                    fabLayoutDelete.setVisibility(View.GONE);
                }

            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
    }

    @Override
    public void onBackPressed() {
        if (isFABOpen) {
            closeMenu();
        } else {
            super.onBackPressed();
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.samset.floatingactionmenu.MainActivity"
    tools:ignore="VectorDrawableCompat">

    <View
        android:id="@+id/fabBGLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/viewBackground"
        android:visibility="gone" />


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:id="@+id/fabLayoutdelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabDelete"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_delete" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/fabLayoutSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">

            <TextView
                android:textColor="#FFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Settings" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabSettings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_settings" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/fabLayoutLike"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/margin_25"
            android:layout_marginRight="@dimen/margin_25"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12"
            android:visibility="gone">
            <TextView
                android:textColor="#FFF"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Like" />
            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fabLike"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:tint="@android:color/white"
                app:fabSize="mini"
                app:srcCompat="@drawable/ic_favorite" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginRight="@dimen/fab_margin"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:padding="@dimen/standard_12">


            <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:gravity="center_vertical"
                app:fabSize="normal"
                app:srcCompat="@drawable/ic_add" />
        </LinearLayout>
    </FrameLayout>
</RelativeLayout>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="viewBackground">#CC000000</color>


</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>


    <dimen name="_50sdp">55dp</dimen>
    <dimen name="standard_12">12dp</dimen>
    <dimen name="margin_25">25dp</dimen>
    <dimen name="margin_55">55dp</dimen>
    <dimen name="margin_100">100dp</dimen>
    <dimen name="margin_145">145dp</dimen>
    <dimen name="fab_margin">16dp</dimen>

</resources>

Live Sample    

Thank you
 See FullSorceCode download hereFloatingActionMenu-master