Android floating menu button example

In android it is very easy to implement normal floating button . If you are having latest appcompat library you just need to add the following code into your layout for displaying a normal floating button.

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

But if you want to implement a floating menu, ie a floating button which displays more buttons while clicking on it, we need use a library. In this tutorial we will see how to implement  a floating menu in android.

First step is to compile the following library in your apps build.gradle file

compile 'net.i2p.android.ext:floatingactionbutton:1.10.1'

Now add the following code to your layout file for displaying floating menu button

<net.i2p.android.ext.floatingactionbutton.FloatingActionsMenu
    android:id="@+id/multiple_actions_down"
    fab:fab_addButtonColorNormal="@color/fab_button"
    fab:fab_addButtonColorPressed="@color/white_pressed"
    fab:fab_addButtonPlusIconColor="@color/white_pressed"
    fab:fab_addButtonSize="normal"
    fab:fab_addButtonStrokeVisible="false"
    fab:fab_expandDirection="down"
    fab:fab_icon="@drawable/ic_add_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true">


    <net.i2p.android.ext.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_call"
        fab:fab_addButtonSize="mini"
        fab:fab_colorNormal="@color/fab_button"
        fab:fab_colorPressed="@color/white_pressed"
        fab:fab_icon="@drawable/ic_call_white_24dp"
        fab:fab_title="Call"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <net.i2p.android.ext.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_message"
        fab:fab_addButtonSize="mini"
        fab:fab_colorNormal="@color/fab_button"
        fab:fab_colorPressed="@color/white_pressed"
        fab:fab_icon="@drawable/ic_email_white_24dp"
        fab:fab_title="Message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <net.i2p.android.ext.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_attach"
        fab:fab_addButtonSize="mini"
        fab:fab_colorNormal="@color/fab_button"
        fab:fab_colorPressed="@color/white_pressed"
        fab:fab_icon="@drawable/ic_attach_file_white_24dp"
        fab:fab_title="Attach"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</net.i2p.android.ext.floatingactionbutton.FloatingActionsMenu>

For giving actions for menu buttons use the below code in your activity java file

FloatingActionButton fab_attach = (FloatingActionButton) findViewById(R.id.fab_attach);
FloatingActionButton fab_message = (FloatingActionButton) findViewById(R.id.fab_message);
FloatingActionButton fab_call = (FloatingActionButton) findViewById(R.id.fab_call);

fab_attach.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Toast.makeText(getApplicationContext(),"clicked attach",Toast.LENGTH_SHORT).show();
    }
});

fab_message.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Toast.makeText(getApplicationContext(),"clicked message",Toast.LENGTH_SHORT).show();
    }
});

fab_call.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Toast.makeText(getApplicationContext(),"clicked call",Toast.LENGTH_SHORT).show();
    }
});

Use the following colors in your colors.xml

<color name="fab_button">#F50057</color>
<color name="white_pressed">#f1f1f1</color>
<color name="black_semi_transparent">#B2000000</color>

Note : The icons used in the above layout can be downloaded from material design icons website of google .

floatingmenu-android
floatingmenu-android

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *