Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Looking Good with Material Design

Published? true
FormatLanguage: AsciiDoc

Problem:

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.

Discussion:

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

     
                android:allowBackup="true">
                ...
    
    

    You would then have a styles.xml file defining AppTheme, based on android:Theme.Material, as follows:


    res/values/styles.xml

    
        
    
    

    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):


    res/values/colors.xml

    
    
    	
        #FF9800
        #F57C00
        #FFCC80
    
    

    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.

    See Also:

    Google's Android team have published multiple articles on Material Design, including the following:

  • Material Design
  • Creating Apps with Material Design
  • Getting Started - Using the Material Theme - Creating Lists and Cards
  • Using the Material Theme As well, several good third-party discussions have been published, including

  • Greg Nudelman's "Material Design: 7 Insights for Designers" Eight Mobile UX Trends You Can't Ignore.

    The $1 Prototype Book, by Greg Nudelman.