How to create a submenu for Floating Action Button in Android Material Design?

Question

I want to create a submenu after click in my floating action button like this :

I already know this Library :

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

But I want to create this with the native FAB of android support design :

compile 'com.android.support:design:23.+'

and

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@drawable/ic_add" />

Solution

It is not possible directly. android.support.design.widget.FloatingActionButton is a subclass of ImageView and it can't host children. You have to implement your own ViewGroup (a Vertical LinearLayout should be enough) and put the FloatingActionButton into it

Comments

[lopez.mikhael]

Thanks. Do you know a library with the implemation of that ? The other view in your ViewGroup is also a FAB ? Because I think, I show in android developer webside that it's not a good practice to add multiple FAB in your view.

[Blackbelt]

on github you can find couple of them. Here an example. The material design guidelines state that you need this "View Group" if you have between 3 and 6 different actions. I'll try to look it up the page for you

[Blackbelt]

Have a look here

[Sagar Devanga]

In general scenario when there is only a FAB the snackbar automatically pushes the FAB and later its re-adjusted but when you use a FAB inside the linearLayout the snackbar overlaps the FAB. Did anyone face this issue ?