Channels ▼
RSS

Mobile

Sizing Android Visual Elements Correctly


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 1024x768
1280x768
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.

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.

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

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.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video