Embedded Systems

Sizing Android Visual Elements Correctly

By Adam Beckley, June 14, 2011

Right-size icons, tables, and buttons for all form factors and resolutions

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.

Figure 1: The range of screen sizes and resolutions on current Android devices.

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

1024x7681280x768

1536x1152, 1920x1152,1920x1200

2048x1536, 2560x1536, 2560x1600

Table 1: Regardless of the actual screen size or density, applications are programmed into these four categories.

*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

Table 2: Standard icon sizes.

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.

Figure 2: Standard Android icons.

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.

Figure 3: The various bounding boxes and how they fit icons.

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

Table 3: Icon dimensions.

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.

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!