Floating Action Button – An Android Material Design Component

Android Floating Action Button is another interesting component introduced in material design. The floating action button floats on UI in a circular shape with an action attached to it. You can find complete information about floating action button behaviour, transitions and other specs here.

Another important and interesting Material design component is the Android Floating Action Button. This button is generally placed at the bottom of the device UI and is of circular in shape. The floating action button also has an action attached it.

1. Floating Action Button

Below code can be used to implement the floating action button in android. The position of the floating button can be defined using the layout_gravity attribute. The fabsize and backgroundTin are used to define size and background color respectively.

<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/stat_sys_vp_phone_call_on_hold" />

2. Creating New Project

1. Open Android Studio software and create new project by fill all the details required. I gave my project name as FAB and package name as com.devappandroid.floatingaction

2. Open build.gradle and you must add the design support library dependency.

‘com.android.support:appcompat-v7:24.2.0’ and ‘com.android.support:design:24.2.0’

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

3. Edit dimens.xml file and add below dimensions. As you can see fab_margin is added as 16dp

<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="fab_margin">16dp</dimen>
</resources>

4. Follow our another tutorial here to apply the material design to your android application. However, if you are using updated or latest version of Android Studio then Material Design theme will be applied automatically while creating the new project.

5. Now edit the layout file of main activity (activity_main.xml) and copy paste the following code.

<?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" android:fitsSystemWindows="true">

    <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" />

    <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/stat_sys_vp_phone_call_on_hold" />

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

6. Create new xml layout and name it as content_main.xml and copy paste the following code. This code contains the actual content of the activity except the toolbar and fab.

<?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:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main">

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Floating Button" />
</RelativeLayout>

After copying the code, run the app, the floating action button can be seen at the bottom right corner of the screen in your app.

floating-action-button

2.1 Floating Action Button Click Listener

Copy paste the following code in the MainActivity.java file to take appropriate action when fab is clicked. You will see that the click event listener of the fab works similar to a normal button click event.

package com.devappandroid.floatingaction;

import android.content.Intent;
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.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton fab;

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

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