FloatingActionButton with Multiple Actions

Question

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 1

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>