Redirecting...

@@ -15,37 +17,27 @@ page.title=Icon Design Guidelines, Android 2.0

In this document

Launcher icon
Menu icon
Status bar icon
Tab icon
Dialog icon
List view icon
Tips for Designers
Using the Icon Templates Pack
Icon appendix -
-
Providing Density-Specific Icon Sets
Tips for Designers

Older versions

Topics

Downloads

Android Icon +Templates Pack, v2.3 »
Android Icon Templates Pack, v2.0 »

Android Icon @@ -72,9 +64,62 @@ of your application’s user interface that match the general styles used by the Android 2.x framework. Following these guidelines will help you to create a polished and unified experience for the user.

The following documents discuss detailed guidelines for the common types of +icons used throughout Android applications:

+ +

Launcher Icons: A Launcher icon is a graphic that represents your application on the + device's Home screen and in the Launcher window.
Menu Icons: Menu icons are graphical elements placed in the options menu shown to + users when they press the Menu button.
Status Bar Icons: Status bar icons are used to represent notifications from your + application in the status bar.
Tab Icons: Tab icons are graphical elements used to represent individual tabs in a + multi-tab interface.
Dialog Icons: Dialog icons are shown in pop-up dialog boxes that prompt the user for + interaction.
List View Icons: List view icons are used with {@link android.widget.ListView} to + graphically represent list items. An example is the Settings application.

To get started creating your icons more quickly, you can download -the Android Icon Templates Pack. For more information, see -Using the Android Icon Template Pack.

+the Android Icon Templates Pack.

+ + + + + +

Using the Android Icon Templates Pack

+ +

The Android Icon Templates Pack is a collection of template designs, +textures, and layer styles that make it easier for you to create icons that +conform to the guidelines given in this document. We recommend downloading the +template pack archive before you start designing your icons.

+ +

The icon templates are provided in the Adobe Photoshop file format (.psd), +which preserves the layers and design treatments we used when creating the +standard icons for the Android platform. You can load the template files into +any compatible image-editing program, although your ability to work directly +with the layers and treatments may vary based on the program you are using.

+ +

You can obtain the latest Icon Templates Pack archive using the link below: +

+ +

Download the Icon Templates +Pack for Android 2.3 » + +

For previous versions of the Icon Templates Pack, see the Downloads +section in the box at the top-right corner of this page.

+ + +

Providing Density-Specific Icon Sets

@@ -89,7 +134,7 @@ provide icons in such a way that they will be displayed properly on any device, regardless of the device's screen size or resolution.

In general, the recommended approach is to create a separate set of icons for -each of the three generalized screen densities listed in Table 1, below, then +each of the three generalized screen densities listed in Table 1. Then, store them in density-specific resource directories in your application. When your application runs, the Android platform will check the characteristics of the device screen and load icons from the appropriate density-specific @@ -98,59 +143,27 @@ your application, see Resource directory qualifiers for screen size and density.

The baseline screen density for Android devices is medium -(mdpi). For this reason, a recommended approach to creating icon -sets for multiple screen densities is to:

- -

Design the icons for the baseline density first (see Table 1 for the actual -pixel dimensions at which to design the icons).
Place the icons in the application's default drawable resources, then run -the application on an Android Virtual Device (AVD) or an HVGA device such as the -T-Mobile G1.
Test and adjust your baseline icons as needed.
When you are satisfied with the icons you've developed at the baseline -density, create scaled copies for the other densities. - -
- Scale the baseline icons up 150% to create the high-density assets.
- Scale the baseline icons down 75% to create the low-density assets.
Place the icons in density-specific resource directories in your -application. For example: -
- Medium-density assets go in a res/drawable-mdpi/ -directory (or in the default res/drawable/ directory),
- High-density assets go in a res/drawable-hdpi/ directory, -and
- Low-density assets go in a res/drawable-ldpi/ -directory.
Test and adjust the high- and low-density icons if needed

For tips on how to create and manage icon sets for multiple densities, see -Tips for Designers.

+Tips for Designers.

Table 1. Summary of +

Table 1. Summary of finished icon dimensions for each of the three generalized screen densities, by icon type.

- +

- + - @@ -159,14 +172,14 @@ Generalized Screen Densities - - - @@ -175,1057 +188,113 @@ Generalized 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 x 36 px	+	48 x 48 px	+	72 x 72 px
Menu	+	36 x 36 px	+	48 x 48 px	+	72 x 72 px
- Status Bar + Status Bar (Android 2.3 and later)	- 24 x 24 px +	+ 12w x 19h px + (preferred, width may vary)	- 32 x 32 px +	+ 16w x 25h px + (preferred, width may vary)	- 48 x 48 px +	+ 24w x 38h px + (preferred, width may vary) +
+ Status Bar (Android 2.2 and below) +	+ 19 x 19 px +	+ 25 x 25 px +	+ 38 x 38 px
Tab	+	24 x 24 px	+	32 x 32 px	+	48 x 48 px
Dialog	+	24 x 24 px	+	32 x 32 px	+	48 x 48 px
List View	+	24 x 24 px	+	32 x 32 px	+	48 x 48 px

