Channels ▼
RSS

Embedded Systems

Sizing Android Visual Elements Correctly


Tab Icons

Tab icons (Figure 5) are a lot like menu icons, except that two assets need to be created for the tab bar so as to differentiate between active and inactive icons. The recommended sizes are slightly different as well.

Figure 5: Tab icons.

The recommended sizes for tab icons are shown in Table 5.

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: 48 x 48 pixels Full asset: 32 x 32 pixels Full asset: 24 x 24
Icon: 42 x 42 pixels Icon: 28 x 28 pixels Icon: 22 x 22 pixels

Table 5: Recommendations for tab icons.

The Tab Bar

Despite considerable searching, I have not found a pixel size for the tabs in a tab bar. (Figure 6)

Figure 6: Typical tabs for an Android app.

After measuring a sampling of screens, our team created these recommendation:

  • HDPI: 480x96
  • MDPI: 320x64
  • LDPI: 240x48

Status Bar Icons

Status Bar icons (Figure 7) represent notifications from your app.

Figure 7: Status bar icons.

Status bar icons have changed since Android v. 2.3 (Gingerbread), so it is important to create assets, not just for the different densities, but also for older versions of the operating system. Table 6 contains the recommended sizes for these icons.

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: 24 x 38 pixels Full asset: 16 x 25 pixels Full asset: 12 x 19
Icon: 24 x 24 pixels Icon: 16 x 16 pixels Icon: 12 x 12 pixels

Table 6: Recommendations for status bar icons.

Dialog Icon

Unlike the iPhone alert, the Android dialog is customizable. Below are the guidelines for building dialog icons. In addition, dialog icon assets use a safe frame to keep them aligned rather than employing bounding boxes. The safe frame is 1-pixel wide. (Note: Status bar icons for API 2.2 and earlier also rely on a simple safe frame, as it is recommended that the icons maintain a square shape.)

  • HDPI: 48 x 48 pixels
  • MDPI: 32 x 32 pixels
  • LDPI: 24 x 24 pixels

The Options Menu

The option menu (Figure 8) stores activities. From it, you do such things as toggle settings, save data, logout, and so forth.

Figure 8: A typical options menu..

The width is adjustable based on the number of buttons and the size of the screen, and although it is customizable with skins, the size does not change.

  • HDPI - 100x
  • MDPI - 66x
  • LDPI - 50x

The Context Menu

The Context menu is similar to a "right click" on a desktop. The user will touch and hold to bring up the menu, which will provide commands that pertain to the selected activity. Context menus are customizable, but design and development should coordinate on the cost/value of customization.

While the width of the cells are adjustable, the standard heights are :

  • HDPI: 100 pixels
  • MDPI: 66 pixels
  • LDPI: 50 pixels

Summary

Designing an Android app requires constant collaboration between design and development. Because many assets can be created with XML, the design responsibility will fall to both parties. With a common set of guidelines, the dialog between design and development is greatly facilitated.

References

Android Developer Resources.


— Adam Beckley works on Android applications at Mutual Mobile, a mobile strategy company based in Austin, Texas. Some figures and some table data for this article were taken from the Android's own developer guidelines.


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