Designing for Android

Whether you’re a seasoned Android designer or you’re new to the scene, there’s plenty of nuances that make designing for Android tricky.

Here at Brotherhood, we get a lot of emails asking for help and advice on the subject, so we’ve written a guide to fixing some of the most common pain points for Android designers.

Pain: A wall of Android guidelines

If you’ve ever visited Android for Developers, you’ll see that other than plugging why material design is so awesome, finding information on how to get started is a little daunting.

It’s easy to get lost and confused, especially when you see that not even half of Android devices are running the latest OS.

Google 9 to 5 gives you a pretty good idea of what we’re talking about here. If you’re new to Android design, then this is the first pain point you’re likely to come across.

Fix #1: Know what versions you’re designing for

In an ideal world, you’ll be designing for the latest Android OS. Reality is—with only 0.3% of current devices running Marshmallow—that’s probably not the case.

The good news: since the introduction of material design in Lollipop 5.0, all versions above 2.1 support material design. So apart from a few tweaks and changes (which we’ll get to), your designs will translate across most versions of the OS pretty well.

But you still need to know what versions you’re designing for, as different versions indicate different design variables.

Whether that’s geographical location, device size, or even L2R or R2L reading preferences, it’s vital you know which version you’ll be designing for. If you’re designing for clients, ask for a detailed brief on where the app is being launched. If you’re designing in-house or for yourself, think about your personas.

Fix #2: Always have key information on hand

Here’s a few resources from Android for Developers that we keep nearby when we’re designing. Depending on the project’s goals and what you’re asked to do, you might need more info. But this works as a nice overview:

• Color swatches for material design: Google gives you detailed primary and accent colors for use in material design. You can easily download the swatches for use in your own projects (Material Pallette is another quick win)
• Typefaces: Material design’s default font is Roboto, and there’s also extensive guidelines for styles, pairings, and line height
• Writing: Lorem ipsum and generic placeholder text is a big no-no in Android design. Although you’re not playing copywriter, always give your designs correct placeholder and dialog text.
• Navigation: There’s different patterns and hierarchy to navigation in Android design. Not only can you make information more prominent, there’s different ways to hide information, too.
• Product guidelines: Google’s pretty specific about the sizing for product and system icons. Make sure you follow these to the pixel—otherwise you’ll run into problems down the line.
• Gestures: Whether you’re asked to jump on board with prototyping or you’re just asked for UX advice, knowing the prominent Android gestures is a must. If nothing else, check them out and learn the patterns.
• Components: Again, knowing how Android components behave is essential for prototyping. It’s also really useful for knowing where to position your material components (and how they’ll behave).

Pain: Finding quality design examples

A great way to become a better Android designer: deconstruct quality existing work to see how it’s built.

Taking this approach lets you see how Android and material design assets are created. Most importantly, it gives you the chance to build the designs yourself and make any changes (within Android guidelines) that you’d like.

However, it’s not always easy to find quality examples that challenge you as a designer but carefully meet pre-existing Android guidelines.

Fix: Use our favorite resources

We’ve found UI8 to be an invaluable resource over the years. They’ve got great examples of UI kits containing reusable Android assets that tick all the right boxes. You can rebuild (or retouch) these assets as necessary and really get to know material design. Although the UI kits aren’t free, for anyone in the world of Android design, their resources are a steal.

Alternatively, if you’re looking for free resources, here’s 2 free kits we’ve found for Photoshop (downloads ZIP file) and Sketch.

Pain: Cutting Android assets

There’s a 50/50 chance you’ll be asked to do this as an Android designer.

It’s a sketchy territory that crosses between design and development. Depending on who you’re working with, this might fall onto you—so be prepared.

So, what exactly does cutting Android assets involve?

Just like iOS, Android developers need design assets cut so they can stretch and grow with different screen sizes. Just like layered PSDs or Sketch files, Android apps are built on different levels, so buttons or graphical elects require separate design assets.

And if you’ve never cut Android assets before, you’re in for a real shock.

Fix #1: Use best practices when cutting Android assets

As we’ve already mentioned, not everyone is using the most up-to-date Android OS. It’s why when you’re cutting assets for developers, you’ll be asked to provide assets in a specific way.

