Top Sketch resources for Android UI design

Over the past 2 years, Sketch has become the fan favourite when it comes to UI design on Mac. However, Android designers weren’t getting the same kind of attention as iOS designers. This is now starting to change with some support in the app itself, some coming from Google, and with more and more Android designers sharing their work online.

Obviously many resources are universal. Many plugins will be useful across all platforms and a lot of the knowledge can be transferred over.

But then there are specifics of Android design. Screen densities, vector drawables, common patterns and layouts. With Google’s introduction of Material Design designers need to step up their game for apps to stay relevant and fit in.

I would hardly call myself a designer. But even I fire up Sketch every now and then for a quick UI mockup or a simple icon. This post gathers my favourite Sketch resources for Android UI designers.

Inside Sketch

Sketch now addresses some needs of Android designers by providing two default templates and two sets of artboard sizes specific to Android:

Default Sketch Templates for Android
  • Android Icon Design template starts your new file with six artboards - five for your launcher icon (mdpi up to xxxhdpi) plus one 512x512 artboard for the Google Play icon. Nothing fancy.
  • Material Design template is the official Google component sheet for Sketch. It is currently the foremost source for all the widgets that make up the Android UI. Having it right here in the app is very convenient.

Google resources

Google is starting to recognize Sketch and provides some resources in the Sketch format.

  • As mentioned above, the component sheet (aka the “sticker sheet”) can be found on the Material Design spec site alongside files for Photoshop or Illustrator.
  • The Material Design page also provides so-called whiteframes. They provide a set of common layout structures for multiple form factors. They can be a good starting point for a quick mockup.

Third-party UI kits

For individual components, the Google sticker sheet is your best bet. However, seeing complete layouts following Material Design - at least to some degree - can be a great inspiration and a starting point for your own designs. Here are my favourites:

UXPin Lollipop UI Kit

UXPin Lollipop UI Kit

This file contains 43 complete layouts, based on standard Lollipop screens - Settings, Contacts, Phone dialer, Gmail etc. Unfortunately, the layouts are not separated into artboards.

Material Design UI Kit by Ivan Bjelajac

Material Design UI Kit by Ivan Bjelajac

32 complete and varied screens, ready to - uhm - get inspired by. The file is nicely laid out. Note however, that the designs here are 720x1280, i.e. assuming xxhdpi as the base density.

UI designs by Tobia Crivellari

UI designs by Tobia Crivellari

I’m grouping three files here from a single designer. These are smaller, but each is a nice example of what an Android app could look like. They have a unified look, yet maintain a distinct, strong brand. All come with Sketch source files.

Plugins

sketch-android-assets

sketch-android-assets

This plugin generates multiple density-specific PNG files from a single Sketch layer (or an artboard or a slice). The UI and configuration is somewhat crude but it does the job well.

Select an artboard, run the plugin and point it at your res folder. The plugin will generate appropriate sizes in drawable-mdpi, up to drawable-xxxhdpi. You have the option to configure the base density you’re working with.

SketchVectorDrawable

SketchVectorDrawable

Vector drawables are a new addition to Android (since Lollipop 5.0), but the promise is huge: a standardised, system-supported way to store vector assets.

The plugin generates an XML vector drawable from your Sketch shapes - both for 21+ VectorDrawable and for the vector-compat library. Unfortunately, from my experiments vector-compat fails to build with the latest Android Studio. It would be great if the plugin could output only the native attributes. It also behaves strangely when trying to export an artboard. This remains a great idea, but until those issues are resolved, YMMV.

material-design-color-palette

material-design-color-palette

This plugin generates color swatches based on the Material Design color palette. There are three modes - Hue, Value and Swatch - generating an appropriate subset of the material colors accordingly.

It would be cool if the plugin could actually integrate with Sketch’s color dialog. Perhaps in a later version.

sketch-preview + Skala Preview

sketch-preview + Skala Preview

Possibly the most useful of them all, sketch-preview together with Skala Preview allows you to easily preview your Sketch designs on a real device. Install Skala View on your Android device, connect to the Skala Preview on Mac and press Cmd+P in Sketch. Your current artboard will be sent over to Android for immediate evaluation.

Note that the Mac and the Android app work together and you need to install both.

Others

There aren’t a lot of Android-specific Sketch articles out there. I guess this makes sense. Of all resources, knowledge is most portable across platforms.

Nevertheless, I find these two pages worth visiting:

Final notes

The selection above is purely subjective and contains what I find most valuable. For more Sketch files, visit the “android” tag at Sketch App Sources.

I will try and keep updating this list if more interesting stuff comes up. Please share your favourite Sketch resources in the comments.

Łukasz Adamczak's Picture

About Łukasz Adamczak

I'm a mobile & web developer based in Warsaw, Poland. On this blog I write down notes from my programming journeys.

Warsaw, Poland http://czak.pl

Comments