Launcher Icon

- -

A Launcher icon is a graphic that represents your application on the device’s -Home screen and in the Launcher window.

- -

The user opens the Launcher by touching the icon at the bottom of the Home -screen. The Launcher opens and exposes the icons for all of the installed -applications, which are arranged in a grid. The user selects an application and -opens it by touching the Launcher icon or by means of any hardware navigation -controls available, such as a trackball or d-pad.

- -

The user can also drag an icon out of the Launcher window and onto the Home -screen itself, for more convenient access to the application. In this case, the -system displays your application's Launcher icon against the Home screen -wallpaper, rendering it at the same dimensions as it is rendered inside the -Launcher.

- -

The system manages the scaling of all Launcher icons so that they rendered at -a uniform height and width. The actual pixel dimensions of the rendered Launcher -icons on any given device varies, based on the size and pixel-density -characteristics of the device's screen. To ensure the best possible rendering -for your icons, supply versions of the icons that are designed for low, medium, -and high density screens. For information, see Providing Density-Specific Icon Sets, above, or Tips for Designers, below.

- -

Style

- -

The launcher icons that you create should follow the general style principles -below. The guidelines aren't meant to restrict what you can do with your icons, -but rather they are meant to emphasize the common approaches that your icons can -share with others on the device. Figure 1, at right, provides examples.

- -

- Figure 1. Illustration of Launcher icon style.

- -

Clean and contemporary:

- -

Launcher icons should be current and sometimes quirky, but they should not -appear aged or ragged. You should avoid overused symbolic metaphors whenever -possible.

- -

Simple and iconic:

Android Launcher icons are caricatural in nature; your icons should be -highly simplified and exaggerated, so that they are appropriate for use at small -sizes. Your icons should not be overly complicated.
Try featuring a single part of an application as a symbolic -representation of the whole (for example, the Music icon features a speaker). -
Consider using natural outlines and shapes, both geometric and organic, -with a realistic (but never photorealistic) rendering.
Your icons should not present a cropped view of a larger -image.

- -

Tactile and textured:

Icons should feature non-glossy, textured material. See - Materials and colors, below, for more - information.

- -

Forward-facing and top-lit:

New for Android 2.0 and later platforms: Android Launcher -icons should be forward-facing, with very little perspective, and they -should be top-lit.

- -Additionally, note all icons will have separate text labels, so rather than -working to include embedded text in the design of of your icons, focus your -efforts on the icon's visual distinctiveness and memorability instead.

- -

To look at more examples of the Launcher icons used by built-in Android -applications, see Standard Launcher Icons in the -Icons Appendix of this document.

- - - -

Do's and Don'ts

- -

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

- - - - - - - - -

- -

Android Launcher icons are...

- -

Modern, minimal, matte, tactile, and textured
Forward-facing and top-lit, whole, limited in color -palette

- -

Android Launcher icons are not...

- -

Antique, over-complicated, glossy, flat vector
Rotated, Cropped, Over-Saturated

- -

-Figure 2. Side-by-side examples of "do's and don'ts" for -Android launcher icons.

- -

Materials and colors

- -

Launcher icons should make use of tactile, top-lit, textured materials. Even -if your icon is just a simple shape, you should try to render in a way that -makes it appear to be sculpted from some real-world material.

- -

The Launcher icons for the platform's default applications use the set of -materials shown in Figure 3, below. Your icons can use these materials or you -can create new materials.

- -

Android launcher icons usually consist of a smaller shape within a -larger base shape and combine one neutral and one primary color. Icons may -use a combination of neutral colors but should maintain a fairly high level of -contrast. Icons should not use more than one primary color per icon, if -possible.

- -

Launcher icons should use a limited color palette that includes a range -of neutral and primary colors. The icons should not be over-saturated.

- -

The recommended color palette to use for Launcher icons is shown in Figure 4. -You can use elements of the palette for both the base color and the highlight -color. You can use the colors of the palette in conjunction with a -white-to-black vertical linear gradient overlay. This creates the impression -that the icon is lit from above and keeps the color less saturated.

- - - -

-Figure 3. Example materials that you can use to create -your icons.

- -

-Figure 4. Examples of materials combined with base -and highlight colors from the recommended palette.

- - -

When you combine the materials above with a color highlight from the -recommended pallete, you can create materials combinations such as those shown -in Figure 5. To get you started, the icons pack -includes a Photoshop template file (Launcher-icon-template.psd) -that provides all of the default materials, colors, and gradients.

- -

-Figure 5. Recommended color palette for icons.

- - -

Size and positioning

- -

Launcher icons should use a variety of shapes and forms and those must be -scaled and positioned to create consistent visual weight.

- -

Launcher icons should use a variety of shapes and forms and those must be -scaled and positioned inside the asset to create consistent visual weight with -other

- -

Figure 6 illustrates various ways of positioning the icon inside the asset. -As detailed in the table below, you should size the icons smaller than the -actual bounds of the asset, to create a consistent visual weight and to -allow for the inclusion of shadows. If your icon is square or nearly square, it -should be scaled even smaller.

- - -