Densities
Always refer to Google’s product guidelines if in doubt (they change regularly), but as a rule of thumb, all assets exported for Android need to be in the following densities and in a .PNG format:

• mdpi:160 dpi
• hdpi: 240 dpi
• xhdpi: 320 dpi
• xxhdpi: 490 dpi
• xxxhdpi: 640 dpi

Assets cut in the above format should be the same height and width. Use padding to fix any issues with uneven assets, but don’t go too overboard with padding because it could cause development problems further down the line.

Sizing

Rather than traipsing through the guidelines, we use this handy screenshot from the Icon Handbook. It gives a clear overview of the sizes and formats needed for the corresponding icons, plus some notes to clarify what’s what.

Naming
This is pretty minor, but it’s needed for the Android Studio suite. All assets need to be named using underscores to separate words, with a descriptive naming convention for the asset, like checkbox_on_bg_24dp.png.

9.PNGs
In the most literal sense, 9.PNGs are 9 pieces of a PNG image used to create buttons and popups that need to stretch and expand. That way, when text is added, it’ll expand properly without any overflow.

The simplest way to create a 9.PNG is to save relevant cut assets under the extension filename.9.png surrounded by a 1px thick, solid black (#000000) line at the edge of the areas you’re looking to scale (leaving the corners exposed). When a developer adds this to the Android Studio suite, it’ll automatically detect these as 9.PNGs.

There’s a few tools you can use to create 9.PNGs without the hassle of manually cutting and setting guidelines, but if you’re interested in learning more on how, this guide gives you all the information you’ll ever need.

Fix #2: Use the right tools

Rather than cutting each individual asset manually, which is a huge pain, you can use a few tools that’ll remove the middle man. Once you’ve got them up and running, you’ll wonder why you didn’t find them sooner.

Assets

A few free tools we’ve had success with:

• Sketch Android Assets: If you’re a Sketch designer, then this is the tool for you. Fairly simple to set up and we’ve had a lot of success with it too. The developer is pretty good at keeping this up to date with latest versions of Sketch too.
• Android Assets Studio: On the other side of the spectrum, if you’re a Photoshop designer, then this tool will help massively with the process. Again a little setting up, but really simple to use and a great way to save loads of time cutting assets. You can also use this tool to create .9.PNGs (which is a lifesaver).
• Cut and Slice Me (CS6): Unfortunately this doesn’t work with Adobe CC, but if you’ve got an older version of Photoshop kicking about, then this works wonders. This was our go to tool and it’s had great reviews, it’s a shame it’s not quite as useful as it used to be.

9.PNGS

We only use 2 tools for .9.PNGS:

• Sketch 9Patch: A plugin that’s super easy to use, set up, and create 9.PNGs—fast
• Android Assets Studio: If you’re a Photoshop user, this tool really does it all

If you have any issues setting the above up, simply message the developers (or check out the documentation). Though they’re simple to use, they’re total game-changers.

Pain: Designers hate material design

Material design gets a lot of hate.

TL;DR: Material design is very limiting, and, at times, creates guidelines for certain elements that don’t mesh well with your ideas or art direction. In the worst-case scenarios, we’ve heard material design dubbed the guideline for “lazy design,” which is a bit cruel.

Fix: Design like a boss

The simplest way to get around the hate for material design is to do what any good designer would do: Do material design really, really well.

Dribbble is a great place for inspiration with material design. Plus, you can use the deconstruction trick to analyze why some examples of material design are leagues above others despite the strict guidelines.

Pictured above are a few of the top shots from Dribbble for the keyword “material.” If you’re looking to become a top-notch Android designer, then here’s a few questions you can ask to deconstruct the shots:

• Why have they performed so well?
• How have they pushed the boundaries of the guidelines in place?
• How have they incorporated their own style and brand into the limitations?

Don’t forget: sometimes Dribbble contains non-functional art pieces, too. This could be anything from concepts to some boundary-pushing designs, so make sure you’re drawing inspiration from relevant, functional sources.

Designing for Android doesn’t have to be a pain. The reason we enjoy it at Brotherhood is because we identified our pain points and then found solutions that make our lives easier.

We recommend you take this approach to almost everything you do: identify a pain point, find out why it’s painful, and fix it.

Header photo by Kàrlis Dambràns. Creative Commons Attribution 2.0 Generic.