Material Design - Interactive effect of FloatingActionMenu

Since Google launched the Material Design specification, now more and more App designs refer to it. FAB(Floating Action Button) in Material Design must have been used by everyone, so, FloatingActionMenu? In this article we take a look at FloatingActionMenu and its use.

1.What is a FAB(Floating Action Button)?

A Floating Action Button (FAB) sits on top of the current screen and is used to perform the most common or important actions. Its UI takes the form of a circular container with an icon in the center of the circle.

1: round container 2: Icon

FAB has two sizes, standard and Mini. According to the Material Design standard, the corresponding sizes of the two sizes are as follows:

1. Standard (56 x 56DP) 2. Mini (40 x 40DP) :

FAB can either trigger actions on the current interface or perform an action to create a new interface, such as create, edit, favorites, share, refresh, etc.

2,The role of FloatingActionMenu

Sometimes FAB doesn’t meet your needs, such as when you have two or three key actions and want to use a Floating Action Button. This is where FloatingActionMenu comes in.

FloatingActionMenu: When clicked on FAB, FAB emits 3 to 6 menus for related operations. If there are more than 6 menus or less, FAB is no longer a good implementation.

Recommended FAB scenarios (2-6) :

Not recommended (less than two operations or more than six operations) :

3,FloatingActionMenu implementation

Unfortunately, while Material Design provides a Design specification for FloatingActionMenu, Google does not provide an official FAM control. So what do you do if you want to use it? The answer is: make it happen. See here, probably you want to scold, this is not nonsense.

Don’t panic, SAO years, there is already a relatively powerful tripartite implementation library, completely follow the Material Design Design, equivalent to the official control.

1, the android – floating – action – button

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

Android-floating-action-button is a FloatingActionnu implementation based on the MD specification, with the following features:

supportconventionalandminiTwo kinds of size

Custom Button normal, pressing state background color and Icon

You can add menus in XML or in code
There are 2 states in expansion/collapse

You can choose whether to display labels at the same time
You can pop up menus in four directions: up, down, left and right.

use

dependencies {
    compile 'com. Getbase: floatingactionbutton: 1.10.1'
}
Copy the code

If you want to add FloatingActionButon directly to the XML, write it in the FloatingActionsMenu tag. FloatingActionsMenu is a custom container that inherits from ViewGroup.

The following is used in XML:

    <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_a"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:id="@+id/action_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action with a very long name that won\'t fit on the screen"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>
Copy the code

Use the following in the code:

       <com.getbase.floatingactionbutton.FloatingActionsMenu
                android:id="@+id/menu_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:fab_addButtonColorNormal="@color/white"
                app:fab_addButtonColorPressed="#f1f1f1"
                app:fab_addButtonPlusIconColor="@color/sport_start_color"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="15dp"
                android:layout_centerVertical="true"
                app:fab_addButtonSize="mini"
                android:visibility="visible"
                app:fab_labelStyle="@style/menu_labels_style"
                app:fab_expandDirection="down"
                app:fab_labelsPosition="left">

            </com.getbase.floatingactionbutton.FloatingActionsMenu>
Copy the code

After retrieving FloatingActionsMenu with findViewById(), call the addButton method directly.

FloatingActionButton buttonBW = new FloatingActionButton(context);
buttonBW.setTitle(context.getResources().getString(R.string.tab_blood_weight));
buttonBW.setIcon(R.drawable.floating_action_weight_icon);
buttonBW.setSize(FloatingActionButton.SIZE_MINI);
buttonBW.setColorNormal(context.getResources().getColor(R.color.white));    buttonBW.setColorPressed(context.getResources().getColor(R.color.white));
buttonBW.setTag(TAG_BW);
        
// Add Button to FloatingActionMenu
mActionsMenu.addButton(button);
Copy the code

Expansion or collapse can be controlled in the code:

 if(mActionsMenu ! =null && mActionsMenu.isExpanded()) {
    mActionsMenu.collapse();
 }
Copy the code

Effect drawing of project use:

Conclusion: Android-floating-action-button can cover 90% of the material design requirements, but if the designer is a bit weird and wants to change the size, shadow, etc., Then you need to download the source code and change it according to your own needs. For example, in a real project you would need to change the color of + in the code and modify the source code yourself:

 /** * set the color of + ** in the code@param color
     */
    public void setButtonPlusColor(@ColorInt int color) {
        mAddButtonPlusColor = color;
        if(mAddButton ! =null) {
            //removeButton(mAddButton);
            mAddButton.setPlusColor(color);
        } else{ createAddButton(getContext()); invalidate(); }}Copy the code

2. Open source library FloatingActionButton

Github:https://github.com/Clans/FloatingActionButton

This library is a modification of the android-floating-action-button library, adding some more powerful and useful features.

Features:

Click above Android 5.0 to create a ripple effect
You can choose to customize normal/ Pressed/Ripple colors
You can optionally set the FAB shadow and the size of the shadow
You can choose to unshadow labels and buttons
You can customize the animation
You can customize ICONS
Buttons support 56DP standard size and 40DP mini size
You can customize FloatingActionMenu Icon animation
Menus can be top to bottom or bottom to top
Labels can be displayed on the left or right side
You can display progress for the FloactinActionButton
You can add a button to FloatingActionMenu in your code

use

dependencies {
    compile 'com. Making. Clans: overall: 1.6.4'
}
Copy the code

Add:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/ic_menu"
        fab:fab_colorNormal="@color/app_primary"
        fab:fab_colorPressed="@color/app_primary_pressed"
        fab:fab_colorRipple="@color/app_ripple"/>

</FrameLayout>
Copy the code

Some custom properties of FloatingActionMenu:

<com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="# 66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="#DA4336"
        fab:menu_colorPressed="#E75043"
        fab:menu_colorRipple="#99FFFFFF"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/fab_add"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="# 333333"
        fab:menu_labels_colorPressed="# 444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        fab:menu_labels_maxLines="1"
        fab:menu_labels_style="@style/YourCustomLabelsStyle"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="your_label_here"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/menu_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_star"
            fab:fab_size="mini"
            fab:fab_label="Menu item 1" />

    </com.github.clans.fab.FloatingActionMenu>
Copy the code

Effect:

3, summarize

Both libraries are excellent, follow Material Design specifications, have cool animations and are easy to use. FloatingActionButton is a more powerful extension of Android-Floating-Action-Button, but the implementation is a bit more complex. If you need to modify the source code yourself, the Android-floating-action-button is a bit better, with simpler logic. Choose which one you need to use based on your needs.

Material Design series:

Summary of Material Design’s Toolbar development practices

AppbarLayout development practice summary of Material Design

The use of Material Design Behavior and custom Behavior Material Design TabLayout use

TextInputLayout and TextInputEditText for Material Design

CardView, FAB and Snackbar from the Material Design series

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Material Design – Interactive effect of FloatingActionMenu

1.What is a FAB(Floating Action Button)?

2,The role of FloatingActionMenu

3,FloatingActionMenu implementation

3, summarize

Material Design – Interactive effect of FloatingActionMenu

1.What is a FAB(Floating Action Button)?

2,The role of FloatingActionMenu

3,FloatingActionMenu implementation

3, summarize

Related Posts

Custom Gradle plugin, how to hook system task and bytecode

Activity Result API learning

Android Studio 3.6 has been released