Sizing Android Visual Elements Correctly

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.

Sizing Android Visual Elements Correctly

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 likeWhat sort of gradients you useHow complex your icons areWhat 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 (240×320)      
Normal Screen WQVGA400 (240×400)
WQVGA432 (240×432)
HVGA (320×480) WVGA800 (480×800) 640×490
Large Screen   WVGA800* (480×800) WVGA854* (480×854)  
Extra Large Screen 1024×600 1024×768
1280×768
1536×1152, 1920×1152,
1920×1200
2048×1536, 2560×1536,
2560×1600

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 36×36 48×48 72×72
Menu 36×36 48×48 72×72
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)
19×19 25×25 38×38
Tab 24×24 32×32 48×48
Dialog 24×24 32×32 48×48
List View 24×24 32×32 48×48

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.

Sizing Android Visual Elements Correctly

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.

Sizing Android Visual Elements Correctly

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.

Sizing Android Visual Elements Correctly

Figure 4: Typical menu icons.

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


Menu icon dimensions for
high-density (hdpi) screens:
Menu icon dimensions for
medium-density (mdpi) screens:
Menu icon dimensions for
low-density (ldpi) screens:
Full asset: 72 x 72 pixels Full asset: 48 x 48 pixels Full asset: 36 x 36 pixels
Icon: 48 x 48pixels Icon: 32 x 32 pixels Icon: 24 x 24 pixels
Square Icon: 30 x 30 pixels Square Icon: 38 x 38 pixels Square Icon: 22 x 22 pixels

Table 4: Recommended sizes.

Leave a Reply

Your email address will not be published. Required fields are marked *

*