Floating Action Buttons In Android - Truiton
Skip to content

Floating Action Buttons In Android

Android Floating Action Button

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:

Android FAB add image

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:

Android FAB Button

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.

6 thoughts on “Floating Action Buttons In Android”

  1. Take me as a novice when I ask this but all these libraries ask for adding dependency to gradle files which as far as I know has a better integration with Android Studio. I work on Eclipse and while using an external library, I simply add the jar file to my Libs folder. As far as I see these above Github Projects are’nt providing one. So my question:

    1. How do you add gradle dependecies in Eclipse or
    2. How do I else make above projects work in Eclipse ?

    Could you please help me out in this ?

  2. Hello Mohit,
    Nice tutorials and thanks for all your help by providing such tutorials, From this I have used the makovkastar Library and my problem is that the floating button is by default of blue color although I have changed the Normal, pressed and the ripple color, Still its not changing I want the button orange in color, thanks

Leave a Reply

Your email address will not be published. Required fields are marked *