Getting ready for Material Design

Google I/O 2014 is the moment everything changes visually for Android. Google announces Material Design, a whole design language with elevation, shadows, ripples, and cards. It looks beautiful. It is also not available yet.

The official support library will come later. But we don't want to wait.

What Material Design actually is

Before I/O, Android apps look all over the place. Every app invents its own style. Some follow Holo, the previous design system. Some don't follow anything.

Material Design gives us rules. Cards, floating action buttons, 8dp grid, specific elevation levels for every component. Color palettes. Typography scale.

The spec is published at material.io before the SDK. So you can read everything, design everything, then... implement it yourself.

Implementing before the support library

We have a few options.

AppCompat is already out but doesn't have Material components yet. You can get the toolbar and action bar behavior but not much else.

Third-party libraries start appearing fast. RoundedImageView, FloatingActionButton libraries, card libraries. The community moves quick.

We end up mixing approaches:

<!-- Before MaterialCardView exists -->
<FrameLayout
    android:elevation="4dp"
    android:background="@drawable/card_background"
    android:padding="16dp">
    <!-- card content -->
</FrameLayout>

<!-- card_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <corners android:radius="2dp"/>
</shape>

Elevation only works on Lollipop and above. On older devices you have to fake the shadow with a drawable. Two different background drawables for the same card.

Colors and typography

We pick primary and accent colors from the Material palette. The palette has very specific shades: 100, 200, 300 up to 900. You pick a primary (usually 500) and a dark variant (700).

<color name="primary">#1976D2</color>
<color name="primary_dark">#1565C0</color>
<color name="accent">#FF4081</color>

Typography is Roboto. Android already ships with it. You just have to use the right weights: Roboto Regular for body, Medium for emphasized things, Light for big headings.

Ripples

Ripples are new and there is nothing available for older devices. You can use a selector with pressed state and that is acceptable for now:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed"/>
    <item android:drawable="@drawable/button_normal"/>
</selector>

Not a ripple. But better than nothing.

Waiting for the real thing

The Design Support Library is coming. Google confirmed it. When it arrives we will get CoordinatorLayout, AppBarLayout, FloatingActionButton, Snackbar, TabLayout, NavigationView. All in one dependency.

For now we build what we can manually. The spec is detailed enough that we understand exactly what we are supposed to build. That is more than we usually get before a new API ships.

The apps that don't bother with Material Design will look outdated fast. Worth the effort.