Use Material Design to create an App translation series-Using Material Theme and materialapp

Use Material Design to create an App translation series-Using Material Theme and materialapp

In the previous article, we used Material Design to create an App translation series-start learning and go to the topic:

The new material topic provides the following content:
1. Provides system part components that allow you to set the color palette.
2. Touch feedback animations are provided for these system components.
3. Transition animation of the Activity.

Based on your brand logo, you can use the color palette you control to customize the appearance of the material topic. You can use the topic attributes to color ActionBar and status bar.

New Design and touch feedback animations are available for system components. You can customize the color palette, touch feedback animation, and transition animation between activities for your applications.

The following describes how to define a topic:
1. @ android: style/Theme. Material (dark version)
2. @ android: style/Theme. Material. Light (light version)
3. @ android: style/Theme. Material. Light. DarkActionBar
You can use the above material theme styles, which can be referenced in R. style.

Dark material theme

Light material theme

Notes: This topic can only be used in Android 5.0 and later versions. The V7 support Library provides components with themes for Material Design Styles and supports custom color palette. For details, see: ensure compatibility

Custom color palette

To customize the Basic Color of the theme that suits your brand, you can use the theme attribute to define your custom color when inheriting the theme of the material:

<resources>  <!-- inherit from the material theme -->  <style name="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 text fields -->    <item name="android:colorAccent">@color/accent</item>  </style></resources>

Custom Status Bar

The material topic can easily customize the status bar, so you can specify a color suitable for your brand, making the white status bar icon more effective. If you want to customize the color of the status bar on the premise that you inherit the material topic, you can use the android: statusBarColor attribute. By default, the attribute values of android: statusBarColor are inherited from android: colorPrimaryDark.

You can also draw the content behind the status bar. For example, if you want to display a photo under a transparent status bar, you need to use a slightly lighter dark transition color to ensure that the white status bar icon is visible. Set the attribute value of android: statusBarColor to @ android: color/transparent and adjust windowFlags as needed. You can also use Window. setStatusBarColor () for animation or hide.

Note:The status bar and the main toolbar should be clearly defined. In addition to displaying images or multimedia-related content after the status bar, use gradient to ensure that the icons of the status bar are still visible.
When customizing the navigation bar and status bar, you can modify or adjust the transparency of the status bar only. In other cases, the navigation bar is black.

Add a topic for an individual view Control

The android: theme attribute must be specified for the control defined in the xml layout to reference the topic resource. This attribute modifies the subject of the element and child element to change the color palette of the topic in a part of a specified interface.

The external links in the above translation content will be gradually translated later. Currently, the link is an official website. If you need to view friends, please go over the wall first.