FloatingActionButton with Multiple Actions

galvan picture galvan · Jun 13, 2015 · Viewed 17.4k times · Source

I'm using FloatingActionsButton (FAB) from the design support library (com.android.support:design:22.2.0).

In my application I have two main functionalities which the first is to sync data every X minutes (which starts a service and updates the data every X minutes) and the second is sync once (which request data from the server and updates the UI).

I want to use FAB for these main functionalities and wondering what and how I can make it:

The first approach is using one FAB that when is clicked the button will show two new FABs one for each functionality.

The second approach is displaying always two FABs in the UI which the sync every X minutes FAB will be bigger than the update once FAB.

I interesting in the first approach and wondering how can I implement this behaviour? I looked around but this view is new and I couldn't find an example.

Thanks.

Answer

Duan Bressan picture Duan Bressan · Jan 2, 2017

I am using this github library, it is very simple and solved my problems:

https://github.com/Clans/FloatingActionButton

Add a dependency to your build.gradle:

dependencies {
    compile 'com.github.clans:fab:1.6.4'
}

Add this to the beginning of your xml:

xmlns:fab="http://schemas.android.com/apk/res-auto"

Now just add your buttons, example:

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_singleLine="true"
    fab:menu_fab_label="Cancel"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_animationDelayPerItem="0"
    fab:menu_colorNormal="#00C29F"
    fab:menu_colorPressed="#00C29F"
    fab:menu_colorRipple="#00C29F"
    android:padding="8dp">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_edit_white"
        fab:fab_size="mini"
        fab:fab_label="Edit Category"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddProduct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Add product"/>

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fabAddSubcategory"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fab_add"
        fab:fab_size="mini"
        fab:fab_label="Subcategory"/>

</com.github.clans.fab.FloatingActionMenu>