The following post is originally posted on VNGRS Blog. I decided to post it here for archive purposes.


Introduction

Material Design is announced at Google I/O 2014 and I remember the amazement we had when we watched it. It is a breakthrough in UX design that enables a cohesive experience across devices, various screen sizes and even platforms.
Android 5.0 Lollipop brings material design into the platform. In this blog post we will look into the details of material design from a developer's perspective.

Knowing principles of material design is important for both developers and designers. Developers care about UI/UX more with the help of material design. Designers makes awesome designs that are easier for developers to implement.

Here is the official definition of it:

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

The goals of the material design is summarized in 3 points. First, it creates a visiual language that makes uses of the classic principles of print design. It makes unified experience across different devices, screen sizes and platforms. Finally, it provides extensive guidelines that will make UI/UX design and development easier.

There are 4 important topics to discuss in material design.

1. Surfaces

In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper.

In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper.

The amount of these surfaces (pieces of “digital paper”) are generally between 2 and 10. They are distinguished by the varying elevations and shadows. Each shadow indicates a new surface. Surfaces should be created carefully. Related elements in a screen are supposed to be on the same surface. Also the order of surfaces is very important.

Scrollable surfaces either scroll till the end or to behind another surface. The feeling must be such that the surface itself is being scrolled, not the ink in it.

2. Layout (Print like design)

This part is what I personally like about material design: keylines and grid system.

Android design guidelines follow 48dp rhythm for a long time. 48dp rhythm means that all the touch targets should be at least 48dp in size. This also includes 16dp of margins and possibly 8dp of internal margins.

Material design improves this and get values from print design and apply keylines. material apps contains 2 keylines that aligns the elements on the navigation bar and surfaces.

An implementation of keylines can be seen below. Keyline 1 is used for left most icon alignment and keyline 2 is used for title and other body texts in the app.

Keyline 1 is 16dp in phones and 24dp in tablets. Keyline 2 is 72dp in phones and 80dp in tablets.

3. Colors and Theming

Material design uses Primary, Primary Dark colors as the main colors and accent color as the tint color of the platform widgets.

The various theme attributes to fine grain the specific colors (e.g. touch highlight or activated colors, popup colors etc.) can also be provided easily.

Primary color is used in the toolbars and the dark version is usually used as the status bar color.

AppCompat in the support library is a great help for theming the application. Before material design, there were tools for generating hundreds of assets to be used throughout the app to change the colors. The AppCompat library, with a little hack inside, allows us to make the app colorful with a couple of simple steps.

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">

  <!-- AppCompat’s color theming attrs -->
  <item name="colorPrimary">@color/green_primary</item>
  <item name="colorPrimaryDark">@color/green_primary_dark</item>

  <item name="actionBarStyle">@style/MyActionBarStyle</item>

  ...
</style>  

Palette API

Palette API asynchronously generates background and appropriate text colors.

Palette is an API to generate colors from images for you to use in your UI.

When you use Palette, it gives you various color swatches. You can choose depending on your use case. Each swatch contains background, body text and title text colors. The title and body text colors are chosen to have enough contrast to have good readability on top of the background.

Usage of the Palette API is simple and can be shown below. It takes a bitmap object and generates Palette either synchronously or asynchronously. When a palette is generated, it picks a number of different color swatches. Vibrant swatch is generally the most used one.

When you have a Swatch object, make sure that it is not null and use the background and text colors inside it.

Palette palette = Palette.generate(bitmap);  
Palette.Swatch swatch = palette.getVibrantSwatch();  
TextView titleView = ...;

if (swatch != null) {  
  titleView.setBackgroundColor(swatch.getRgb());
  titleView.setTextColor(swatch.getTitleTextColor());
}

4. Animation

Google takes another step for animations in material design. It is one of the core parts of material design. The addition of animations -in 60fps- on top of responsive and beautiful design makes applications delightful. The animations, of course, are the hardest part of the design.

Google not only provide great examples and guidelines for animations but also gives default animations and easy APIs for developers to make their apps great. Lastly the animations in Android Lollipop happens on a separate GPU thread making it possible to do animations in 60fps.

Animations in material design can be described in 4 parts.

4.1. Authentic motion

Motion in material design is authentic meaning that it will tell us characteristics about the object moving. The movement should be more realistic. When an animation instantaneously starts it feels unrealistic.

You can see what is meant by just looking these animations:

Good: Motion with swift acceleration and gentle deceleration feels natural and delightful.
Bad: Linear motion feels unrealistic.

4.2. Responsive interaction

Apart from being realistic, user should be able to engage with the objects. When user interacts with the application, it should respond logically.
It also encourage users to explore the app even more.

4.3. Meaningful transitions

Carefully crafted transition animations can get user's attention and make them focus on important parts of your app.
Before Android Lollipop, transition between Activities were very limited. You either had basic built in animations, or you have to make too much manual work to do it.
With the new Transition API, a hero element is shared between Activities. Since animations in Android Lollipop are rendered in a different thread, animation on the hero element can be applied perfectly in the middle of changing Activities.

4.4. Delightful details

Small details in your application are noticed by the users. When the detail is in an animation, it delights the user.
These type of animations are hard to make and rarely be found in applications. This is an area that an application make a distinction.

Conclusion

In this post, we have talked about principles of material design. Since material design came out, we started to see great applications with great UI/UX designs. This is not a coincidence. With the material design guidelines and tools provided, it became easier to make beautiful apps.

In the next post, we will give great development tips that makes easier to implement material design. These tips will include

  • key points to use Toolbar
  • making greatest use of the built-in animations (ripple effects and reveal animations)
  • better ways to theme and color your app
  • alternative great libraries for the parts that Google didn't implement (yet).

Bonus: You can find our recording (in Turkish) of a Hangout OnAir presentation about Material Design below: