Looking Good with Material Design
In Chapter: Designing a successful Application
Author: Ian Darwin ('idarwin')
Material Design is Android's new visual paradigm for application development, or as they put it "a comprehensive guide for visual, motion, and interaction design across platforms and devices". Material Design looks way different from previous Android versions. You need to make your apps look great using this set of visual approaches.
The main steps you need to implement in creating or updating an app for Material Design include the following:
- Read the official "material design specification".
- Apply the material theme to your app.
- Create or update your layouts following material design guidelines.
- Add elevation to your View objects, causing them to cast shadows.
- Consider using new features, such as card widgets, and new versions of widgets such as the RecyclerVIew in place of the older ListView.
- Add or Customize animations in your app.
- And do all this while maintaining backward compatibility!
Material Design is a new design approach introduced by Google in Android 5. It is also used in Google web applications, supported by a web toolkit called Material-Lite. The name comes from the analogy with physical material, e.g., either "physical stuff" or "fabric". Material design is a largely-two-dimensional framework, but that objects (such as View objects in Android) have elevation, which causes them to cast shadows (drop shadow effects have been with us for decades, but this formalizes them a bit), and can be animated on entry, activation, or exit.
The basic step in using a Material theme is to base your application's theme on Material rather than the older Holo-based themes. You will typically tailor the colors used in your theme. For example, in the AndroidManifest file, you might have:
AndroidManifest.xml Excerpt for Theme
You would then have a styles.xml file defining AppTheme, based on android:Theme.Material, as follows:
These colors must be defined in an XML file. We'll choose colors from the palettes listed at https://www.google.com/design/spec/style/color.html (we used the 300, 500 and 700 colors of the Orange palette):
Creating your layouts is a matter of applying the design prescriptions as you go along, paying attention to sizes, distances, and the like.
Adding elevations is just a matter of using the new android:elevation attribute.
Please refer to other recipes on using new features, such as card widgets, and new versions of widgets such as the RecyclerVIew in place of the older ListView.
Google's Android team have published multiple articles on Material Design, including the following:
As well, several good third-party discussions have been published, including Eight Mobile UX Trends You Can't Ignore
The $1 Prototype Book, by Greg Nudelman.