Android Material Design widget: Floating Action Button

Android Material Design widget: Floating Action Button

Thursday, July 21, 2016
    I have many posts about Material Design technology, and some of them is guiding how to use new widgets which available in Design Support library. Floating Action Button is a new Button style that make depth for Android UI and convenience in UX.

    In this post, I will talk about some popular designs around Floating Action Button (FAB), readers follow to get a more accurate perspective on this component.

Design support library dependency

    As a component of Design Support library, so in order to use it, you must add this dependency to your app/build.gradle: 
dependencies {
    compile 'com.android.support:design:24.0.0'
}

Adding Action Button to layout

    A simple declaring FAB in xml can be like this: 
<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" />
    Some important attributes:
  • app:fabSize: defining FAB size, supports 2 values: normal and mini.
  • layout_gravity: define position of FAB.
  • 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.
    And an activity layout which contains a FAB:
activity_main.xml 
<?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"
    android:id="@+id/coor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/activity_horizontal_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Android Floating Action Button"
            android:textStyle="bold" />

    </RelativeLayout>

    <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>
    Running this activity, we will have this output:

Handling click event

    Like other View, we handle it's click event normally:
 fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar
                .make(coordinatorLayout, "This is Snackbar", Snackbar.LENGTH_LONG)
                .setAction("OK", null);

                snackbar.show();
            }
        });
    }
Important Note: To show Snackbar, the root container in your layout must be CoordinatorLayout (like my activity_main.xml above)!
    And this is output:

Put FAB between two layouts

    The interesting feature of FAB is that we can set it between 2 layouts (or widgets) by using app:layout_anchor. Designing a layout like this:
activity_main.xml 
<?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"
    android:id="@+id/coor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/midu"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@android:drawable/ic_media_play"
        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>
    Running this activity, we may have this result  (FAB is floating on two layouts):

Note: To make expanding/collapsing Action Bar like output above, please read THIS POST.

Two FABs next to each other

    When using Google Map application, you can see a FAB on each other like this:
    By combining app:layout_anchor and app:layout_anchorGravity, we can make this layout type:
activity_main.xml 
<?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"
    android:id="@+id/coor"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/activity_horizontal_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Android Floating Action Button"
            android:textStyle="bold" />

    </RelativeLayout>

    <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_marginRight="@dimen/fab_margin"
        android:layout_marginBottom="@dimen/fab_margin"
        android:src="@android:drawable/ic_media_pause" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:src="@android:drawable/ic_media_play"
        app:layout_anchor="@id/fab"
        app:layout_anchorGravity="top" />

</android.support.design.widget.CoordinatorLayout>
    And this is our result:

Floating Action Menu

    As you can see at Inbox application (developed by Google), there are a component can be called as Floating Action Menu which contains many FABs:
    Up to now, there are no official way given by Google to building this layout, so you must use an external library to make it. With this matter, I had a separate post here!

Final thoughts

    Floating Action Button is not hard to use in your Android application. But in order to make a good UX, you must read carefully design guide from Google. Through this post, I hope that readers can choose the suitable FAB style for your own cases.
    References:
Hong Thai

Share


Previous post
« Prev Post
Next post
Next Post »
Subscribe to: Post Comments (Atom)