Tab Icons

In this document

Providing Icons for Two Tab States
Android 2.0 and Later
Android 1.6 and Earlier

Providing Icons for Two Tab States

Tab icons should have two states: unselected and selected. To provide icons with multiple states, developers must create a state list drawable for each an icon, which is an XML file that lists which image to use for the different UI states.

For example, for a tab widget with tabs named 'Friends' and 'Coworkers', you can use a directory structure similar to the one below:

res/...
    drawable/...
        ic_tab_friends.xml
        ic_tab_coworkers.xml
    drawable-ldpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-mdpi/...
        ic_tab_friends_selected.png
        ic_tab_friends_unselected.png
        ic_tab_coworkers_selected.png
        ic_tab_coworkers_unselected.png
    drawable-hdpi/...
        ...
    drawable-ldpi-v5/...
        ...
    drawable-mdpi-v5/...
        ...
    drawable-hdpi-v5/...
        ...

The contents of the XML files listed above should reference the corresponding selected and unselected icon drawables. For example, below is the code for ic_tab_friends.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- selected state -->
    <item android:drawable="@drawable/ic_tab_friends_selected"
          android:state_selected="true"
          android:state_pressed="false" />
    <!-- unselected state (default) -->
    <item android:drawable="@drawable/ic_tab_friends_unselected" />
</selector>

Android 2.0 and Later

The following guidelines describe how to design tab icons for Android 2.0 (API Level 5) and later.

Size and positioning

Tab icons should use simple shapes and forms and those must be scaled and positioned inside the final asset.

Figure 1 illustrates various ways of positioning the icon inside the asset. You should size the icons smaller than the actual bounds of the asset.

In order to indicate the recommended size for the icon, each example in Figure 1 includes three different guide rectangles:

The red box is the bounding box for the full asset.
The blue box is the recommended bounding box for the actual icon. The icon box is sized smaller than the full asset box to allow for special icon treatments.
The orange box is the recommended bounding box for the actual icon when the content is square. The box for square icons is smaller than that for other icons to establish a consistent visual weight across the two types.

Tab icon dimensions for high-density (`hdpi`) screens: Full Asset: 48 x 48 px Icon: 42 x 42 px
Tab icon dimensions for medium-density (`mdpi`) screens: Full Asset: 32 x 32 px Icon: 28 x 28 px
Tab icon dimensions for low-density (`ldpi`) screens: Full Asset: 24 x 24 px Icon: 22 x 22 px
	Figure 1. Tab icon sizing and positioning inside the bounds of the icon asset.

Style, colors, and effects

Tab icons are flat, matte, and pictured face-on.

Tab icons should have two states: selected and unselected.

Figure 2. Style and effects for unselected tab icons.

Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.

1.	Fill color:	`#808080`
2.	Inner content:	Inner content should subtract from the outer shape and consist purely of transparent pixels.

Figure 3. Style and effects for selected tab icons.

Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.

1.	Fill color:	`#FFFFFF`
2.	Inner content:	Inner content should subtract from the outer shape and consist purely of transparent pixels.
3.	Outer glow:	`#000000`, 25% opacity size 3px

Do's and don'ts

Below are some "do and don't" examples to consider when creating tab icons for your application.

Example icons

Shown below are standard high-density tab icons that are used in the Android platform.

Warning: Because these resources can change between platform versions, you should not reference the system's copy of the resources. If you want to use any icons or other internal drawable resources, you should store a local copy of those icons or drawables in your application resources, then reference the local copy from your application code. In that way, you can maintain control over the appearance of your icons, even if the system's copy changes. Note that the grid below is not intended to be complete.

Android 1.6 and Earlier

The following guidelines describe how to design tab icons for Android 1.6 (API Level 4) and earlier.

Structure

Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow.
Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons.
Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape.
All dimensions specified on this page are based on a 32x32 px artboard size. Keep 1 px of padding around the bounding box inside the Photoshop template.

	Figure 3. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32.
	Figure 4. Safeframe and fill gradient for tab icons in selected state. Icon size is 32x32.

Unselected tab icon

Light, effects, and shadows

Unselected tab icons look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.

Figure 5. Light, effects, and shadows for unselected tab icons.

1.	Front part:	gradient overlay \| angle 90° bottom color: r 223 \| g 223 \| b 223 top color: r 249 \| g 249 \| b 249 bottom color location: 0% top color location: 75%
2.	Inner shadow:	black \| 10 % opacity \| angle 90° distance 2px \| size 2px
3.	Inner bevel:	depth 1% \| direction down \| size 0px \| angle 90° \| altitude 10° highlight white 70% opacity shadow black 25% opacity

Step by step

Create the basic shapes using a tool like Adobe Illustrator.
Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.
Add the effects seen in Figure 5 for the unselected state filter.
Export the icon at 32x32 as a PNG file with transparency enabled.

Selected tab icon

The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow.

Figure 6. Light, effects, and shadows for selected tab icons.

1.	Front part:	Use fill gradient from color palette.
2.	Inner shadow:	black \| 20% opacity \| angle 90° \| distance 2px \| size 2px
3.	Inner bevel:	depth 1% \| direction down \| size 0px \| angle 90° \| altitude 10° highlight white 70% opacity shadow black 25% opacity

Color palette

Fill gradient
1: r 163 | g 163 | b 163
2: r 120 | g 120 | b 120
Used as color fill on unselected tab icons.

Step by step

Create the basic shape using a tool like Adobe Illustrator.
Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 px artboard with a transparent background.
Add the effects seen in Figure 6 for the selected state filter.
Export the icon at 32x32 as a PNG file with transparency enabled.

↑ Go to top

← Back to Icon Design Guidelines

Android Basics Einführung in Android Información básica sobre Android Présentation d'Android Nozioni di base su Android Android の基本 Android 基础知识 Android 簡介

Framework Topics Framework-Themen Temas sobre el framework Thèmes relatifs au framework Argomenti relativi al framework フレームワークトピック框架主题架構主題

Android Market Topics

Developing Entwicklung Desarrollo Développement Sviluppo 開発开发開發

Publishing Veröffentlichung Publicación Publication Pubblicazione 公開发布發佈

Best Practices Bewährte Verfahren Prácticas recomendadas Meilleures pratiques Best practice ベストプラクティス最佳实践最佳實務

Web Applications

Appendix Anhang Apéndice Annexes Appendice 付録附录附錄

Tab Icons

In this document

See also

Providing Icons for Two Tab States