Skip to content

FloatingActionMenu

Jump to bottom
TR4Android edited this page Aug 4, 2016 · 3 revisions

This wiki hightlights the setup needed for using the FloatingActionMenu and the customization options available. It is designed as a step by step guide with simple instructions. Here are a few reasons for switching to this implementation:

  • Uses the AppCompat Design Library FloatingActionButton and thus has native elevation on Lollipop and above devices and even a shadow animation on pre-Lollipop devices!
  • Allows easy configuration of you main FloatingActionButton's icon animation: apply any rotation and optionally an alpha transition to a second icon (see Google's Inbox).
  • Works on all devices back to API level 7 just like the AppCompat Design Library!

Ready? Then let's dive in deeper.

1. A few important notes

Unlike other implementations out there this one doesn't automatically create the main button for you, instead it will assume that the first button in your layout is the main button. Don't panic though: this is a bonus for you! You can do with your main button whatever you want to. And the library still provides a basic setup for the main button.

Also, credits go to Jerzy Chalupski whose FloatingActionMenu I used as a base for developement. I have changed a lot though to support additional animations and the FloatingActionButton from the AppCompat Design Library.

2. Setup your layout

The setup of the layout is actually quite straightforward. A sample FloatingActionMenu might look something like this (this one is setup with an inbox-like icon animation and labels):

<com.tr4android.support.extension.widget.FloatingActionMenu
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    app:fabMenuCloseIconAngle="135"
    app:fabMenuCloseIconSrc="@drawable/ic_edit_white_24dp"
    app:fabMenuLabelStyle="@style/label_style_dark">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add_white_24dp" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/fam_document"
        android:src="@drawable/ic_insert_drive_file_white_24dp"
        app:backgroundTint="@color/material_blue"
        app:fabSize="mini" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/fam_spreadsheet"
        android:src="@drawable/ic_grid_on_white_24dp"
        app:backgroundTint="@color/material_green"
        app:fabSize="mini" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/fam_presentation"
        android:src="@drawable/ic_insert_chart_white_24dp"
        app:backgroundTint="@color/material_yellow"
        app:fabSize="mini" />
</com.tr4android.support.extension.widget.FloatingActionMenu>

As you can see there are quite a few customization options available that allow easy adaption of the FloatingActionMenu to your specific situation. Here's a complete list:

  • app:fabMenuExpandDirection: The direction in which the FloatingActionMenu should expand. Must be one of either up, down, left or right. Defaults to up.
  • app:fabMenuLabelPosition: The position of the labels, if enabled. Labels are currently only available when the app:fabMenuExpandDirection is up or down. Must be one of either left or right. Defaults to left.
  • app:fabMenuLabelStyle: The style to apply to the labels. Setting a style also automatically enables the labels. There are two default styles shipped with this library (label_style_dark and label_style_light), but you can also use any other custom style. Defaults to 0 (no style set).
  • app:fabMenuCloseIconAngle: The angle of rotation to apply to the main button's icon when the FloatingActionMenu is in expanded state. For simplicity the collapsed state rotation is considered to be 0. Defaults to 0 (no rotation).
  • app:fabMenuCloseIconSrc: Optional drawable for the main button's icon when the FloatingActionMenu is in expanded state. This applies an alpha transition in addition to the rotation to create a customizable inbox-like effect. Defaults to null (no additional drawable).

If you have labels enabled by setting the app:fabMenuLabelStyle attribute you'll also have to make sure to set the android:contentDescription attribute of all your child FloatingActionButtons (excluding the main button) to their proper values as they will be used for the label text. That's it!

3. Style your labels

Starting with version 0.4.0 of the library there are additional options available for styling the labels. If you're happy with one of the default styles (label_style_dark or label_style_light) skip this section, otherwise read on.

First off, you'll need to add a new style to your styles.xml file (the attributes of the label style are pretty much self-explanatory):

<style name="label_style">
    <item name="android:textColor">#ffffff</item>
    <item name="labelBackgroundColor">#2196f3</item>
    <item name="labelRippleColor">#1976d2</item>
    <item name="labelCornerRadius">2dp</item>
    <item name="labelElevation">6dp</item>
    <item name="labelPaddingHorizontal">16dp</item>
    <item name="labelPaddingVertical">4dp</item>
</style>

Then you'll need to apply your custom label style by using app:fabMenulabelStyle="@style/label_style" on your FloatingActionMenu (see 2. Setup your layout above). That's all you need to do to have full control over the look and feel of the FloatingActionMenu labels.

4. Setup background dimming

If you want the FloatingActionMenu to handle background dimming for you, you'll have to include a View in your layout for this:

<...Layout>
    <!-- your content -->
    <View
        android:id="@+id/dimming_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- the floating action menu -->
</...Layout>

Make sure that this view gets declared after the main content, but before the FloatingActionMenu. Check the activity_sample.xml if you're unsure where to place it. After that the only thing left to do, is to setup your FloatingActionMenu with this View in the onCreate() method of your activity:

FloatingActionMenu floatingActionMenu = (FloatingActionMenu) findViewById(R.id.fab_menu);
floatingActionMenu.setupWithDimmingView(findViewById(R.id.dimming_view), Color.parseColor("#99000000"));

5. Enjoy

Congrats! You've made it through the setup. If you have any issues, bugs or feature requests please open a new issue.

Clone this wiki locally