Think about an app, any app (but preferably Domain). Take one screen from that app and think about all the elements on that screen. Imagine each of those elements is drawn with ink on a square, rectangular, or circular piece of paper. Next, try fitting those pieces of paper into a glass box. This box is as tall, as wide, and as thick as your phone. You can stack your pieces of paper beside, on top of, or under each other as long as you can fit everything in your box. Put your box down. Can you see the shadows cast by the elements on each other? What happens when you slide one piece of paper under another?

Now imagine that instead of having actual paper and ink, you have magic paper and magic ink. Your paper can grow, shrink, split, merge with another piece of paper, move up or down or left or right. Your paper can appear out of thin air, or disappear into thin air. Your ink comes in so many colours, so bright, so alive. It can reflow or redraw itself, only the size of the paper limits what it can do.

What if our app is made of this magic paper and magic ink? Wouldn’t it be pleasant and delightful and fun? This is essentially what Material Design is all about. Material design takes us from the virtual (holo[graphic]) world to the physical (and yet magical) world. It is a new design philosophy that encourages bold, intentional — even quirky — visual cues defined through typography, colour, space, and imagery. Animations play a huge role in this design — just like how our magic paper (material) and ink (content) will react when touched, squeezed, moved, slid, or pressed. This visual language is applicable to all platforms, on all devices, that come in any screen size. The Domain app is made with magic paper and magic ink on your TV, laptop, phone, or watch. Imagine that!

Paul has mentioned in a previous post that we liked Material so much, and we really do! So the Domain Android team set about updating the app so you can stop imagining and start experiencing.

Jazzing it up

The Android platform has always given apps a lot of room to customise their look and feel. In the past versions of the platform, however, this can be a bit tricky. A lot of thought and effort went into shaping our app’s personality, to make it say “This Android app is lovingly hand-crafted for you by Domain.” Just how much effort is it? Our app’s styling is defined over eight files with 786 lines of code and more than a hundred images. We have custom checkboxes, buttons (about six kinds of them), input fields, text fields — you name it we probably have customised it. Here’s a sneak peek at our theme definition:

Android Theme <style name="DomainTheme" parent="@style/Theme.Apptheme"> <!-- This themes devices running Honeycomb and above --> <item name="android:windowBackground">@color/background</item> <item name="android:actionBarStyle">@style/Domain.ActionBar</item> <item name="android:selectableItemBackground">@drawable/actionbar_selection_drawable</item> <item name="android:checkboxStyle">@style/CheckBoxDomainTheme</item> <item name="android:radioButtonStyle">@style/RadioButtonDomainTheme</item> <item name="android:editTextStyle">@style/EditTextDomainTheme</item> <item name="android:autoCompleteTextViewStyle">@style/AutoCompleteTextViewAppTheme</item> <item name="android:buttonStyle">@style/ButtonDomainTheme</item> <item name="android:imageButtonStyle">@style/ImageButtonDomainTheme</item> <item name="android:progressBarStyleHorizontal">@style/ProgressBarAppTheme</item> <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItemAppTheme</item> <item name="android:listViewStyle">@style/ListViewAppTheme</item> <item name="android:listViewWhiteStyle">@style/ListViewAppTheme.White</item> <item name="android:spinnerItemStyle">@style/SpinnerItem</item> <item name="android:actionModeStyle">@style/ActionModeTheme</item> <item name="android:dropDownListViewStyle">@style/Custom.Widget.Sherlock.Light.ListView.DropDown</item> <item name="android:homeAsUpIndicator">@drawable/icon_drawer_arrow</item> <item name="android:actionModeCloseDrawable">@drawable/icon_tick</item> <item name="android:popupMenuStyle">@style/PopupMenu</item> <item name="android:itemTextAppearance">@style/DomainTextAppearance</item> <item name="android:alertDialogStyle">@style/AlertDialogStyle</item> <item name="android:actionOverflowButtonStyle">@style/OverFlow</item> </style> <!-- MORE AND MORE AND MORE LINES OF CODE FOLLOW --> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <style name ="DomainTheme" parent ="@style/Theme.Apptheme"> <!-- This themes devices running Honeycomb and above --> <item name ="android : windowBackground">@color/background</item> <item name ="android : actionBarStyle">@style/Domain.ActionBar</item> <item name ="android : selectableItemBackground">@drawable/actionbar_selection_drawable</item> <item name ="android : checkboxStyle">@style/CheckBoxDomainTheme</item> <item name ="android : radioButtonStyle">@style/RadioButtonDomainTheme</item> <item name ="android : editTextStyle">@style/EditTextDomainTheme</item> <item name ="android : autoCompleteTextViewStyle">@style/AutoCompleteTextViewAppTheme</item> <item name ="android : buttonStyle">@style/ButtonDomainTheme</item> <item name ="android : imageButtonStyle">@style/ImageButtonDomainTheme</item> <item name ="android : progressBarStyleHorizontal">@style/ProgressBarAppTheme</item> <item name ="android : spinnerDropDownItemStyle">@style/SpinnerDropDownItemAppTheme</item> <item name ="android : listViewStyle">@style/ListViewAppTheme</item> <item name ="android : listViewWhiteStyle">@style/ListViewAppTheme.White</item> <item name ="android : spinnerItemStyle">@style/SpinnerItem</item> <item name ="android : actionModeStyle">@style/ActionModeTheme</item> <item name ="android : dropDownListViewStyle">@style/Custom.Widget.Sherlock.Light.ListView.DropDown</item> <item name ="android : homeAsUpIndicator">@drawable/icon_drawer_arrow</item> <item name ="android : actionModeCloseDrawable">@drawable/icon_tick</item> <item name ="android : popupMenuStyle">@style/PopupMenu</item> <item name ="android : itemTextAppearance">@style/DomainTextAppearance</item> <item name ="android : alertDialogStyle">@style/AlertDialogStyle</item> <item name ="android : actionOverflowButtonStyle">@style/OverFlow</item> </style> < ! -- MORE AND MORE AND MORE LINES OF CODE FOLLOW -- >

