Home FOI Blog

01 Jan 2016
Material Design for Android Developers: a Udacity crash course

I never really had a chance to board the Material Design bandwagon when it started out. Working mostly with clients that go iOS first, I always just had to integrate iOS-minded designs and make them work on Android. To be honest, I never thought Material Design would catch on. I kinda felt it was a botched up attempt by Google to catch up on the look-ma-I-can-make-pretty-things-too wave (I am not saying design is not important; to the contrary, it’s just that, maybe, there are more pressing matters for the Android platform). Anyway, I am glad I was proven wrong.

Material Design just grows on you: it’s one of those things you just get used to. Seeing as more and more apps are transitioning into Material, I decided it was time to pick it up. It just happened that a link to the Udacity course about Material Design for Android Developers appeared on my reddit frontpage. This article is a collection of notes taken while completing the course.

Overall, the class was actually pretty good; very pragmatic, and very useful for someone with very little design skills (like yours truly). It even made me wanna purchase a license of Sketch!

Lesson 1: Introduction to Material Design

Pixels vs DIP

  • Just like everything in life, start design on small screens
  • Android 1.6 introduced support for varying densities
  • Density-independent pixels are a construct that transcends space, time, and resolution. Unit is dp

A device has a screen resolution, unit is dpi (dots-per-inch)

# pixels / # dp = device_dpi/160 dpi

ldpi    <--> 120dpi <--> .75x
mdpi    <--> 160dpi <--> 1x
hdpi    <--> 240dpi <--> 1.5x
xhdpi   <--> 320dpi <--> 2x
xxhdpi  <--> 480dpi <--> 3x
xxxhdpi <--> 640dpi <--> 4x


  • If including only one, use the highest dpi
  • Don’t use raster graphics, use vector graphics apps like Sketch, where you can export in svg


  • FrameLayout should be used when children are overlapping. Last added child overlaps the ones before it
  • Avoid putting RelativeLayout as root
  • ScrollView must contain only one child (applies to iOS too)
  • If layout_weight_child == weightSum_parent ==> child_height = parent_height - total_other_children_fixed_height (useful for making fitting view)
  • A ScrollView’s child layout_height should be wrap_content

Common patterns

  • Height of toolbar can be queried at ?actionBarSize
  • “Scrolling a list and horizontal paging of content are incompatible”, Nick Butcher. You hear that, Gmail?

Lesson 2: Surfaces


A surface is a container for content, it provides grouping and separation from other elements.

  • In a listview, putting each item in their surface slows your ability to scan the items. Use one surface with separators
  • In heterogenous items, use different surfaces (for Masonry-like layout, for example)
  • In general, not more than 5 surfaces

Elevated objects cover other surfaces with shadow. The closer the object, the more shadow it casts.



The FAB can be either 40 or 56 dp diameters, with 6dp elevation at rest, with 12dp elevation when pressed Use the design support lib

app:layout_gravity="end" <-- right end -->

When using appcompat for design, switch android:Theme.Material.x to Theme.AppCompat.x

Example implementation



If a surface has bounds, ripple affects the whole area If a surface is boundless, ripple creates a circle

Paper metaphor

A list item in a list view can transform and expand to create the details view, and overlay a new surface


This effect happens when a view is elevated above a sibling with which it was sharing the same elevation. Scrolling toolbar demo

When using AppBarLayout, remember that it expects a sibling with nestedScrollingEnabled=true

Lesson 3: Bold graphic design

Getstalt principles

  • Law of past familiar experience: use familiar objects
  • Law of proximity: close stuff are related
  • Law of similarity: similar objects are related


  • All spacing values are multiple of 8dp
  • All line heights are multiple of 4 dp

Sketch template with Material Design


You can override the Theme (AppCompat or Material) default colors using the values:

  • colorPrimary: for app bar color
  • colorPrimaryDark: for status bar color
  • textColorPrimary: for app bar text color
  • windowBackground: for background color of window
  • navigationBarColor: for software buttons bar background color
  • colorAccent: for stuff that sticks out

Choose a palette of colors


Use Roboto. Enough said


Material Design Icons

Lesson 4: Meaningful motion

Animations in Android 4.4

New TransitionManager class that transitions between scenes. TransitionInflater for custom xml

Animations in Android 5.0

  • Content transition for transition in master/detail views
  • Shared element transition


To customize animation for shared element transition, change the windowSharedElementEnterTransition theme property

Instructive motion

  • Animation length ~300ms
  • Use fast-out slow-in for movement within the screen
  • Use linear-out slow-in for objects entering the screen
  • Use fast-out linear-in for objects leaving the screen
  • Use Interpolator to control movement: http://developer.android.com/reference/android/view/animation/Interpolator.html
  • When doing a shared element transition, use a curved motion
  • When doing an increase in size, change width then height



TickCross Demo

Lesson 5: Adaptive design

Always inherit your theme twice, so you can override the base theme in your sw600-dp style

PS: I know I am not supposed to tell you what to do, but, you know, you could always follow me on Twitter