Developers are now increasingly porting iPhone apps to the Android platform. The differences in platform are many, and the principles and elements that work well for the iPhone don’t work as well on Android platforms.

With iOS, from the moment you start designing an app, you know how Apple wants you to build it. The design plans are exhaustive and accessible. Unfortunately, there is no comparable resource for Android that gives consideration to asset creation or creative direction.

In the Android world, we need to define a boundary between buttons and icons and reassess what needs to be designed versus what is better left programmed  and it's important to remain open-minded, patient, and exploratory. Android is a curious frontier and while there are definitely rules and standards, they are not always obvious.

There are only a limited handful of resolutions and sizes within the iOS landscape, but within Android, the number of different devices means that form factors vary significantly. Designing an app that looks good across the spectrum of Android devices is no small task, but it is not impossible. Platform fragmentation on Android is indeed a threat, but a lot of the alarmist noise about the issue is really coming from designers who are intimidated by the operating system and the lack of design guidelines.

Borne out of its own struggles developing and designing for the Android platform, our company set out to address this need by creating a set of Android Design Guidelines. The final document is an exhaustively researched resource that sheds light on making apps work from device to device. Since publishing the original, we’ve added a supplement that addresses the recent Honeycomb releases.

This article summarizes key portions the guidelines and is intended to help developers and designers size Android assets for optimal resolution.

General Resolution

Ninety percent of Android design woes stem from accommodating multiple device resolutions and screen sizes. Due to the widely varying array of devices, it is difficult to pinpoint a specific pixel resolution. With this in mind, Android has developed four generalized resolutions and four generalized densities for thinking about device screens.

There are four generalized screen sizes:

Small (2-3 inches)

Normal (3-5 inches)

Large (4-7 inches)

X-Large (7-10 inches) Tablets only

And four generalized resolutions:

LDPI (100-120 dpi) MDPI (120-160 dpi)

HDPI (160-240 dpi)

XHDPI (240-320 dpi)

These are represented visually in Figure 1.

These numbers should enter into your choice of:

What your buttons look like

What sort of gradients you use

How complex your icons are

What sort of backgrounds you make.

When creating wireframes for an Android app, it is probably wise to work your layout into multiple sizes to make sure that your application will work across as many platforms as possible. Obviously, this will make for a longer project, but due diligence will make for a better application. It may not always be the best course to base your design exclusively on the top devices, depending on who your audience is.

You have two choices: Keep the design simple and squeaky clean (for example, don’t use gradients). Or employ a fancy background, and thus be prepared to make custom assets for each of the various resolutions and screen sizes. The variants you’ll need to take care of are shown in Table 1.

Low Density (129), ldip Medium Density (160), mdpi High Density (240), hdpi Extra High Density (320), xhdpi Small Screen QVGA (240x320) Normal Screen WQVGA400 (240x400)

WQVGA432 (240x432) HVGA (320x480) WVGA800 (480x800) 640x490 Large Screen WVGA800* (480x800) WVGA854* (480x854) Extra Large Screen 1024x600 1024x768

1280x768 1536x1152, 1920x1152,

1920x1200 2048x1536, 2560x1536,

2560x1600

*For the most part, screen sizes and densities correlate.

The bottom line is: When designing for Android, not taking the complexity of density and screen size into consideration will make the project more difficult.

UI Elements

Google has been vague with its sizing rules for UI elements, but considering the densities and screen sizes, a set of loose guideline can be helpful. The following measurements and resolutions come from having measured the navigation elements of a numerous screenshots of top-selling apps. They provide a guideline for preparing icons, tab bars, options menus and context menus.

Icons

Android is fairly rigid about icon creation. Due to the range of screen sizes and densities, it's necessary to design different sets of icons. Also, because most buttons need to be draw9patched, it is important to consider an icon as a separate asset from the button itself. Table 2 shows the icon sizes for different kinds of icons displayed at different screen densities.

Icon Type Standard Asset Sizes (in Pixels) for Generalized Screen Densities Low Density Screen (ldpi) Medium Density Screen (mdpi) High Density Screen (hdpi) Launcher 36x36 48x48 72x72 Menu 36x36 48x48 72x72 Status Bar

(Android 2.3 and later) 12w x 19h

(preferred, width may vary) 16w x 25h

(preferred, width may vary) 24w x 38h

(preferred, width may vary) Status Bar

(Android 2.2 and below) 19x19 25x25 38x38 Tab 24x24 32x32 48x48 Dialog 24x24 32x32 48x48 List View 24x24 32x32 48x48

Let's examine the various icon categories in more detail.

Launcher Icons

Android icons can be any shape because they sit within a square bounding box. (Figure 2 shows some typical examples.) The reason that Android icons can be practically any shape has to do with the fact that they fall on a grid. The box for square icons is smaller than for other icons. This was done to establish a consistent visual weight across the two types.

For each icon, there are bounding boxes for the full asset (red, in the following diagram), a smaller one for the actual icon (blue), and a smaller one yet (orange), which is the recommended size. To see how these look at the various densities, examine Figure 3.

The actual icon dimensions for the various bounding boxes are shown in Table 3.

Launcher icon dimensions for

high-density (hdpi) screens: Launcher icon dimensions for

medium-density (mdpi) screens: Launcher icon dimensions for

low-density (ldpi) screens: Full asset with bounding box:

72 x 72 pixels Full asset with bounding box:

48 x 48 pixels Full asset with bounding box:

36 x 36 pixels Icon: 60 x 60 pixels Icon: 40 x 40 pixels Icon: 30 x 30 pixels Square Icon: 56 x 56 pixels Square Icon: 38 x 38 pixels Square Icon: 28 x 28 pixels

Menu Icons

The menu icons (Figure 4) are used in the option menu, accessible by pushing the menu button. Since the icon will need to be draw9patched, it should be saved as a transparent PNG file.

The recommended sizes for these icons is shown in Table 4.