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.

Feeder

Multiple FABs displayed side-by-side is a no-no according to Material Design Specs, but an expanding FAB menu with multiple buttons expanding from a main FAB seems to be compliant. – Turbary

Here's how you do it material-ui.com/components/speed-dial – Matrimony

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>

Cosine

It seem that project is currently abandonned – Butterball

Answer 2

The project from the answer is deprecated and is no longer maintained. In such a case, the implementation from this article may help - How to add Extended Floating Action Button in Android | Android Studio | Java

Step 1

Add this implementation to your app/build.gradle:

implementation 'com.google.android.material:material:1.4.0';

Step 2

Define main FAB and actions in your layout xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_200"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginBottom="16dp"
        android:contentDescription="@string/actions"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_500"
        android:layout_marginBottom="8dp"
        app:fabSize="mini"
        app:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@id/fab"
        app:layout_constraintEnd_toEndOf="@id/fab"
        app:srcCompat="@drawable/ic_add"
        android:contentDescription="@string/app_name" />

    <TextView
        android:id="@+id/add_fab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="@string/draw_image"
        app:layout_constraintBottom_toBottomOf="@id/add_fab"
        app:layout_constraintEnd_toStartOf="@id/add_fab"
        app:layout_constraintTop_toTopOf="@id/add_fab" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/select_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_500"
        app:fabSize="mini"
        app:tint="@color/white"
        app:layout_constraintBottom_toTopOf="@id/add_fab"
        app:layout_constraintEnd_toEndOf="@id/add_fab"
        app:layout_constraintStart_toStartOf="@id/add_fab"
        app:srcCompat="@drawable/ic_select"
        android:contentDescription="@string/app_name" />

    <TextView
        android:id="@+id/select_fab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="@string/select_items"
        app:layout_constraintBottom_toBottomOf="@id/select_fab"
        app:layout_constraintEnd_toStartOf="@id/select_fab"
        app:layout_constraintTop_toTopOf="@id/select_fab" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 3

Add some code to control the state of the button:

package com.my.app.activities;

import android.os.Bundle;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.paint.app.R;

import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton menuFab;
    FloatingActionButton addFab;
    FloatingActionButton selectFab;
    FloatingActionButton policyFab;
    FloatingActionButton shareFab;

    TextView addText;
    TextView selectText;
    TextView policyText;
    TextView shareText;

    boolean isOpen = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        menuFab = findViewById(R.id.fab);

        addFab = findViewById(R.id.add_fab);
        addText = findViewById(R.id.add_fab_text);

        selectFab = findViewById(R.id.select_fab);
        selectText = findViewById(R.id.select_fab_text);

        hideActions();

        menuFab.setOnClickListener(view -> {
            if (!isOpen) {
                showActions();
            } else {
                hideActions();
            }
            isOpen = !isOpen;
        });

        addFab.setOnClickListener(onAddClickListener);
        selectFab.setOnClickListener(onSelectClickListener);
    }

    private void showActions() {
        addFab.show();
        selectFab.show();
        addText.setVisibility(View.VISIBLE);
        selectText.setVisibility(View.VISIBLE);
    }

    private void hideActions() {
        addFab.hide();
        selectFab.hide();
        addText.setVisibility(View.GONE);
        selectText.setVisibility(View.GONE);
    }


}

Gamut