Android Design Integration Guidelines

How to package Android designs for the pixel-perfect implementation

iProgress tracking app for people with excess weight

It is not uncommon for an Android designer to send perfect PSDs over to a developer, only to have the final product look ugly and not at all similar to the pixel-perfect original design. The question then becomes – what can a designer do to achieve an easier integration between design and development for Android devices?

Many would say that the final outcome depends only on the developer and any issues with interface after implementation are developer’s fault, but that would not be correct. In fact, before the programmers even start working on implementing an app, the designer must provide them with a design specification, and often designers do these specs in a wishy-washy way or, what's even worse, do not do at all. As a result, the programmer is left to rely on their own judgment due to lack of clear instructions.

4 Steps to Create Android Design Specifications

To get a pixel-perfect Android application, designers must pay due attention to putting together design specifications because this is what developers will use to translate PDS templates into a finished product that users will touch. We will cover thre four most important things: Resolution, Metrics, Fonts and Resources.

Step 1 - Resolution: Understand the challenges.

First, just so it becomes clear as to why packaging designs for Android is not as easy as it sounds, and certainly is not the same as packaging iPhone apps, a quick lesson on Android resolutions.

Android screens vary in density, and density is measured in dots per inch. There are four main screen density categories for Android devices: LDPI, MDPI, HDPI, and XHDPI (we are not taking XXHDPI into account as yet).

In order to ensure that the interface elements have the same size on different screens, Google introduced an abstract unit, a density-independent pixel, called a dp. While one dp equals one physical pixel on MDPI screens, same one dp on XHDPI screens equals to two pixels (this is, for example, the density of Google Nexus 4).

Screen TypePixel Multiplier

In other words, Android has a lot of different resolutions, and to make it "simpler", Google created an abstract measurement that aligns all these resolutions together.

Step 2 - Metrics: Convert all image sizes into DP.

First, start by putting together a Metrics folder. It needs to contain files with element sizes, margins between them or from the edge of the screen, colors for solid color elements, all the things that can be programmed and can also be misunderstood. Create templates for XHDPI screens (768x1280, Nexus 4). Since 1 dp = 2 px in XHDPI, and since Photoshop does not understand dp and works with pixels, the first step is to ensure that 1 dp equals one 1 px.

How do you ensure that DPs and Pixels are matching for your Android device? Go to Image, choose Image Size, and set it to 50%. That's it: now 1 dp = 1 px. Now you can move on to "sizing" the templates.

Doing sizing manually would be pure drudgery, and a short while ago I came across a really handy Photoshop extension. PNG EXPRESS is a paid extension, it costs about 29 bucks, but it works really well (with Photoshop CS5 and onwards). It is good for lots of useful things, but I use it specifically for "sizing".

Example of how to use PNG Express: Imagine we need to specify the distance between the X icon (delete) and the text "Discard". Simply select these two layers in Photoshop and press Margins. The extension will automatically insert the sizes. If the size is wrong and we messed something up, we can edit it as a regular text layer in Photoshop. Although the process is not entirely automated, this extension will save you a ton of time.

Step 3 - Fonts: All font sizes must be given in SP.

The Fonts folder must contain files with everything that deals with fonts, that is, size, color, typeface, Photoshop styles, and so on. I separated it from sizes to make it easier for programmers to navigate through the sea of notes and hence reduce the number of errors.

1 SP = 1 DP, provided the operating system font size is set to default in the settings. If a user has eyesight problems, they will be able to increase the font in the system settings. If you set your font size in SP, your app will adjust for the user's choice and also increase the font. If you use other units, the font will remain unchanged.

Example of how to use PNG Express to specify font sizes: Suppose we need to specify the font size for the "Done" button. Step 1. Select its layer in Photoshop and press Spec Font Features in PNG EXPRESS. Boom! You will get a full font description. A huge time-saver!

Step 4 - Resources: PSD files must be initially designed for XHDPI.

The Resources folder must contain all the graphic resources for your app. That is, four subfolders for each type of screen density. There is another extension I use for this purpose. Cut&Slice Me, a free Photoshop extension. Works with CS6 only. It allows you to do all this work with one click.

Sometimes you may come across the problem of fuzzy pixels, that is, once resized, the icon may not fit into the pixel grid. This is why you may have to go through your folders and double-check how well the scrip did its job. You can make corrections manually, if you have to.

And a few more words about graphics.

None of the buttons and spacers for Android are of a fixed size; they are all resizable. The 9.png format is used for this purpose. Such files are usually created from regular PNGs in NinePatchEditor. In short, one pixel filled with black is added to the original image on each side. The black pixel on the left is responsible for the way the button will be expanding horizontally, whilst the one at the top is used for vertical expansion. The pixels on the right and at the bottom are responsible for content position within the button.

And that's it! Happy designing!

Designing for Android sounds pretty complicated. Sure, you could try something yourself, but then you would have to deal with all the above-mentioned headaches. Hire a professional designers instead!

start a project with evgeny
comments powered by Disqus