Floating Action Button

A floating action button represents the primary action in an application.

Go to gradle add this library

compile 'com.getbase:floatingactionbutton:1.10.0'

activity_main.xml

---------------------------

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    tools:context="com.sgp.anil.floatingactionbutton.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|bottom"
        fab:fab_addButtonColorNormal="@color/accent"
        fab:fab_addButtonColorPressed="@color/accent_dark"
        fab:fab_addButtonPlusIconColor="@color/white"
        fab:fab_addButtonStrokeVisible="false"
        fab:fab_labelStyle="@style/menu_labels_style"
        fab:fab_labelsPosition="left">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_event"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/accent"
            fab:fab_colorPressed="@color/accent_dark"
            fab:fab_plusIconColor="@color/white"
            fab:fab_icon="@mipmap/ic_launcher"
            fab:fab_size="mini"
            fab:fab_title="Events" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/accent"
            fab:fab_colorPressed="@color/accent_dark"
            fab:fab_plusIconColor="@color/white"
            fab:fab_icon="@mipmap/ic_launcher"
            fab:fab_size="mini"
            fab:fab_title="Photographs" />

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_others"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/accent"
            fab:fab_colorPressed="@color/accent_dark"
            fab:fab_plusIconColor="@color/white"
            fab:fab_icon="@mipmap/ic_launcher"
            fab:fab_size="mini"
            fab:fab_title="Others" />

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

</android.support.design.widget.CoordinatorLayout>

content_main.xml

-------------------------

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical"
    android:background="#999"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.sgp.anil.floatingactionbutton.MainActivity"
    tools:showIn="@layout/activity_main">
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:fab="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="in.city.bytes.view.MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <!-- other content in the activity -->
        </LinearLayout>

        <FrameLayout
            android:id="@+id/frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white_overlay">
            <!--  floating action menu with buttons -->
        </FrameLayout>
    </FrameLayout>

</LinearLayout>

styles.xml

----------------------

<style name="menu_labels_style">
    <item name="android:background">@drawable/fab_label_background</item>
    <item name="android:textColor">@color/secondary_text</item>
</style>

 color.xml

---------------

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="accent_dark">#ff2929</color>
    <color name="accent">#ff5252</color>
    <color name="secondary_text">#727272</color>
    <color name="white">#FFFFFF</color>
    <color name="white_overlay">#F3F3F3</color>
</resources>

MainActivity.Java

---------------------------

package com.sgp.anil.floatingactionbutton;

import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

import com.getbase.floatingactionbutton.FloatingActionButton;
import com.getbase.floatingactionbutton.FloatingActionsMenu;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    FloatingActionButton fb1, fb2, fb3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_layout);
        frameLayout.getBackground().setAlpha(0);
        final FloatingActionsMenu fabMenu = (FloatingActionsMenu) findViewById(R.id.fab_menu);
        fb1 = (FloatingActionButton) findViewById(R.id.fab_event);
        fb2 = (FloatingActionButton) findViewById(R.id.fab_photo);
        fb3 = (FloatingActionButton) findViewById(R.id.fab_others);
        fabMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
            @Override
            public void onMenuExpanded() {
                frameLayout.getBackground().setAlpha(240);
                frameLayout.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        fabMenu.collapse();
                        return true;
                    }
                });
            }

            @Override
            public void onMenuCollapsed() {
                frameLayout.getBackground().setAlpha(0);
                frameLayout.setOnTouchListener(null);
            }
        });
        fb1.setOnClickListener(this);
        fb2.setOnClickListener(this);
        fb3.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.fab_event:
                Snackbar.make(v, "Event Clicked", Snackbar.LENGTH_LONG).show();
                break;
            case R.id.fab_photo:
                Snackbar.make(v, "Photo Clicked", Snackbar.LENGTH_LONG).show();

                break;
            case R.id.fab_others:
                Snackbar.make(v, "Others Clicked", Snackbar.LENGTH_LONG).show();

                break;


        }
    }
}

 Output:

-----------------