ANDROID l--material Design Details (themes and layouts)

Android L:

Android L may be Android Lollipop or lemon Pie (4.5 or 5.0), because Google has always been named after dessert for its version.

Google has previously launched the Android L Developer preview (Developer Preview) to help developers get to know Android more quickly, and recently launched a 64-bit emulator image. I believe the Android L official version is not far away, so it's time to start learning Android L.

About Android L How to configure the simulator and create a project, if you are interested, you can look at my previous article:

Android l--Simulator configuration and project creation

I'm going to write a series of articles about Android L, so I'll start by introducing the biggest new feature of Android L - Material Design

Material Design contains a lot of content, I roughly divide it into four parts:

Themes and layouts

Views and Shadows

UI controls

Animation

Let's talk about the first part today--material theme and layout

Material Theme

Use the material theme:

The material theme can only be applied to the Android L version.

Applying the Material theme is simple, just modify the res/values/styles.xml file to inherit the android:Theme.Material. As follows:

<!--res/values/styles.xml--><resources> <!--your app ' s theme inherits from the Material theme--& Lt;style name= "Apptheme" parent= "android:Theme.Material" > <!--Theme Customizations--</STYLE></R Esources>

or set the topic directly in androidmanifest.xml :

Android:theme= "@android: Style/theme.material.light"

Custom Material Themes:

The material theme can be defined as follows:

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

For other theme styles you can refer to the API documentation (Android. R.style)

Custom color Keynote (color palette)

Material can customize the base tone of the theme according to the custom branding style, as follows ( see image below ):

<resources>  <!--inherit from the material theme to  <style name= "Apptheme" parent= "Android: Theme.material ">    <!--Main Theme colors   --<!--your app ' s branding color (for the app bar)--> ;    <item name= "Android:colorprimary" > @color/primary</item>    <!--   Darker variant of colorprimary (For status bar, contextual app bars)-    <item name= "Android:colorprimarydark" > @color/primary_dark</ Item>    <!--   theme UI controls like checkboxes and the text fields--and    <item name= "Android: Coloraccent "> @color/accent</item>  </style></resources>

Custom status bar and navigation bar:

Material also allows you to easily customize the color of the status bar and navigation bar.

You can use the following properties ( see picture below ):

Android:statusbarcolor , Window.setstatusbarcolor

Compatibility:

because material Theme can only be in Used in Android L Developer Preview .

So if you're using a lower version, you'll need to set up a different theme for it:

use a set of themes in the old version res/values/styles.xml, use Material theme in new version res/values-v21/ Styles.xml.

Design layouts

An important design concept for Android L is to create a unified style on a variety of platforms.

Before designing themes and layouts, you first need to look at the Material Design Specification article (Google's official article on how to design).

From aniamation, Style, Layout, components, Patterns, usability, Resources and so on, this article introduces in detail how to design the interface correctly.

Layout features Brief description:

I personally understand (very elementary understanding) that the layout of the material design of Android L has the following main points:

Paper Craft(paper craft):

In material 's design , each application draws pixels like it resides on a piece of paper.

The paper has a flat background color and can be resized to suit a variety of purposes. A typical layout is made up of multiple sheets of paper.

Floating Actions

Floating operation, I do not know what is more appropriate translation.

I personally understand it. The main function is a connecting link of the floating button, to undertake two layouts or different functions of the conversion

Z Axis:

The new z-axis concept has been added to the previous x, Y axis in Android l, with the z-axis to make more stereoscopic controls.

To adjust the height of the z-axis according to the button state

by setting a different z-axis for each view in the layout, you can make the layout more stereoscopic and highlight the focus.

Compatibility:

To accommodate the changes in material design, the layout of the Android L version does not work with the old version.

we can use a different file directory to set up two sets of layouts for Android L and lower versions, respectively:

res/layout/ , res/layout-v21/

Summarize:

I divide material design into the following four parts:

Themes and layouts

Views and Shadows

UI controls

Animation

The topic and layout of this article are relatively biased design, and the code relationship is not particularly large. So I am not particularly familiar with this aspect, just to say a bit about my personal understanding.

For details on how the theme and layout of material design should be designed, see the article I mentioned earlier material design specification ( It's really a technology/art, it's too hard to do well ).

The rest of the views and Shadows ,UI controls , animations are closely related to our programmers, and I will update them in succession, so please look forward to ...

ANDROID l--material Design Details (themes and layouts)