Material Design Theme and toolbar explanation

1. Material Design Theme

The themes of Material Design are:

• @android: style/theme.material (Dark Version)

• @android: Style/theme.material.light (Light version)

• @android: Style/theme.material.light.darkactionbar

The corresponding Compat Theme:

• Theme.appcompat

• Theme.AppCompat.Light

• Theme.AppCompat.Light.DarkActionBar

Custom Color Palette

<Resources>    <!--Base application theme. -    <stylename= "Appbasetheme"Parent= "Theme.appcompat">         <!--Customize the color palette -        <Itemname= "Colorprimary">@color/material_blue_500</Item>        <Itemname= "Colorprimarydark">@color/material_blue_700</Item>        <Itemname= "Coloraccent">@color/material_green_a200</Item>    </style></Resources>

• The colorprimary corresponds to the actionbar color.

• The colorprimarydark corresponds to the color of the status bar.

• The coloraccent corresponds to the color of EditText when edited, RadioButton selected, CheckBox, and so on.

2, toolbar explanation

1. Setnavigationicon is the icon that sets the up button, because the Material interface, in Toolbar here the UP button style is different from ActionBar.
2. The Setlogoapp icon.
3. Settitle the main title.
4. Setsubtitle subtitle.
5. Setonmenuitemclicklistener sets the handling events for each button on the Options menu.

Example code:

Toolbar Toolbar =//  App LogoToolbar.setlogo (r.drawable.ic_launcher); // titletoolbar.settitle ("My Title"); // Sub titletoolbar.setsubtitle ("sub title"//  Setnavigationicon to be Setsupoortactionbar after the action //  otherwise will appear back buttonToolbar.setnavigationicon (r.drawable.ab_ Android);

3. Supplemental meterial Design Theme Properties

• Colorprimarydark
  • The background color of the status bar.
  • Set in the properties of the style.
• Textcolorprimary
  • The text color in the title and more options on the APP bar.
  • Set in the properties of the style
• Background color of App bar
  • The background color of the Actionbar is set in the style of the colorprimary.
  • The background color of the Toolbar is set in the properties of the background in its layout.
• Coloraccent
  • Each control element (e.g. check box, switch or radoi) is checked (checked) or selected (selected) color.
  • Set in the properties of the style
• Colorcontrolnormal
  • Preset colors for each control element.
  • Set in the properties of the style
• Windowbackground
  • The background color of the App.
  • Set in the properties of the style
• Navigationbarcolor
  • The background color of the navigation column, but only for versions above the API level (Android 5)
  • Set in the properties of the style

Reference: http://blog.mosil.biz/2014/10/android-toolbar/

2015-06-17

17:22:03

Material Design Theme and toolbar explanation