The Material Design introduction

Since Android5.0, Google has provided a set of UI design specifications, and according to this design, the app will not be ugly. There are many useful and good-looking controls in MD.

The Z axis

You know the Android coordinate system looks like this, but then Google came up with the z-axis. (In the previous event distribution, the Z-axis is not set. When events are distributed, they are distributed in XML order.)

The calculation formula of Z value is: Z = elevation + translationZ

Elevation: Static component (set in XML) Translation: Dynamic component for animation (set in Java code)

So with a RelativeLayout layout, the lower layer should override the upper layer.

But if you give the top a z-height, the top overrides the bottom

Elevation map

This is the control in the picture, and it looks good when you use this altitude.

Useful controls

Toolbar

ViewGroup, so you can write your own Title.

Specific attributes:

FloatingActionButton

Hover Button

Specific attributes:

Snackbar

Popover, between Toast < Snackbar < dialog

Use:

BottomAppBar

The bottom navigation bar CoordinatorLayout wrapped around the BottomAppBar+FloatingActionButton provides such a bottom navigation bar without having to write it yourself

DrawerLayout

The left and right pull frames

I’m going to use this wrapper for the outermost layer, and then I’m going to write the body in front, and the left and right sides behind the pull box



Click on the event

CardView

Card layout

Chip

In this way, you don’t have to write your own rounded TextView, button click effect, and small pictures and so on

MaterialButton

Nice Button

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar

A lot of apps (B station), this is going to pull down and expand, and then pull up and shrink to a Title effect.

Use the code

AppBarLayout below the first child View must be set app: layout_scrollFlags = “scroll | exitUntilCollapsed | snap” or cannot linkage of sliding.

Pay attention to the point

It will be available after Android 5.0.

In order to use the CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar, you need to set the topic to NoActionBar

The main ones are: these two attributes

Other controls. There are a lot need to use the Theme MaterialComponents. Light. DarkActionBar this subject