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:
- support
conventional
andmini
Two 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