Detailed explanation of building material design application for Android

For a long time. Android's UI is not beautiful, so that many IT companies strongly require that the interface style of Android must be consistent with that of IOS in order to ensure the unity of dual platforms when designing the interface. I think it is very unreasonable here. The interface unity between applications in the same operating system is much more important than that of an application on dual platforms, Only in this way can we bring users a better user experience. In order to solve this problem, Google launched a new interface design language - material design (material design language) at the 2014 IO conference. This time, Google has really made great efforts in interface design. One word is good-looking. In addition, a design support library was launched at the 2015 IO conference, which encapsulates some of the most representative controls and effects in material design, so that developers can easily materialize their applications without understanding material design.

1.Toolbar

1. Basic toolbar

The toolbar control is provided by the appcompat-v7 library. You need to add dependencies to use it:

We use the toolbar to replace the actionbar, so we need to specify a theme without an actionbar. There are usually two themes: theme.appcompat.noactionbar (dark) theme or theme.appcompat.light.noactionbar (light) theme.

Theme：

Layout：

Appbarlayout is a vertical LinearLayout. It encapsulates many rolling events internally and applies some design concepts of material design. Appbarlayout solves the problem of toolbar occlusion in FrameLayout.

Activity：

2. Recyclerview scrolls up to hide the toolbar

Add a line of code app: layout to the toolbar_ Scrollflags = "scroll|enteralways|snap".

Layout：

app:layout_ Behavior = "@ string / appbar_scrolling_view_behavior" property ensures that recyclerview blocks the toolbar.

2. Hover button and interactive prompt

1.FloatingActionButton

The floatingactionbutton is provided by the design support library. You need to add dependencies to use it:

Layout：

2.Snackbar

SnackBar is provided by the design support library. The first parameter of snackBar needs to pass in a view, which can be any view of the current interface layout, and then this view will be used to automatically find the outermost layout for displaying snackBar.

Activity：

However, there is a bug. The snackBar and the hover button are used at the same time. When the hover button is in the lower right corner of the interface, the pop-up snackBar will cover the hover button. This user experience is unfriendly. To solve this problem, you can easily solve it with the help of coordinatorlayout.

3.CoordinatorLayout

SnackBar is provided by the design support library. Coordinatorlayout can be said to be an enhanced version of FrameLayout. Coordinatorlayout can listen to various events of all its child controls and automatically help us make the most reasonable response. For example, the snackBar bug mentioned just now can offset snackBar upward with the help of coordinatorlayout, This ensures that it is not obscured by the snackBar.

Layout：

In addition, since coordinatorlayout itself is an enhanced version of FrameLayout, replacing FrameLayout will not have any side effects.

3. Card layout

1.CardView

Cardview control is provided by cardview-v7 library. It is used to realize a three-dimensional card and provides fillet, shadow and other effects. Add dependencies as needed:

Layout：

The effect diagram after operation is as follows:

4. Fully transparent status bar

Android 5.0 and above are required.

5. Material effect dialog

1.AlertDialog

Style effect down compatible with Android 2.1

2.ProgressDialog

Style effect down compatible with Android 5.0

3.ripple_ Drawable resource

"Water ripple" effect launched by Android 5.0:

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.