Android FloatingActionButton example.

Floating Action Button represents the primary action in application. They are used for special type of promoted actions. It is shaped like a Circled icon Floating above the UI. Floating Action button has 2 sizes , Default(56dp*56dp) and Mini(40dp*40dp) .  
Floating Action Button is a material design compenent so we need to follow some design guidelines while using it
Important Floating Action Button Desin Guidelines

• Floating Buttons should only be used for positive actions like create,favorite,share,explore . It should not be used for destructive actions like delete,alerts,errors..
• It should be placed minimum 16dp from the edge of the screen
• Icon inside the Floating Action Button should 24dp
• Only one floating Action button recommended per screen

For more Guidelines visit 

https://material.io/guidelines/components/buttons-floating-action-button.html

Floting ActionBar has special motion behaviour like morohing,launching and tranferring anchor points. It can Morph into a toolbar showing related actions or it can transform into a single sheet of material containing all actions.

Our Demo application shows the basics of how to use Floating Action Button. Screenshots of the application are

Our demo application contains FloatingActionButton at the end of the screen , a Toast is shown on clicking it.

1. First we need to add  dependency for FloatingActionButton in the app level build.gradle file.

    compile 'com.android.support:design:26.0.0-alpha1'

build.gradle file

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.androidtuts4u.arun.demofab"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:26.0.0-alpha1'
}

2.Next we need to create layout for our application. we are Using Coordinator layout for application. Coordinator layout is super powered frame layout . Main use of using coordiantor layout is that it can coordinate animatons and transition of the views with in it.
Add FloatingActionButton to our layout.

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_add_white"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"/>

• app:FabSize  : size Floating action button can be controlled by this xml attribute , we can use two size  Default(56dp*56dp) and Mini(40dp*40dp)
• app:srcCompat : To choose Icon to be used inside floatingActionButton normally 24 dp icon is used
• app:backgroundTint : Used to choose colour of our FloatingActionButton , By Default it will be the accent color of ou application theme.

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"
    tools:context="com.androidtuts4u.arun.demofab.MainActivity">


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:clickable="true"
        app:fabSize="normal"
        app:srcCompat="@drawable/ic_add_white" />
</android.support.design.widget.CoordinatorLayout>

3.Next our MainActivity.java

package com.androidtuts4u.arun.demofab;

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

public class MainActivity extends AppCompatActivity {
    FloatingActionButton fabAdd;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fabAdd = (FloatingActionButton) findViewById(R.id.fab_add);
        fabAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Floating Action Button clicked", Toast.LENGTH_LONG).show();
            }
        });
    }
}

FloatingActionButton is declared inside the MainActivity , OnclickListener is written for the FloatingActionButton and a Toast is shown on clicking.

fabAdd = (FloatingActionButton) findViewById(R.id.fab_add);
fabAdd.setOnClickListener(new View.OnClickListener() {
           @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Floating Action Button clicked", Toast.LENGTH_LONG).show();
            }
        });

Source code of this demo application can be downloaded from the following google drive link
https://drive.google.com/file/d/0BySLpWhqmbbdamRJbnRyMG5Ebjg/view?usp=sharing
                        OR Download from  Github
https://github.com/arunkfedex/DemoFab