Android 5.0 (API level 21) is available Material Design . Many new Material controls have been added. I want to share my experience with you through my own study.

This is the first article on Material Design controls, so let's talk about how to use the Design Support Library provided by Google.

Adding dependencies:

Reference to the official [Design Support Library] Description. Add dependencies to the build.gradle file of the project to support library design.

compile 'com.android.support:design:25.4.0'

Note that the minimum version supported by the support library is Android 2.1 (API level 7).

Snackbar

SnackBar provides lightweight feedback for an operation by presenting concise information at the bottom. It can also include an operation in Snackbar. At the same time, only one Snackbar can be displayed. Its display relies on a parent container, which is the biggest difference between Toast and application display. The difference is that his first parameter is not Context, but is passed into the parent container on which it depends, which is, of course, more powerful than Toast.

The following is SnackBar's official description:

You can use a Snackbar to display a brief message to the user. The message automatically goes away after a short period. A Snackbar is ideal for brief messages that the user doesn't necessarily need to act on. For example, an email app could use a Snackbar to tell the user that the app successfully sent an email.

Be careful:

Make sure to set an android:id tag for your CoordinatorLayout. You need the layout's ID when you display the message.

If you want to create a SnackBar, you'd better set an ID for Coordinator Layout. Why? The following will be mentioned.

Next, look at the Demo of a SnackBar.

Create a SnackBar

Usage is super simple:

Snackbar.make(mCoordinatorLayout, "Hello,SnackBar!!", Snackbar.LENGTH_SHORT).setAction("Point me", new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          Toast.makeText(SnackBarSampleActivity.this, "I can also respond to events.~", Toast.LENGTH_SHORT).show();

      }
}).setActionTextColor(Color.RED).show();

• The make() function has three parameters:

  Container: As mentioned above, you need to pass Snakebar a parent container.
  text: text displayed on Snackbar can be either a string resource ID or a string.
  Duration: The duration of message display.

• setAction() adds an action to the right area of Snackbar.

• The show() function displays the constructed Snackbar to the user.

First look at the effect:

Look again at the addition of action events

Officials recommend using Coordinator Layout as its parent container for better display. Coordinator Layout will be detailed in subsequent articles. It has the following effects:

• Users can slide SnackBar to the left.
• If we use Floating Action Button, when SnackBar appears, Coordinator Layout will float Floating Action Button up according to the settings, instead of overwriting it.

Xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/clRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:background="@android:color/holo_orange_light"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        app:layout_anchor="@id/rv"
        app:layout_anchorGravity="bottom|right"
        app:layout_behavior="com.smartni.userinterface.sample.FloatingActionButton.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>

Coordinator Layout can cooperate with Floating Action Button to achieve floating effect, layout_anchor is used to specify the reference, and layout_anchorGravity is used to specify the position relative to the reference. bottom|right|end is the lower right relative to the reference. The layout_behavior goes into detail when it comes to Coordinator Layout.

Here, app:layout_anchor="@id/rvContent" associates Floating Action Button with RecyclerView, and when SnackBar appears, Coordinator Layout layouts regularly coordinate their relationships. This example is to float the Floating Action Button.

Thank you for reading. I will study harder and sum up more. )