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.

android floating action button

1. Floating Action Button

You can place a floating action button using below design support widget. The layout_gravity attribute is used to define the position of the button.

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

Position You can position the floating button by using layout_gravity attribute
Size FAB supports two sizes ‘normal‘ and ‘mini‘. You can define the size of the button by using app:fabSize attribute
Background Color By default, fab takes colorAccent as background color. If you want to change the background of fab, use app:backgroundTint attribute to define your own background color

Now we’ll see the FAB in action by creating a simple project.

2. Creating New Project

1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. I gave my project name as FAB and package name as info.androidhive.fab

2. Open build.gradle and add design support library dependency.

com.android.support:appcompat-v7:23.1.1 and com.android.support:design:23.1.1

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

3. Open dimens.xml and add below dimensions. 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. Apply the material design to your app by following the steps mentioned here. But if you updated your Android Studio to latest version, the Material Design theme will be applied automatically when you created the new project.

5. Open the layout file of main activity (activity_main.xml) and do the below changes. You can see the Floating Action Button is added in the below layout. This layout contains the toolbar and floating action button needed for the activity.

<?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"
    tools:context="info.androidhive.fab.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" />

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

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

6. Create another xml layout named content_main.xml and add the below code. This layout 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:context="info.androidhive.fab.MainActivity"
    tools:showIn="@layout/activity_main">

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

Now if you run the app, you can see the floating action button displayed at the bottom right corner of the screen.

android floating action button

2.1 Floating Action Button Click Listener

The click event listener of fab is same as a normal button click event. Add the below code to your MainActivity.java to take appropriate action when fab is clicked.

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

package info.androidhive.fab;

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);
            }
        });
    }
}

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: ravi@androidhive.info
  • Eder

    Very useful Ravi.

  • Anil Eger

    Great job. In additionaly, how can we attach the Floating Action Button to Listview with slide listener?

  • Chirag thaker

    Thanks Your Code works,only one problem i am facing that shadow and elevation not showing . i am using Android M TargetSDK.

    and one more complain “YOUR MAIL IS NOT COMING FOR CREATING ACCOUNT (SUSCRIBE)” plz check it.

  • kamran

    how can i make it expand to have 3 items for example

  • Guilherme Marquesini Reis Ribe

    it’s possible to run this on kitkat version?

    • Daniel_Z

      yes

  • Kenny Jay Jaudian

    Nice tutorial sir Ravi. Also can you make a tutorial about fab with menu? and when you tap on that menu it goes to another activity. please 🙂

  • Saravana Raja

    Good one .!! Hello Ravi 🙂 good to see your article its very useful. Can u clear me some doubts ? 1. Can u suggest me which pattern is best to develop Android Application ?. Currently I’m Following MVC Pattern, In that i’m making, activity Class as a VIEW and separate CONTROLLER & MODEL java classes. As per my understand from controller all the process have to start, but in android activity is start point but this start of activity, controller have to do as per MVC patter if i’m rit. How to achieve this ? or any thing wrong im doing ? can u help me with tis Thanks Ravi.

    • Can you give me your project screenshot by expanding all the directories?

      • Saravana Raja

        Thanks for ur response Ravi. Sorry Ravi i’m working in a company and developing their product application so i can’t do that.

        • Okay np. I have worked in pretty complex apps but didn’t followed any MVC pattern. May be you can have a look at google IO app as it is developed by Google.

          https://github.com/google/iosched

          • Saravana Raja

            Thanks Ravi, Will look in to it.

  • Huỳnh Vinh

    That nice tutorial!
    Ravi sir, I have try with custom new background of FloatButton but can’t, Can you tell me how to custom that? Thank you so much!

  • Lorenzo

    will u marre me in the name of java compiler?

  • Lorenzo

    marry*

  • Vanilton Coelho

    Simple and eficiente…

  • jerom

    how can we create a menu for the floating action button there are libraries to do this, but can any thing be done with simple layouts with views and buttons

  • Rehan.CH.

    How to create a floating action button like FB Messanger New incoming Message

  • sunil

    Hi,
    Can i have floating action button in the class which extends activity?

  • UMAKANT RANGA

    floating action bar with animation

  • Valeriano Mamac Embodo Jr.

    Hi! Mr. Ravi. I just want to know if, there is a way to adjust the positon of the floating button with just the use of java class..Thank you..

  • pradeepkumar reddy

    how to increase the size of icon inside floating action button ? i’m trying to put plus icon inside floating action button. I had tried with 48dp, 72dp, 96dp images, but still the icon inside floating action button is looking too small.

    how to increase the size of icon inside floating action button ?????

  • shab

    A.O.a…MrRavi can u plz guide to add menu at floating action button

  • Anil kumar

    app:popupTheme=”@style/AppTheme.PopupOverlay” error

    • Deko

      Add these in your styles.xml

  • ahmed

    Bro i want to insert the floation action button in Fragment plz any one help me

  • Dhruv Gupta

    nice tutorial ..thanks

  • Vivek

    Is there possibility to implement circular animation without using library? how?

  • vivek

    how do implement without using library?

  • Sunil Kushwah

    on click is not working if i use show() and hide() methods for setting the visibility of FAB

  • Manisha

    button is fixed at particular position only. Is there any extra code needed to move button

  • Chandanit Chandanit Nou Nou

    I want to show and hid fab when i scrool recyclerView but recyclerView in NestedScrollView. how to do it.

    • You can have a listener to nestedscrollview and hide the fab on scroll.