Android5. New features of material design in 0

Introduction to material design

Material design is Google's new design language. Google hopes to unify the user experience on various platforms. Material design is characterized by clean typesetting and simple layout to highlight the content.

Material design has made suggestions on typesetting, material, color matching, lighting effect, spacing, text size, interaction mode and animation track to help designers design applications in line with material design style.

The material design language encourages everyone to use vibrant and bright colors. It is recommended to use three colors in the same interface and ensure that there is a strong color. The strong color is generally at the bottom of the view, such as the status bar or actionbar. Through the sharp contrast of strong tones, it is easier to highlight the importance of content. For the value of text color, material design recommends using black on light background and white on dark background. 87% transparency is used for important information and titles, 54% transparency is used for secondary text, and 26% transparency can be used for more secondary explanatory text. Strong tones are recommended for text that you want to highlight or clickable. Different levels of views can be highlighted by shadows. For areas with operations and prominent contents, you can use cardview for isolation, and for areas with less important contents or single operations, you can use split lines for isolation.

Material design needs to be used in recent projects. The following common controls are sorted out for memory.

1、 SnackBar

1. Function: similar to toast, but you can click monitor;

2. Use:

(1) SnackBar calls the static class make(), passing in three parameters: View parent component, text and display time;

(2) SnackBar calls setaction() to pass in two parameters: text, click to listen for events, and implement onclicklistener interface;

(3) Show() and hide dismis();

2、 Textinputlayout

1. Function: wrapped outside EditText, the text can be prompted above EditText, and error prompt can be set at the same time;

2. Use:

(1) Textinputlayout object calls seterroranabler() and passes in a boolean type parameter to indicate whether to display error information;

(2) Textinputlayout object calls seterror() to set error information;

3、 Floatingactionbutton

1. Function: the button suspended at the top of the page;

2. Unique attributes:

App: elevation = "5dp" / / shadow effect app: pressedtranslationz = "10dp" / / display effect when pressing app: ripplecolor = "@ color" / / color

4、 Drawerlayout

1. Function: as a sub layout of the layout, it realizes the side sliding effect on the left and right sides, and is used to add menus;

2. Use: (1) take drawelayout as the root layout, and the interior can contain three or less layouts;

(2) Set Android: layout for the layout as a menu_ Gravity attribute, with the value of "left" on the left and "right" on the right;

(3) Dynamically turn layouts in drawerlayout on or off:

The drawelayout object calls opendraw() and passes in gravity Left or gravity The two parameter values of right open and close the layout;

The drawerlayout object calls closedrawer(), passing in two parameter values to close the layout;

5、 Navigationview

1. Function: added as menu view of navigation bar or menu bar;

2. Use: (1) static attribute: app: headerlayout to add header layout file;

(2) static attribute: app: menu add menu file;

(3) set head view monitoring:

(3-1) get the header view: the navigationview object calls getheaderview(), passing in the index number 0;

Note: if there is no getheaderview(), you can use findviewbyid() to get the header view;

(3-2) find control: the header view calls findviewbyid() to get the control in the header view;

(3-3) set listening event: the obtained control calls setonclicklistener();

(4) set menu button to listen:

The navigationview object calls setnavigationitemselectedlistener(),

Pass in navigationview Onnavigationviewintemselectedlistener interface,

Override onnavigationitemselected() interface;

6、 Tablayout

1. Function: combined with viewpager to achieve linkage navigation effect;

2. Static attributes:

1 app:tabIndicatorColor="@color/colorAccent"

2 app:tabIndicatorHeight="5dp"

3 app:tabSelectedTextColor="@color/colorAccent"

4 app:tabTextColor="#ffffff"

3. Dynamic use:

(1) Declare and instantiate tablayout, viewpager;

(2) Set the adapter for the viewpager control;

(3) Set the linkage between tablayout and viewpager:

(3-1) tablayout object calls setupwithviewpager() to pass in the viewpager object to be linked;

(3-2) in the adapter of custom viewpager, rewrite getpagetitle() to return the current title;

(3-3) the tablayout object calls settabmode() and passes in tablayout MODE_ Scrollable constant, which sets the scrolling of tablayout;

7、 Nestedscrollview

1. Function: replace Scrollview;

2. Usage: the same as Scrollview, there can only be one child control inside;

8、 Toolbar

1. Function:

Note: when using the toolbar, the theme of the activity must be set to the noactionbar property value;

2. Use: the toolbar control must be placed in the appbarlayout control, and the appbarlayout is best placed in the coordinatorlayout control (collaborative layout);

3. Static attributes:

1 app:layout_ Scrollflags = "scroll|enterways" / / in the toolbar control, set the sliding response event;

2 app: title = "/ / set the title name for the toolbar;

3 app:layout_ Behavior = "@ string / appbar_scrolling_view_behavior" / / nestedscrollview control, set the control behavior

4. Dynamic method:

(4-1) declare and instantiate the toolbar control instance;

(4-2) set ActionBar to Toolbar: call setSupportActionBar () in the current Activity, and import the newly created Toolbar object;

(4-3) modify the current activity theme to noactionbar mode: set the property Android: theme = "@ style / theme. Appcompat. Noactionbar" under the current activity tag in the manifest file;

Note: the toolbar will be displayed only when the current activity theme is noactionbar;

9、 Collapsingtoolbar

1. Function: realize the folding effect of toolbar;

2. Use:

Collapsingtoolbar must be placed in appbarlayout,

Appbarlayout is best placed in the coordinatorlayout control of collaborative layout;

The toolbar is used as an unfolding control of collapsingtoolbar;

Note: there must be only two controls under the collapsingtoolbar control;

3. Static attributes:

4. Dynamic setting:

The above is the Android 5 The new features of material design in 0 hope to help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!