Each item in there points to another XML definition of the style. For clickable items such as the checkbox, we specify what images to use for different states — pressed, focused, disabled, checked, unchecked, etc. It can be pretty tedious to update, maintain, or read.

Fortunately for us, Google has done a good job with the AppCompat library over the past year. This library allows us to jump into material design pretty quickly, all while supporting older OS versions (to some extent, still WIP). Chris Banes explains the more technical details in this blog post. What this means for us is that we can chuck out that very long XML definition (AND all the custom style definitions AND most of the custom images supporting those styles) and replace it with something like:

Material Theme <style name="DomainTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/green</item> <item name="colorPrimaryDark">@color/dark_green</item> <item name="colorAccent">@color/light_green</item> <item name="android:buttonStyle">@style/Widget.Button.Domain</item> </style> 1 2 3 4 5 6 <style name ="DomainTheme" parent ="Theme.AppCompat.Light.DarkActionBar"> <item name ="colorPrimary">@color/green</item> <item name ="colorPrimaryDark">@color/dark_green</item> <item name ="colorAccent">@color/light_green</item> <item name ="android : buttonStyle">@style/Widget.Button.Domain</item> </style>

Neat and concise; most of the heavy lifting when styling widgets is now done by the OS for us. This is one of the benefits of migrating to material design — we do not have to worry about customising each and every widget with our colour scheme; Android will tint everything with the appropriate primary, dark, or accent colour we have defined. Of course, we are still allowed to override default styles if we want to, like what we did for the button style Widget.Button.Domain in the sample theme above.



Left: Custom checkboxes set via styles, Right: Custom checkboxes using color accent

Taking them there

One part of our app that users usually interact with is the left navigation drawer. That drawer has been opened more than 350,000 times since the beginning of the year. It takes up a huge part of the screen real estate when shown, and it is the fastest way for our users to get around the app. Our navigation drawer has quite a bit of stuff in it, and the login button is buried deep down there… somewhere.



Navigation drawer, pre-material design

It makes sense then to make sure that this drawer got a full facelift — manage the contents and give it the appropriate material design treatment. Google has set out some guidelines specifically for this type of design pattern and it is pretty straightforward to follow them. The result: a new drawer that is now more succinct, with very prominent user profile information.



Updated navigation drawer with profile info

Shiny cool stuff

From Chris’s post, we learned that simply making our app inherit its theme from one of the Theme.AppCompat.* ones will make all our clickable areas automatically get the ripple animation effect that emanates from a hotspot (the specific area the user touched). Rich Fulcher, a designer at Google, gave an excellent overview of virtual ink responsiveness aka ripples in this DesignByte video. Pretty neat, huh? As with most things Android, we can customise the ripple colour to be anything we want.



Left: Button selectors, Right: Button with ripple from hotspot

Here are the ripples in action:

(For further reading on the different kinds of buttons recommended by material design, consult the button guidelines.)

Stuff appearing out of nowhere can be jarring or disorienting, so material design provides us with the ability to transition cleanly between screens. The Domain app makes very good use of the shared element affordance when moving the user from the search results list to the property details page and back. Both the list and the details page show the property photos, so we help carry the user smoothly between the two screens.

You can read more about activity transitions in the Android developer site.

Coming up next

Since material design spec is a living document, there’s definitely more to discover and look forward to. There are quite a few components and patterns that we still have to implement and the team is very keen on playing with them, so keep an eye out for those updates. Be sure to join our Beta channel to get the latest and the greatest!

Resources and further reading:

Material spec: http://www.google.com/design/spec/material-design/introduction.html

Android-specific Material: https://developer.android.com/design/material/index.html

Material according to a Google designer: http://youtu.be/YaG_ljfzeUw

Material at Google I/O 2014: https://www.youtube.com/watch?v=97SWYiRtF0Y