Android Material Design Floating Action Button

By | October 23, 2015
A floating action button is a round button denoting a primary action on your interface , FloatingActionButton is nothing but a view extending ImageViews. As the name suggest it floats on top of the user interface and used to display any promoted action, like adding a new item, compose mail, etc .


In addition to the normal size (56dp) floating action button, it supports the mini size (40dp) when visual continuity with other elements is critical.

Gradle

Firstly you need to add the design support library ,dependencies to the build.gradle(Module:app) file.

file : build.gradle

compile ‘com.android.support:appcompat-v7:23.0.1’
compile ‘com.android.support:design:23.0.1’

Style

Modify res/values/styles.xml as below:
The Style attribute with item name “colorAccent” whose value is used to set the theme or background for the floating action button .

file : style.xml

<resources>

    <!– Base application theme. –>
    <style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>
        <item name=”android:windowNoTitle”>true</item>
        <item name=”windowActionBar”>false</item>
        <!– Customize your theme here. –>
        <item name=”colorPrimary”>@color/primary</item>
        <item name=”colorPrimaryDark”>@color/primary_dark</item>
        <item name=”colorAccent”>@color/accent</item>
    </style>

    <style name=”AppTheme.Toolbar.Title”
      parent=”TextAppearance.Widget.AppCompat.Toolbar.Title”>
        <item name=”android:textColor”>@color/white</item>
    </style>

</resources>

XML Layout

Create a XML Layout in the res/layout called activity_main.xml ,and add floating action button to it.
file : activity_main.xml

<RelativeLayout 
    xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:app=”http://schemas.android.com/apk/res-auto”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent“>

    <android.support.v7.widget.Toolbar
        android:id=”@+id/toolbar”
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:background=”?attr/colorPrimary”
        android:minHeight=”?attr/actionBarSize”
        app:titleTextAppearance=”@style/AppTheme.Toolbar.Title” />

    <android.support.design.widget.FloatingActionButton
        android:id=”@+id/fab”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_alignParentBottom=”true”
        android:layout_alignParentRight=”true”
        android:layout_marginBottom=”@dimen/activity_vertical_margin”
        android:layout_marginRight=”@dimen/activity_horizontal_margin”
        android:src=”@drawable/ic_add” />

</RelativeLayout>

MainActivity

Now in MainActivity inside the onCreate Method get the reference of the floating action button and set the onclick listener on it and handle click event.

file : MainActivity.java

package com.tutorialsbuzz.floatingactionbar;

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

public class MainActivity extends AppCompatActivity {
   private Toolbar toolbar;
   private FloatingActionButton fab;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        fab = (FloatingActionButton) findViewById(R.id.fab);

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, “Floating Button Clicked”, Toast.LENGTH_SHORT).show();
            }
        });

    }
}