Here’s why

Your app exists alongside other apps installed on a user’s phone. We therefore recommend that applications follow the Material Design guidelines to ensure that apps operate consistently, that patterns learned in one app can be used in another.

Android users expect your app to look and behave in a way that’s consistent with the platform. You should follow material design guidelines for visual and navigation patterns… — d.android.com/design

To implement this, use the Material Design Components (MDC) library. This blog post outlines the many benefits of using MDC, explaining why it’s our recommended solution.

Widgets


Illustration by Virginia Poltrack

In previous articles in this series on Android styling, we’ve looked at the difference between styles and themes, talked about the benefits of using themes and theme attributes and highlighted some common attributes to use.

Today we’ll focus on actually using themes, how they are applied to your app and the implications for how you build them.

Scope

In a previous article we stated:

A Theme is accessed as a property of a Context and can be obtained from any object which is or has a context e.g. Activity, View or ViewGroup. These objects exist in a tree, where an Activity


Illustration by Virginia Poltrack

Theme attribute all the things

In the previous posts in this series on Android styling, we looked at the difference between themes and styles and why it’s a good idea to factor out things that you wish to vary by theme and common theme attributes to use:

This enables us to create fewer layouts or styles, isolating changes within a theme. In practice, you largely want to vary colors by theme and as such you should always* refer to colors via theme attributes.

Always* refer to colors via theme attributes

That means you can consider code like this to be a smell:

Instead you…


Illustration by Virginia Poltrack

The Android styling system offers a powerful way to specify your app’s visual design, but it can be easy to misuse. Proper use of it can make themes and styles easier to maintain, make branding updates less scary and make it straightforward to support dark modes. This is the first in a series of articles where Chris Banes and I will set out to demystify Android styling so that you can make stylish apps without pulling your hair out.

In this first article, I’ll take a look at the building blocks of the styling system: themes and styles.

Theme != Style

Both themes…


Illustration by Virginia Poltrack

In the previous article in this series on Android styling, we looked at the difference between themes and styles and how themes allow you to write more flexible styles and layouts which isolate changes:

Specifically we recommended using theme attributes to provide a point of indirection to resources, so that you can vary them (e.g. in dark theme). That is, if you find yourself writing a direct resource reference (or worse yet, a hardcoded value 😱) in a layout or style, consider if you should use a theme attribute instead.

But what theme attributes are available to use? This…


Illustration by Virginia Poltrack

Recently at Google I/O, I presented some techniques for writing smarter animations in your Android applications, specifically for making animations play nicely with reactive architectures:

tl;dw?

I know that watching a 32 minute video isn’t everyone’s cup of tea, so here is a write up of the subject. ☕️

#AnimationsMatter

I think that animations are important for the usability of your app; they explain state changes or transitions, establish a spatial model or can direct attention. They help users understand and navigate our apps.


Illustration by Virginia Poltrack

In previous posts we’ve looked at Android’s VectorDrawable image format and what it can do:

In this post we’ll dive into how to use them in your apps. VectorDrawable was introduced in Lollipop (API 21) and is also available in AndroidX (as VectorDrawableCompat) bringing support all the way back to API 14 (over 99% of devices). This post will outline advice for actually using VectorDrawables in your apps.

AndroidX First

From Lollipop onward, you can use VectorDrawables anywhere you would use other drawable types (referring to them using the standard @drawable/foo syntax) but I would instead recommend to always use the AndroidX…


Illustration by Virginia Poltrack

In the previous article, we looked at Android’s VectorDrawable format, going into its benefits and capabilities.

We covered how you can define paths which make up the shapes in your assets. VectorDrawable supports a number of ways of actually drawing these shapes that we can use to create rich, flexible, theme-able and interactive assets. In this post I’ll deep dive on these techniques: using color resources, theme colors, color state lists and gradients.

Simple Colors

The simplest way to draw a path is to specify a hard-coded fill/stroke color.

You can define one or both of these properties and only a…


Illustration by Virginia Poltrack

Android devices come in all sizes, shapes and screen densities. That’s why I’m a huge fan of using resolution independent, vector assets. But what exactly are they? What are their benefits? What are the costs? When should I use them? How do you create and use them? In this series of posts I’d like to explore these questions and explain why I think that the vast majority of the assets in your apps should be vectors, and how to get the most out of them.

Raster vs Vector

Most image formats (png, jpeg, bmp, gif, webp etc) are raster which means they describe…


Illustration by Virginia Poltrack

Animations in the Google I/O app

I was recently part of a great team working on the Google I/O 2018 Android app. This is a conference companion app, allowing attendees and remote folks to find sessions, build a personalized schedule and reserve seats at the venue (if you’re lucky enough to be there!). We built a number of interesting animated features in the app that I believe greatly enhanced the experience. The code for this app has just been open sourced and I wanted to highlight a few of these instances and some interesting implementation details.

Nick Butcher

Android designer + developer @ Google

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store