The bounding box for the full asset is shown in red.
The recommended bounding box for the actual icon itself is shown in blue. -The icon box is sized smaller than the full asset box so that there is space to -include shadows and special icon treatments.
The recommended bounding box for an icon that is square is shown in orange. -The box for square icons is smaller than that for other icons to establish a -consistent visual weight across the two types.

- - - - - - - - - - - - - - - - - - -

- - Icon dimensions for high-density (`hdpi`) screens: - - Full Asset: 72 x 72 px - Icon: 60 x 60 px - Square Icon: 56 x 56 px - - - -	- -
- - Icon Dimensions for medium-density (`mdpi`) screens: - - Full Asset: 48 x 48 px - Icon: 40 x 40 px - Square Icon: 38 x 38 px - - - -	- -
- - Icon Dimensions for low-density (`ldpi`) screens: - - Full Asset: 36 x 36 px - Icon: 30 x 30 px - Square Icon: 28 x 28 px - - - -	- - - Figure - 6. Icon sizing and positioning inside the bounds of the - icon asset. -

- - - -

Using the Launcher Icon Template

- -

Included in the Android Icon Templates Pack 2.0 is a template containing -palettes for default icon materials and colors. The template is provided in .psd -format for Adobe Photoshop or similar raster image editor.

- -

To get started, first download the Android Icon -Templates Pack 2.0 ».

- -

Once you've downloaded the pack, unzip it and open the file -Launcher-icon-template.psd in Adobe Photoshop or similar raster -image editing program. Notice the palettes for materials and colors. You can -use as the template as a starting point for creating your Launcher icons.

- -

After you create your icon, you can add a shadow effect according to the -specification below, as appropriate for the size of image you are creating.

- - - - - - - - - - - - - -

Shadow for WVGA (high density) sreens:

Effect: Drop Shadow
Color: #000000
Blend Mode: Multiply
Opacity: 75%
Angle: 90°
Distance: 2px
Spread: 0%
Size: 5px

- - -

Shadow for HVGA (medium density) sreens:

Effect: Drop Shadow
Color: #000000
Blend Mode: Multiply
Opacity: 75%
Angle: 90°
Distance: 1px
Spread: 0%
Size: 3px

- - -

- -

When the shadow is added and the icon is complete, export it as a PNG file -with transparency enabled, ensuring that you size the icon at 72 x 72px for -high-density screens and 48 x 48px for medium density screens. For more -information about why you should provide different Launcher assets for high-, -medium, and low-density screens, see Supporting Multiple -Screens.

- - - -

Menu icon

- -

Menu icons are graphical elements placed in the pop-up menu shown to users -when they press the Menu button. They are drawn in a flat-front perspective. -Elements in a menu icon must not be visualized in 3D or perspective.

- -

As described in Providing Density-Specific Icon -Sets, above, you should create separate icon sets for low-, normal, and -high-density screens. This ensures that your icons will display properly across -the range of devices on which your application can be installed. See Table 1 for a listing of the recommended finished icon -sizes for each density. Also, see Tips for Designers -for suggestions on how to work with multiple sets of icons.

- -

Structure

- -

In order to maintain consistency, all menu icons must use the same -primary palette and the same effects. For more information, see the -menu icon color palette.
Menu icons should include rounded corners, but only when logically -appropriate. For example, in Figure 7 the logical place for rounded corners is -the roof and not the rest of the building.
All dimensions specified on this page are based on a 48x48 pixel artboard -size with a 6 pixel safeframe.
The menu icon effect (the outer glow) described in Light, effects, and shadows can overlap the 6px safeframe, -but only when necessary. The base shape must always stay inside the -safeframe.
Final art must be exported as a transparent PNG file.
Templates for creating menu icons in Adobe Photoshop are available in the -Icon Templates Pack.

- - - - - - -

- -	- - Figure 7. Safeframe and corner-rounding for menu -icons. Icon size is 48x48. - -

- - -

Light, effects, and shadows

- -

Menu icons are flat and pictured face on. A slight deboss and some other -effects, which are shown below, are used to create depth.

- - - - - - -

Figure 8. Light, effects, and shadows for menu icons.

- - - - - -

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

- - - - - - - -

- -

Color palette

- - - - - - - - - - - - - - - - - -

	White r 255 \| g 255 \| b 255 Used for outer glow and bevel highlight.
	Fill gradient 1: r 163 \| g 163 \| b 163 2: r 120 \| g 120 \| b 120 Used as color fill.
	Black r 0 \| g 0 \| b 0 Used for inner shadow and bevel shadow.

- -

Step by step

- -

Create the basic shapes using a tool like Adobe Illustrator.
Import the shape into a tool like Adobe Photoshop and scale to fit an image -of 48x48 px on a transparent background. Mind the safeframe.
Add the effects seen as described in Figure 8.
Export the icon at 48x48 as a PNG file with transparency enabled.

- -

"Do's and don'ts"

- -

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

- - -

Status bar icon

- -

Status bar icons are used to represent notifications from your application in -the status bar. Graphically, they are very similar to menu icons, but are -smaller and higher in contrast.

- -