FloatingActionButton with multiple actions

Question

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

In my application, I have two main functions, the first of which is data synchronization every X minutes (which starts the service and updates data every X minutes), and the second is synchronized once (it requests data from the server and updates the UI).

I want to use FAB for these basic functions and wonder what and how I can do:

The first approach uses one FAB, which, when pressed, displays two new FABs, one for each functionality.

The second approach always displays two FABs in the user interface, which synchronization every X minutes of FAB will be more than updating after FAB.

I am interested in the first approach and wonder how I can implement this behavior? I looked around, but this look was new, and I could not find an example.

Thank.

Answer 1

I use this github library, it is very simple and solves my problems:

https://github.com/Clans/FloatingActionButton

Add a dependency on your build.gradle:

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

Add this to the top of your xml:

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

Now just add your buttons, for 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>