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.
Sketch now addresses some needs of Android designers by providing two default templates and two sets of artboard sizes specific to Android:
- Android Icon Design template starts your new file with six artboards - five for your launcher icon (
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 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
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.
- Lollipop UI Kit on UXPin
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.
- Material Design UI Kit on Behance
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.
- DiscoMusica - Free Sketch UI Kit on Dribbble
- Zalando Material Design UI - Sketch Freebie on Dribbble
- BankTag - Free Material UI Kit on Dribbble
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.
- zmalltalker/sketch-android-assets on GitHub
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.
- jacobmoncur/SketchVectorDrawable on GitHub
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.
- t32k/material-design-color-palette on GitHub
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.
- marcisme/sketch-preview on GitHub
- Skala Preview for Mac by Bjango
- Skala View for Android on Google Play
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:
- Sketch With Material Design - a very comprehensive tutorial going over a notes app using the Material Design Sketch template.
- Import the Material Design color palette into Sketch 3 - this article from Hannah Lee provides instructions, as well as a complete palette file ready to be loaded into Sketch.
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.