Material Design Series Third--using the Material Theme

Using the Material themethis lesson teaches

1. Customize the Color Palette
2. Customize the Status Bar
3. Theme individual views

You should also read

• Material Design Specification
• Material Design on Android

The new material theme provides:

• System widgets that let you set their color palette
• Touch feedback animations for the system widgets
• Activity transition Animations

You can customize the look of the material theme according to your brand identity with a color palette you control. You can tint the action bar and the status bar using theme attributes, as shown in Figure 3.

The system widgets has a new design and touch feedback animations. You can customize the color palette, the touch feedback animations, and the activity transitions for your app.

The material theme is defined as:

• @android:style/Theme.Material(Dark Version)
• @android:style/Theme.Material.Light(Light version)
• @android:style/Theme.Material.Light.DarkActionBar

For a list of material styles which you can use, see the API reference for R.style .

Figure 1. Dark Material Theme

Figure 2. Light Material Theme

Note: The material theme is a available in Android 5.0 (API level) Andabove. The V7 support Librariesprovide themes with material design styles for some widgets and support for customizing the Colorp Alette. For more information, seemaintaining compatibility.

Customize the Color Palette

To customize the theme ' s base colors to fit your brand, Defineyour custom colors using theme attributes when you inherit F Rom the material theme:

<resources>
<!--inherit from the material theme --
<stylename="Apptheme"Parent="Android:Theme.Material">
<!--Main Theme Colors -
<!--your app branding color for the app bar -
<Item Name="Android:colorprimary">@Color/Primary</Item>
<!--Darker variant for the status bar and contextual app bars -
<Item Name="Android:colorprimarydark">@Color/Primary_dark</Item>
<!--Theme UI controls like Checkboxes and the text fields -
<Item Name="Android:coloraccent">@Color/Accent</Item>
</style>
</resources>

Figure 3. Customizing the material theme.

Customize the Status Bar

The material theme lets you easily customize the status bar so can specify a color that fits your brand and provides Enough contrast to show the white status icons. To set a custom color for the status bar with the android:statusBarColor attribute when extend the material theme. By default, android:statusBarColor inherits the value of android:colorPrimaryDark .

You can also draw behind the status bar yourself. For example, if you want to show the status bar transparently through a photo, with a subtle dark gradient to ensure the Whit E status icons is visible. To does, set the android:statusBarColor attribute to and @android:color/transparent adjust the window flags as required. You can also with the Window.setStatusBarColor() method for animations or fading.

Note: The status bar should almost always has a clear delineation from the primary toolbar, except in cases where you show EDG E-to-edge rich imagery or media content behind these bars and when do a gradient to ensure that the icons is still V Isible.

When you customize the navigation and status bars, either make them both transparent or modify only the status bar. The navigation bar should remain black in all other cases.

Theme individual views

Elements in XML layout definitions can specify android:theme the attribute, which references a theme resource. This attribute modifies the theme for the element and any child elements, which are useful for altering theme color palette s in a specific portion of an interface.

Material Design Series Third--using the Material Theme