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

Subscribe
Notify of
guest
44 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Eder
Eder
4 years ago

Very useful Ravi.

Anil Eger
Anil Eger
4 years ago

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

Chirag thaker
Chirag thaker
4 years ago

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
kamran
4 years ago

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

Guilherme Marquesini Reis Ribe
Guilherme Marquesini Reis Ribe
4 years ago

it’s possible to run this on kitkat version?

Daniel_Z
Daniel_Z
4 years ago

yes

Kenny Jay Jaudian
Kenny Jay Jaudian
4 years ago

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
Saravana Raja
4 years ago

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.

Ravi Tamada
4 years ago
Reply to  Saravana Raja

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

Saravana Raja
Saravana Raja
4 years ago
Reply to  Ravi Tamada

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

Ravi Tamada
4 years ago
Reply to  Saravana Raja

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
Saravana Raja
4 years ago
Reply to  Ravi Tamada

Thanks Ravi, Will look in to it.

Huỳnh Vinh
Huỳnh Vinh
4 years ago

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
Lorenzo
4 years ago

will u marre me in the name of java compiler?

Lorenzo
Lorenzo
4 years ago

marry*

Vanilton Coelho
Vanilton Coelho
4 years ago

Simple and eficiente…

jerom
jerom
4 years ago

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.
Rehan.CH.
4 years ago

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

sunil
sunil
4 years ago

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

UMAKANT RANGA
UMAKANT RANGA
4 years ago

floating action bar with animation

Valeriano Mamac Embodo Jr.
Valeriano Mamac Embodo Jr.
4 years ago

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
pradeepkumar reddy
4 years ago

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
shab
4 years ago

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

Anil kumar
Anil kumar
3 years ago

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

Deko
Deko
3 years ago
Reply to  Anil kumar

Add these in your styles.xml

ahmed
ahmed
3 years ago

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

Dhruv Gupta
Dhruv Gupta
3 years ago

nice tutorial ..thanks

Vivek
Vivek
3 years ago

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

vivek
vivek
3 years ago

how do implement without using library?

Ravi Tamada
3 years ago
Reply to  vivek

Which library we are using here?

Sunil Kushwah
Sunil Kushwah
3 years ago

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

Ravi Tamada
3 years ago
Reply to  Sunil Kushwah

It should be. Can you paste your code?

Manisha
Manisha
3 years ago

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

Chandanit Chandanit Nou Nou
Chandanit Chandanit Nou Nou
3 years ago

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

Ravi Tamada
3 years ago

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

wawan setiawan
wawan setiawan
2 years ago

hi, how to send message to whatsapp with this button? can you make it?

RAHUL MAURYA
RAHUL MAURYA
2 years ago
Reply to  wawan setiawan

u can achieve it by using intent

Jaysri
Jaysri
2 years ago

How do I change the shape of the fab?

Ravi Tamada
2 years ago
Reply to  Jaysri

What shape you are looking for?

Jaysri
Jaysri
2 years ago
Reply to  Ravi Tamada

Something like a rhombus?

Sanjo Shaju Manjaly
Sanjo Shaju Manjaly
2 years ago
Reply to  Jaysri

I think u will have to create an extra xml file for the shape of button and call it in the button android:background=”@drawable/sample”

Sanjo Shaju Manjaly
Sanjo Shaju Manjaly
2 years ago

Or u can download a image in the shape of ur button and give it to android:src=”@drawable/sample”

Jaysri
Jaysri
2 years ago

Thank you!

Brian Ondari
Brian Ondari
9 months ago

Hey Ravi. Good job on the post. Any word on how to implement an expandable floating action button. Would appreciate some help on that.

44
0
Would love your thoughts, please comment.x
()
x