[Android] How to build an Android Floating Action Button Menu

Author Avatar
Romain Estievenart @BlenderViking Nov 26, 2016

Hi,

I’m a FullStack Developer (J2EE, JS, SQL), I know Java but not explicitly Android Development guidelines.
So I currently joining the open-source team of NewPipe : A free lightweight Youtube frontend for Android to improve my skills.

During the development of PlayList support on NewPipe a question came to mind :

How to make a correct menu in material design under android ?

I have needing using a new material menu provide by Floating Action Button (like Inbox, Hangout, …) for minSdkVersion=14

How to proceed ?

After some search on internet, I found these stackoverflow thread and it’s list four libs for made the job:

1
2
3
4
Rapid Floating Button (wangjiegulu)
Floating Action Button (Clans)
Floating Action Button (makovkastar)
Android Floating Action Button (futuresimple)

But in the comment one person used Android Floating Action Button (futuresimple) in production to more than 100K users and he never had any issues for the lib, so I choice the same of him.

Adding in the code

Edit the .gradle

You just need to add the Android Floating Action Button lib on your gradle file

1
compile 'com.getbase:floatingactionbutton:1.10.1'

Add on XML files

1. Drawable file

fab_label_background.xml
1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#B2000000"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>

2. Values’s files

colors.xml
1
2
3
<!-- floating actions buttons -->
<color name="black">#000000</color>
<color name="half_black">#808080</color>
styles.xml
1
2
3
4
<style name="menu_labels_style">
    <item name="android:background">@drawable/fab_label_background</item>
    <item name="android:textColor">@color/white</item>
</style>

2. Layout’s files

floating_menu.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:id="@+id/floating_menu_background"
        android:visibility="gone"
        android:background="#55000000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <com.getbase.floatingactionbutton.FloatingActionsMenu xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/multiple_actions_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:layout_anchorGravity="center_vertical|right"
        app:fab_addButtonColorNormal="@color/black"
        app:fab_addButtonColorPressed="@color/half_black"
        app:fab_addButtonPlusIconColor="@color/white"
        app:fab_labelStyle="@style/menu_labels_style"
        app:fab_expandDirection="up"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">
        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_add_to_queue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_icon="@drawable/ic_queue_white_24dp"
            app:fab_colorNormal="@color/black"
            app:fab_title="Add into existing queue"
            app:fab_colorPressed="@color/half_black" />
        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_replace_queue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_icon="@drawable/ic_headset_white_24dp"
            app:fab_colorNormal="@color/black"
            app:fab_title="Listing in background"
            app:fab_colorPressed="@color/half_black" />
    </com.getbase.floatingactionbutton.FloatingActionsMenu>
</RelativeLayout>

Don’t forgive to add on your parent layout the xml inclusion of the new layout :

1
<include layout="@layout/floating_menu" />

Add on Java Activity part

Add the following import

1
2
import com.getbase.floatingactionbutton.FloatingActionButton;
import com.getbase.floatingactionbutton.FloatingActionsMenu;

Add create the method for init the FloatingActionButton menu (call inside your init view)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
private void initFloatingActionButtonMenu() {
    final FloatingActionsMenu floatingActionsMenu = (FloatingActionsMenu) findViewById(R.id.multiple_actions_menu);
    final FloatingActionButton actionAddToQueue = (FloatingActionButton) findViewById(R.id.action_add_to_queue);
    actionAddToQueue.setOnClickListener(new View.OnClickListener() {
            @Override
        public void onClick(View view) {
            floatingActionsMenu.collapse();
        }
    });
    final FloatingActionButton actionAddToQueueAndPlay = (FloatingActionButton) findViewById(R.id.action_replace_queue);
    actionAddToQueueAndPlay.setOnClickListener(new View.OnClickListener() {
            @Override
 
 
        public void onClick(View view) {
            floatingActionsMenu.collapse();
        }
    });
    
    final View backgroundOpac = findViewById(R.id.floating_menu_background);
    backgroundOpac.setOnClickListener(new View.OnClickListener() {
    
    @Override
    
    
        public void onClick(View view) {
            floatingActionsMenu.collapse();
        }
    });
    floatingActionsMenu.setOnFloatingActionsMenuUpdateListener(new FloatingActionsMenu.OnFloatingActionsMenuUpdateListener() {
        @Override
    
    
        public void onMenuExpanded() {
            backgroundOpac.setVisibility(View.VISIBLE);
        }
        @Override
    
    
        public void onMenuCollapsed() {
            backgroundOpac.setVisibility(View.GONE);
        }
    });
}

And it’s work :)

Floating Action Button Menu

PS: If you needing an Android support with minSdkVersion=4 check here.

References

Advertisements

expand_less
Powered by Hexo
Theme - Material