This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

In the Material Design specification, there are some basic guidelines for controls. Let’s look at the controls in Material Design.

Buttons are made up of text or ICONS, but their purpose is the same: to connect and create a transition effect that clearly expresses the relationship between the content and the display. Main control types:

  • Floating Action button, a circular button that causes ink diffusion when clicked.
  • Raised button, a common square paper button that causes ink diffusion when clicked.
  • The difference between a Flat button, where ink spreads when pressed, and a floating button, is that it does not float.

Let’s take a look at some examples:

Floating Action button:

Raised button:

Flat button:

Features: (1) Suspension response button Suspension response button is a special type of promoting action. Is a circular button that floats above the interface and has a series of special actions, usually associated with transformation, launch, and its own transformation anchor. The hover response button comes in two sizes: default and mini. The mini size is only used to create visual continuity with other elements on the screen. (2) Float buttons Float buttons make buttons more visible in crowded interfaces. Can bring a sense of hierarchy to most flat layouts. (3), flat button flat button is generally used in dialog box or toolbar, can avoid too much meaningless layer on the page.

##### Tips: The button type should be selected based on the main button, the number of containers on the screen, and the overall layout.

First, take a look at your button functionality: is it important enough to use a hover response button?

You then choose to use a floating or flat button based on the container in which the button is placed and the number of layers stacked on the screen. Too much overlap should also be avoided.

Finally, check your layout. A container should use only one type of button. Use a mix of buttons only in special cases (such as when you need to emphasize a floating effect).

##### Button type features (1) flat buttons are used as the main button type in the dialog box to avoid excessive layer stacking. (2) Choose to use flat buttons or floating buttons depending on the specific layout. For flat buttons, there should be enough space around the inside (inside margin) to make the button visible. (3) If you need a function button that is continuously visible to the user, you should first consider using the hover response button. If you need a button that is not primary but can be quickly located, you can use the bottom fixed button.

Let’s take a look at how Material Design’s new FloatingActionButton can be used in real development.

Control package and environment configuration: Add dependencies in Gradle

The compile 'com. Android. Support: design: 22.2.0'Copy the code

Package path:

android.support.design.widget.FloatingActionButton

FloatingActionButton (FloatingActionButton)

	public class FloatingActionButton extends ImageView
Copy the code

It turns out that it’s an ImageView, so we can use it as an ImageView.

The use of FloatingActionButton

1. Create a new project, in the XML layout file:

	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:fitsSystemWindows="true">
	    <android.support.design.widget.FloatingActionButton
	        android:id="@+id/fab"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:layout_alignParentBottom="true"
	        android:layout_alignParentRight="true"
	        android:layout_margin="@dimen/fab_margin"
	        android:src="@android:drawable/ic_input_add" />
	</RelativeLayout>
Copy the code

2, the use is very simple, we look at the effect:

(1) Simulator of Api16:

(2) Simulator of Api17:

We found that it was normal on the simulator of Api17. The reason is we didn’t set the app:borderWidth property, just set it.

3, FloatingButton custom attributes:

  • App :backgroundTint – Set the FAB background color.
  • App :rippleColor – Sets the background color when FAB is clicked.
  • App :borderWidth – This property is particularly important, if 0DP is not set, FAB will be shown as square on SDK 4.1 and will not be shaded on SDK 5.0 or later. So set it to borderWidth=”0dp”.
  • App :elevation – The FAB shadow size by default.
  • App :pressedTranslationZ – FAB shadow size when clicked.
  • App :fabSize – Sets the FAB size. This property has two values: Normal and mini. The corresponding FAB size is 56DP and 40DP respectively.
  • SRC – set the FAB icon. Google recommends that the size of the FAB icon be 24dp.
  • App :layout_anchor – Sets the FAB anchor point, that is, which control is used as the reference point to set the position.
  • App :layout_anchorGravity – Sets the FAB position relative to the anchor point, including bottom, center, right, left, top, etc.

In addition, don’t forget to add namespaces when using app custom properties.

xmlns:app="http://schemas.android.com/apk/res-auto"
Copy the code

At this point, FloatingActionButton is basically introduced.