Android Design Support Library Expandable Floating Action Button(Fab) Menu

How to Transform floating-action-button into a menu with the related actions

There is a native Floating Action Button in android, but there is no code available right now to make it expand to sub-buttons/actions. You can either simulate that effect by adding multiple FABs on your layout, one on top of the other, and when you click the one on top you animate the rest to expand by changing their screen coordinates:

Here is a simple layout for the FABs:

<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/fab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/fab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/fab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="text"/>

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/fab2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"

                    app:fabSize="mini"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:gravity="center_vertical">

                <android.support.design.widget.FloatingActionButton
                    android:id="@+id/topFab"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end|bottom"
                    android:layout_margin="16dp"
                    android:src="@drawable/ic_action_download"
                    app:backgroundTint="@color/white"
                    app:borderWidth="4dp"
                    app:elevation="12dp"
                    app:rippleColor="@color/download_in_progress"/>
            </LinearLayout>
        </FrameLayout>

and then:

//to expand the buttons:
topFab.animate().rotationBy(180);
fab2.animate().translationY(-150);
fab3.animate().translationY(-300);
fab4.animate().translationY(-450);

//to collapse them:
topFab.animate().rotationBy(-180);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
fab4.animate().translationY(0);

You can also toggle their visibility to get rid of any visual lag when animating them.

Alternatively, you can use a library that does that for you. An example would be Clans/FloatingActionButton

Is there a library for Floating Action Buttons (FAB) with Labels?

This feature request ended up being implemented in https://github.com/futuresimple/android-floating-action-button. This includes labels on both the left and right sides.

If you're interested, see the discussion here: https://github.com/futuresimple/android-floating-action-button/issues/22#issuecomment-66155108

Disclaimer: I haven't used this (yet).

I'd recommend this library over others that I've seen.

Floating Action Menu in Horizontal Direction

Try using this Library

it has a horizontal orientation for floating action menu.

in Gradle:

compile 'it.sephiroth.android.library.floatingmenu:floatingmenu:1.0.1'

in code:

 FloatingActionMenu mFloatingMenu = new FloatingActionMenu
            .Builder(this)
            .addItem(item1)
            .withScrollDelegate(new FloatingActionMenu.AbsListViewScrollDelegate(mListView))
            .withThreshold(R.dimen.float_action_threshold)
            .withGap(R.dimen.float_action_item_gap)
            .withHorizontalPadding(R.dimen.float_action_h_padding)
            .withVerticalPadding(R.dimen.float_action_v_padding)
            .withGravity(FloatingActionMenu.Gravity.CENTER_HORIZONTAL | FloatingActionMenu.Gravity.BOTTOM)
            .withDirection(FloatingActionMenu.Direction.Horizontal)
            .animationDuration(300)
            .animationInterpolator(new OvershootInterpolator())
            .visible(visible)
            .build();

    mFloatingMenu.setOnItemClickListener(this);

this is the orientation line:

.withDirection(FloatingActionMenu.Direction.Horizontal)

or:

.withDirection(FloatingActionMenu.Direction.Vertical)

This is another library which can be used:

https://github.com/futuresimple/android-floating-action-button

---

Related Topics