New characteristics of material design in Android5.0 _android

Introduction to Material Design

Material Design is Google's new language, Google hopes to send this to unify the user experience on a variety of platforms, Material design is characterized by clean typography and simple layout, in order to highlight the content.

Material design has made suggestions on typesetting, material, color, light effect, spacing, text size, interactive mode, and animation trajectory to help designers devise applications that conform to the Material style.

Material Design language encourages you to use vibrant bright colors, and suggests using three tones on the same interface, and protects against a strong hue, which is generally at the bottom of the view, such as the status bar or Actionbar. It is easier to highlight the importance of the content by creating a sharp contrast between strong tones. For text color, the Material design recommends black on a light-colored background and white on a dark background. Important information and headings are 87% transparent, secondary text is 54% transparent, and more minor explanatory text can be 26% transparent. Strong tones are recommended for text that you want to highlight or click. Different levels of view, can be highlighted through the shadow. For areas with operational and content highlighting, you can use CardView for isolation, and for areas where content is less important or a single operation is possible, you can use split lines for isolation.

Recent projects need to use the material design, sorting out the following several commonly used controls, in order to remember.

First, Snackbar

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

2. Use:

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

(2) Snackbar call Setaction (), incoming two parameters: text, click on the Listener event to implement Onclicklistener interface;

(3) Display show () and hidden Dismiss ();

Second, textinputlayout

1. Function: Wrapped in edittext outside, you can put the text above the EDITTEXT hint, at the same time you can set error prompts;

2. Use:

(1) The Textinputlayout object invokes Seterrorenable (), passing in the Boolean type parameter to indicate whether an error message is displayed;

(2) Textinputlayout object call SetError (), set error message;

Third, Floationgactionbutton

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

2. Unique properties:

app:elevation= "5DP"//Shadow Effect
app:pressedtranslationz= "10DP"//press time display effect
App:ripplecolor= "@color"//Color

Four, Drawerlayout

1. Function: As the layout of the sub-layout, to achieve the left and right side of the sideslip effect, to add a menu;

2. Use: (1) to drawelayout as the root layout, the interior can contain three and three of the following layout;

(2) Set the Android:layout_gravity property for the layout of the menu, display the value "left" on the left-hand side, and display the value "right" on the right-hand side;

(3) dynamically turn on or off the layout in Drawerlayout:

The Drawelayout object invokes Opendrawer (), passing in Gravity.left or gravity.right two parameter values to turn off the layout;

Drawerlayout object calls Closedrawer (), passing in two parameter values to close the layout;

Five, Navigationview

1. Function: Add as a navigation bar or menu bar view;

2. Use: (1) static properties: App:headerlayout Add header layout file;

(2) Static property: App:menu add menu file;

(3) Set Head View Monitor:

(3-1) View: Navigationview object Call Getheaderview (), incoming index number 0;

Note: If there is no Getheaderview (), you can use Findviewbyid () to get the header view;

(3-2) Find the control: Head View Call Findviewbyid () to get the control in the head view;

(3-3) Set the Listener event: The resulting control calls Setonclicklistener ();

(4) Set menu button to monitor:

Navigationview object calls Setnavigationitemselectedlistener (),

Incoming Navigationview. Onnavigationviewintemselectedlistener interface,

Rewrite the onnavigationitemselected () interface;

VI. tablayout

1. Function: Combine with Viewpager to achieve the effect of linkage navigation;

2. Static properties:

1 app:tabindicatorcolor= "@color/coloraccent"

2 app:tabindicatorheight= "5DP"

3 app:tabselectedtextcolor= "@color/coloraccent"

4 app:tabtextcolor= "#ffffff"

3. Dynamic use:

(1) declaring and instantiating Tablayout,viewpager;

(2) Setting the adapter for the Viewpager control;

(3) Set up the linkage between Tablayout and Viewpager:

(3-1) Tablayout object calls Setupwithviewpager () to the Viewpager object to be linked;

(3-2) in a custom Viewpager adapter, rewrite Getpagetitle () to return the current caption;

(3-3) The Tablayout object invokes the Settabmode (), passes in the tablayout.mode_scrollable constant, and sets the tablayout scrolling;

Seven, Nestedscrollview

1. function: replace ScrollView;

2. Use: The same as ScrollView, the interior can only have a child control;

Eight, Toolbar

2. Use:

Note: The subject of the activity must be set to the Noactionbar property value when using toolbar;

2. Use: The toolbar control must be placed in the Appbarlayout control, while the appbarlayout is best placed in the Coordinatorlayout control (collaborative layout);

3. Static properties:

1 app:layout_scrollflags= "Scroll|enteralways"//toolbar control, set sliding response event;

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

3 app:layout_behavior= "@string/appbar_scrolling_view_behavior"//nestedscrollview control, set control behavior

4. Dynamic Method:

(4-1) Declaring and instantiating an instance of the toolbar control;

(4-2) Set the Actionbar to toolbar: Call Setsupportactionbar () in the current activity, and pass in the newly created toolbar object;

(4-3) The current activity theme is modified to Noactionbar mode: Set the properties under the Current Activity tab in the manifest file android:theme= "@style/theme.appcompat.noactionbar";

Note: toolbar is displayed only if the current activity theme is Noactionbar;

Nine, Collapsingtoolbar

1. Function: Realize the folding effect of toolbar;

2. Use:

Collapsingtoolbar must be placed in the Appbarlayout,

The appbarlayout is best placed in the collaborative layout coordinatorlayout control;

The toolbar is used as the collapsingtoolbar of the folding control;

Note: There must be only two controls under the Collapsingtoolbar control;

3. Static properties:

App:title= "title"//Set header content
app:layout_scrollflags= "scroll|exituntilcollapsed"//Set scrolling tag
app: expandedtitlegravity= "Right|bottom"//Set title position
app:expandedtitlemarginbottom= "@dimen/activity_vertical_margin "///Set the distance of the title to the
bottom app:expandedtitlemarginend=" @dimen/activity_horizontal_margin "//Set the distance from the base of the title
app: Contentscrim= "#00ff00"//Set the color of the control above the fold//
Note: The bottom two properties must be set;
app:layout_collapsemode= "parallax"//in the child controls that it needs to be collapsed ;
app:layout_collapsemode= "pin"://In the child controls that need to be left;

4. Dynamic settings:

(1) Set the expanded state of the title color
collapsingtoolbarlayout.setexpandedtitlecolor (color.white);
(2) to set the title color
collapsingtoolbarlayout.setcollapsedtitletextcolor (color.blue) after folding;

The above is a small set to introduce the new characteristics of the Android5.0 in material design, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!