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.
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 |
The Tab Bar
Despite considerable searching, I have not found a pixel size for the tabs in a tab bar. (Figure 6)
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.
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 |
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.
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
— 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.
