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.
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.
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
Very useful Ravi.
Great job. In additionaly, how can we attach the Floating Action Button to Listview with slide listener?
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.
how can i make it expand to have 3 items for example
it’s possible to run this on kitkat version?
yes
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 🙂
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?
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
Thanks Ravi, Will look in to it.
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!
will u marre me in the name of java compiler?
marry*
Simple and eficiente…
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
How to create a floating action button like FB Messanger New incoming Message
Hi,
Can i have floating action button in the class which extends activity?
floating action bar with animation
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..
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 ?????
A.O.a…MrRavi can u plz guide to add menu at floating action button
app:popupTheme=”@style/AppTheme.PopupOverlay” error
Add these in your styles.xml
Bro i want to insert the floation action button in Fragment plz any one help me
nice tutorial ..thanks
Is there possibility to implement circular animation without using library? how?
how do implement without using library?
Which library we are using here?
on click is not working if i use show() and hide() methods for setting the visibility of FAB
It should be. Can you paste your code?
button is fixed at particular position only. Is there any extra code needed to move button
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.
hi, how to send message to whatsapp with this button? can you make it?
u can achieve it by using intent
How do I change the shape of the fab?
What shape you are looking for?
Something like a rhombus?
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”
Or u can download a image in the shape of ur button and give it to android:src=”@drawable/sample”
Thank you!
Hey Ravi. Good job on the post. Any word on how to implement an expandable floating action button. Would appreciate some help on that.