How to upgrade your app’s design from Holo to Material Design — A case study
Written by Orhan Sönmez, UI Designer & Android-Developer
I initially started working on Freshbacks about a year ago as a little side project, a sandbox to try out new things regarding Android development, if you want. But somewhere down the road, my goals with this app got more and more ambitious, with the ultimate goal becoming to create a showcase app, one that shows off how a well-designed Holo (the predecessor of this post’s topic, Material Design) app should look and feel like, in my opinion at least.
So, when Material Design came around in the fall of this year, I started thinking about how to integrate the new design elements and possibilities, such as activity transitions and the extraction of prominent colors from pictures, into the Freshbacks app. I basically wanted to keep the main aesthetics of my Holo app, but upgrade it to Material Design in a meaningful way. This is a short documentation of how I managed to do this.
What is Material Design?
If you are even remotely interested in the Android ecosystem and not have been living under a rock in the past few months, you most probably already know what Material Design is and what it stands for. In short; Material Design is Google’s new design language, that will be the underlying design philosophy for all forthcoming Google products, across all screen sizes and devices types.
It is truly a mixed bag of awesomeness: It’s modern and flat, but with accents of depth and perspective, it’s colorful, bold and has a focus on playful little details and nifty animations. It’s beautiful and works great on mobile phones and tablets (I’m not sure whether it’s the right approach for desktop apps though, but that’s part of another discussion). You can start here, if you want to know more about the core principles and philosophies behind Material Design.
Materialize!
With this out of the way, let’s see how one would go about updating an app’s design from Holo to Material Design. I will demonstrate this by presenting the changes I made to Freshbacks, so this will not cover all bases of course, but I hope you can extract something valuable for yourself, if you are in the same situation as I was. So, let’s begin.
- Usage of screen space
One of the key differentiators of Material Design is its strong emphasis on well-structured user interfaces, which follow a certain layout hierarchy. There are a lot of examples and rules for this in the design guidelines (having a document with clearly defined design guidelines is a novelty in itself in the world of Android development), with the most significant one being the “Metrics & keylines” part, which give precise instructions on how to position elements on the screen, what font sizes to use and how much padding between elements to insert.
The first thing I did after studying the guidelines, was to remove all unnecessary paddings from all views, that were prevalent in the Holo design language as means to structure and group elements together. Let’s look at the following comparison of the main screen of the app:
What’s clear to see here is, that the Material Design version makes much better usage of the available screen space by removing the lavish left and right paddings (which were not really needed in the first place), thus giving the images much more room to breathe, ultimately resulting in a much more immersive experience for the user. The lesson to learn here: if your app relies on rich imagery, make sure to push your content into center focus by removing all unnecessary distractions.
Another difference is the top header, which featured a divider line in the Holo variation, whereas the right version uses white-space and colored text only. Removing unnecessary UI elements like divider lines (and using white-space instead) to group interface elements together, is another improvement of the new design language. Which is even more apparent in the following comparison of the settings screen:
You will immediately notice that the right version looks much cleaner and more appealing than its Holo variant, because the grouping of elements is much easier to comprehend through the usage of white-spaces, colored headers and a distinctive group divider. Using iconography is also a major plus here, as it helps the user understand faster what a particular setting is about, without having to (re-)read the text. Improving on these points already netted me a nicer and cleaner looking UI and moved the app a huge step forward towards Material Design, but that’s not nearly enough of course. Let’s go on.
2. Rich visuals and print-like design
The biggest change between the old and the new version of the app is easily the details page for a particular Freshback, which displays the content pulled from the original 500px contribution. Take a look at this:
What a huge difference/improvement, isn't it? While I would argue that Holo introduced the concept of well-structured layouts for Android apps, Material Design aims to be way more than that, by featuring (full-size) imagery, a rich color-palette, small and playful details and a beautifully structured layout that effectively relies on white-space for segregating UI elements.
This makes for a far more pleasant user interface that presents its information in a much easier digestible way. It almost looks it would be rather at home in a printed magazine than on a display! Which is actually a good keyword here: If you read yourself into Material Design, you will notice that the words ‘print-like’ come up time and time again, stating that Material Designed apps should have the aspiration to produce print-like aesthetics, with its bold colors, the white-spaces and its easy and simple affordances like a prominently placed ‘floating action button’ (short: FAB), which is a newly introduced system-wide interaction model that developers can use in their apps.
Material utilises classic principles from print design to create clean, simple layouts that put your content front and center. Bold deliberate color choices, intentional whitespace, tasteful typography and a strong baseline grid create hierarchy, meaning and focus. — Android developers blog
These guidelines also give designers much more room to try out different things to reach this desired print-like look, like experimenting with different fonts and styles. In the Holo era, every text that was not using the then newly introduced Roboto font looked awfully out of place and was mostly frowned upon by users; Material Design is much more lax in this matter.
Indeed, after experimenting with different fonts and sizes, I settled on the ‘Intro’ font for the titles and ‘Amaranth’ for the descriptions here, which play very well with the Roboto font in my opinion. Funnily enough, using Roboto for these texts was never even an option for me here, as it broke the perception of a print-like design in my eyes.
Another point to note here is the color-adaptation of the ‘button bar’ and the FAB with colors that are extracted from the main image above them. This is one of many playful details that the guidelines propose, which don’t serve any deeper function at first, but will surely delight users and drive engagement, if used in the right ways.
3. Activity transitions and animations
One of the center-points of Google’s new design language is undoubtedly the big focus on animations, animations … and animations. We are not talking about small animations implemented randomly here and there, we are talking about animations literally everywhere in the app. So much so, that the thesis is, that no UI element ever gets simply thrown into existence from one frame to another, but rather gets animated into and out of the screen, showing the user where an element “comes from” and “where it goes to”.
The reasoning behind this lies in the metaphor that the screen should rather be seen as consisting of ‘magical’ pieces of paper, that can alter their shape, color and properties fluidly to convey different kinds of information. Google even dedicated a whole page in their design guidelines explaining what this ‘material’ is and how it behaves under different circumstances.
So, ‘materializing’ this metaphor into code (bad pun is bad) might result in something like this:
The beauty of Material Design really shines through in this example. While the Holo version makes a clear distinction between the two parts of the app, where one part moves out to make room for the other, the new version holds the illusion of a single piece of ‘paper’, that just transforms itself from a thumbnail to a full-blown image (to reveal more information about itself), and then ultimately snaps back into place, all in a seamless transition.
One last example I want to present in this post has only remotely to do with Material Design, but the importance of animations in general: the aforementioned details page features a static map for particular Freshbacks, which shows the user where the depicted image has been taken at. Tapping this map leads the user to another map, which is bigger in size and fully interactive. Now, these two map-views share a common design, but are still two different views at two different hierarchy levels in the layout. Watch this:
Although the static map does not really transform into the bigger one (as they are two different entities code-wise), it surely looks like it, through the help of a little animation. This helps the user understand what is actually happening after tapping the map and creates a bridge between the two different states of the app, which is one of the key goals of Material Design (remember: nothing should just appear on the screen without the notion of where it is coming from).
All in all, I am happy with the direction the app has taken, incorporating Material Design to its core. After my first skepticism, I firmly believe that Material Design is a bold and right step for Google and Android. Usually, Android users looked with envy to the iOS ecosystem, because of the huge amount of beautifully designed apps (while Android was still lingering in the dark ages of Gingerbread apps), but I think that Material Design has a real chance to turn this sentiment around in favor of the Android ecosystem!
Closing remarks
One of the major drawbacks of Material Design (for now) is, that most of the new awesome features it brings along (like ripple effects and activity transitions) are only available for devices running Android 5.0 Lollipop and up, which will probably not be back-ported at all for older versions of Android. According to Google’s Developer Dashboard, that’s less than 0.1%* of all devices running Android! *At the time of writing on the 8th of December 2014.
Luckily, in Android development no one can hinder you to recreate all these effects, which is what I actually did for the Material Design update for Freshbacks (starting at Honeycomb for now, sorry Gingerbread users ☹). I will probably write another blog post explaining in detail how I made this happen (and share the code on GitHub, if it’s ready to be shared).
You can download the app here, if you want to check out all the stuff I've rambled about in this post … and while you are at it, please shoot me your thoughts about the app and this update over at Twitter or Google+.
Thanks for reading this (way too) long post!
