Floating Action Buttons In Android

Even though I am an Android developer, sometimes I feel, a lot of new concepts in Android are released in a jiffy. Take for an example, Android material design. It greatly emphasizes on the usage of Floating Action Buttons. But as a matter of fact, when material design was released; no supporting views were released with it, to display a floating action button in android. Although they did provide a sample here, but it had a limitation that it can be used on API 21 and above only. In a way it is correct, that it should not be used on earlier versions of Android. Since material design guidelines came with API 21. But on the other hand the AppCompat support library v7 makes makes most of the material design compatible with earlier versions of Android. Therefore, when we use the Android floating action button, we are bound to display it on all versions of android which are supported by our app.

This brings up a fresh debate on how to display a floating action button in an android app, with backward support. Thanks  to recent developments a new addition in the support repository has been made which enables us to show FAB in Android. It is called Android Design Support Library. But since this addition came in almost a year late, many third party libraries are also available, through which a FAB can be implemented. In this tutorial, we will talk about some of the leading Android FAB libraries:

Android Floating Action Buttons Tutorial

I will use a RecyclerView, on top of which I will be displaying an Android FAB button. Further in this tutorial I will use that FAB button to add an item in my RecyclerView. To ease the development I will refer to my RecyclerView tutorial, which already has a defined method for adding an item in the RecyclerView.

1) FloatingActionButton by Official Android Design Support Library

As I mentioned recently in the start of June 15, a new library was added in the Android support repository, called the Design Support library. This library has many new UI widgets, but one of the most important addition is the FloatingActionButton. Now android supports the Floating action button from API 7 and above through the official support library. To start please include the new Android design support library in your project’s build.gradle file:

compile 'com.android.support:design:22.2.0'

Next to display the Android Floating Action Button, please use the android.support.design.widget.FloatingActionButton xml tag to include it in your layout:

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/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"
    tools:context=".FABActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"/>

    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:src="@mipmap/ic_add"
        app:fabSize="normal"
        app:layout_anchor="@id/coordinatorLayout"
        app:layout_anchorGravity="bottom|right|end"
        app:rippleColor="#F06292"/>
</android.support.design.widget.CoordinatorLayout>

You may observe that I am also using a CoordinatorLayout with this floating action button. Coordinator Layout helps us in building interactions between child views. Although in this example there is no use for a coordinator layout, but it can help if a snackbar is used. To read more about it please refer to this Android Snackbar Tutorial.

To detect clicks from an Android Floating Action Button please use this piece of code:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //Write here anything that you wish to do on click of FAB
        // Code to Add an item with default animation
        int index = mAdapter.getItemCount();
        DataObject obj = new DataObject("Some Primary Text " + index,
                "Secondary " + index);
        ((MyRecyclerViewAdapter) mAdapter).addItem(obj, index);
        //Ends Here
    }
});

2) FloatingActionButton by makovkastar

This library is one of the most popular floating action button libraries available. Most of the apps are using this library. Its quite simple to use as well. It offers a great feature of showing and hiding the FAB with animation, which can give a wow factor to your app. It works for Android API 7 and above, and has an Apache 2.0 license. To start off, please include it in the dependencies section of your gradle file:

compile 'com.melnykov:floatingactionbutton:1.3.0'

Further, please add com.melnykov.fab.FloatingActionButton view to your layout for displaying an Android FAB with RecyclerView:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".FABActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"/>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_add"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_colorNormal="#FF4081"
        fab:fab_colorPressed="#C2185B"
        fab:fab_colorRipple="#F06292"/>

</RelativeLayout>

In the above layout I used a mipmap(drawable) image to display the plus sign:

Next please add the following lines to detect the click events of Android floating action button:

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

fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //Write here anything that you wish to do on click of FAB
                
        // Code to Add an item with default animation
        int index = mAdapter.getItemCount();
        DataObject obj = new DataObject("Some Primary Text " + index,
                "Secondary " + index);
        ((MyRecyclerViewAdapter) mAdapter).addItem(obj, index);
        //Ends Here
    }
});

This would result in a floating action button like this:

3) android-floating-action-button by futuresimple

This library is a fork of FloatingActionButton by makovkastar. This library offers a FloatingActionsMenu, its a unique menu of floating action buttons which pop up when the main floating button is clicked. This menu of floating action buttons also offer labels, just like normal menu items. This library is also very popular among android apps. It works for Android API 14 and above, has Apache 2.0 license.

4) FloatingActionButton by FaizMalkani

This library offers a clean and simple to use implementation of floating action buttons in Android. This library can be used to speed up the development pace as it does not offer any useless features. A simple floating button nothing else. It works for Android API 7 and above, has MIT license.

5) fab by shell-software

This library is highly customizable and offers a lot of features. By using this library you can add different types of animations to the floating action button. Fab can also be used to define the shadow offset, stroke color, and stroke width of the button. Its a great library under Apache 2.0 license with support from Android API 9 and above.

6) FloatingActionButton by Clans

This library is also highly customizable offers a great range of features like shadow colors and offsets. A great feature about this library is that it offers support for custom animations. Also this library can be used to display menu items with labels. This library requires min Android API 15 to run, and has an Apache 2.0 license.

7) android-floating-action-menu by sephiroth74

Another floating action library which is inspired from Google+ floating menu. This library offers a builder pattern to build a menu of floating action buttons of same size. This is something new because with this library you can create an animation like the one in camera app of android. This library can run on Android API 9 and above, has an Apache 2.0 license.

8) CircularFloatingActionMenu by oguzbilgener

If you wish to go for something new, you can try this library. This library offers a new feature of circular floating action buttons. Although this sort of guideline is not described in material design, but I believe its something new and innovative. This library is under MIT license and requires Android API 15 and above.

Conclusion

Although I have tried to list down all the libraries for Android floating action buttons, in case I have missed out any one, please notify me. Hope this article helped you to find the best floating action button library for your project. Connect with us on Facebook, Google+, and Twitter for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.