转贴：Icon Design Guidelines, Android 2.0

原文地址：http://androidappdocs.appspot.com/guide/practices/ui_guidelines/icon_design.html

 

Icon Design Guidelines, Android 2.0

Creating a unified look and feel throughout a user interface adds value to your product. Streamlining the graphic style will also make the UI seem more professional to users.

This document provides information to help you create icons for various parts 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.

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.

Providing Density-Specific Icon Sets

Android is designed to run on a variety of devices that offer a range of screen sizes and resolutions. When you design the icons for your application, it's important keep in mind that your application may be installed on any of those devices. As described in the Supporting Multiple Screens document, the Android platform makes it straightforward for you to 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 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 resources. For more information about how to store density-specific resources in 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:

1. Design the icons for the baseline density first (see Table 1 for the actual pixel dimensions at which to design the icons).
2. 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.
3. Test and adjust your baseline icons as needed.
4. 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.
5. 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.
6. 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.

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

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	24 x 24 px	32 x 32 px	48 x 48 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 launcher 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.

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

• Rounded corners must always be applied to the base shape and to the details of a status bar icon shown Figure 9.
• All dimensions specified are based on a 25x25 pixel artboard size with a 2 pixel safeframe.
• Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom.
• Final art must be exported as a transparent PNG file.
• Templates for creating status bar icons using Adobe Photoshop are available in the Icon Templates Pack.

Figure 9. Safeframe and corner-rounding for status bar icons. Icon size is 25x25.

Light, effects, and shadows

Status bar icons are slightly debossed, high in contrast, and pictured face-on to enhance clarity at small sizes.

Figure 10. Light, effects, and shadows for status bar icons. 1. Front part: Use fill gradient from primary color palette 2. Inner bevel: depth 100% | direction down size 0px | angle 90° | altitude 30° highlight white 75% opacity shadow black 75% opacity 3. Detail: white 4. Disabled detail: grey gradient from palette + inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° |  altitude 42° | highlight white 70% | no shadow

Color palette Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic. White r 255 | g 255 | b 255 Used for details within the icons and bevel highlight. Grey gradient 1:  r 169 | g 169 | b 169 2:  r 126 | g 126 | b 126 Used for disabled details within the icon. Fill gradient 1:  1 r 105 | g 105 | b 105 2:  r 10 | g 10 | b 10 Used as color fill. Black r 0 | g 0 | b 0 Used for bevel shadow.

Step by step In a tool like Adobe Photoshop, create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free. Add rounded corners as specified in Figure 9. Add light, effects, and shadows as specified in Figure 10. Export the icon at 25x25 as a PNG file with transparency enabled.

"Do's and don'ts"

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

Tab icon

Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected.

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

• 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.
• Final art must be exported as a 32x32 px transparent PNG file.
• Templates for creating tab icons in Adobe Photoshop are available in the Icon Templates Pack.

	Figure 11. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32.
	Figure 12. 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 13. 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 13 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 14. 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 14 for the selected state filter. Export the icon at 32x32 as a PNG file with transparency enabled.

Dialog icon

Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background.

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

• Dialog icons have a 1 pixel safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe.
• All dimensions specified on this page are based on a 32x32 pixel artboard size in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the Photoshop template.
• Final art must be exported as a transparent PNG file.
• Templates for creating dialog icons in Adobe Photoshop are available in the Icon Templates Pack.

Figure 15. Safeframe and fill gradient for dialog icons. Icon size is 32x32.

Light, effects, and shadows

Dialog icons are flat and pictured face-on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow.

Figure 16. Light, effects, and shadows for dialog icons. 1. Front part: gradient overlay | angle 90° bottom: r 223 | g 223 | b 223 top: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75% 2. Inner shadow: black | 25% opacity |  angle -90° | distance 1px | size 0px

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 32x32 px on a transparent background. Add the effects seen in Figure 16 for the proper filter. Export the icon at 32x32 as a PNG file with transparency enabled.

List view icon

List view icons look a lot like dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in aListView. Examples include the Android Market application home screen and the driving directions screen in the Maps application.

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

• A list view icon normally has a 1 px safeframe, but it is OK to use the safeframe area for the edge of the anti-alias of a round shape.
• All dimensions specified are based on a 32x32 pixel artboard size in Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
• Final art must be exported as a transparent PNG file.
• Templates for creating list view icons in Adobe Photoshop are available in the Icon Templates Pack.

Figure 17. Safeframe and fill gradient for list view icons. Icon size is 32x32.

Light, effects, and shadows

List view icons are flat and pictured face-on with an inner shadow. Built up by a light gradient and inner shadow, they stand out well on a dark background.

Figure 18. Light, effects, and shadows for list view icons. 1. Inner shadow: black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px 2. Background: black | standard system color  These icons are displayed in list views only. Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.

Step by step Add the effects seen in Figure 18 for the proper filter. Export the icon at 32x32 as a PNG file with transparency enabled. 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 32x32 px on a transparent background.

Tips for Designers

Here are some tips that you might find useful as you develop icons or other drawable assets for your application. The tips assume that you are using Photoshop or similar raster image-editing program.

Use common naming conventions for icon assets

Try to name files so that related assets will group together inside a directory when they are sorted alphabetically. In particular, it helps to use a common prefix for each icon type. For example:

Asset Type	Prefix	Example
Icons	ic_	ic_star.png
Launcher icons	ic_launcher	ic_launcher_calendar.png
Menu icons	ic_menu	ic_menu_archive.png
Status bar icons	ic_stat_sys or ic_stat_notify	ic_stat_notify_msg.png
Tab icons	ic_tab	ic_tab_recent.png
Dialog icons	ic_dialog	ic_dialog_info.png

Note that you are not required to use a shared prefix of any type — doing so is for your convenience only.

Set up a working space that organizes files for multiple densities

Developing multiple sets of assets for different screen densities means creating multiple copies of files. To help keep the multiple copies of files safe and easier to find, we recommend creating a directory structure in your working space that organizes asset files per resolution. For example:

assets/...


    ldpi/...


        _pre_production/...


            working_file.psd


        finished_asset.png


    mdpi/...


        _pre_production/...


            working_file.psd


        finished_asset.png


    hdpi/...


        _pre_production/...


            working_file.psd


        finished_asset.png

This structure parallels the density-specific structure in which you will ultimately store the finished assets in your application's resources. Because the structure in your working space is similar to that of the application, you can quickly determine which assets should be copied to each application resources directory. Separating assets by density also helps you detect any variances in filenames across densities, which is important because corresponding assets for different densities must share the same filename.

For comparison, here's the resources directory structure of a typical application:

res/...


    drawable-ldpi/...


        finished_asset.png


    drawable-mdpi/...


        finished_asset.png


    drawable-hdpi/...


        finished_asset.png

Create medium-density assets first

Since medium density is the baseline for Android, begin your designing work by creating the mdpi assets. See Table 1, above, for the actual pixel dimensions of various icon types. When possible, use vector art or paths within Photoshop layers so that it will be easier to scale the assets up or down later.

For each discreet asset, or set of like assets that share the same bounding box dimensions, create a working Photoshop file and save it in the _pre_productiondirectory. For example: ic_tabs_phone_mdpi.psd. This will make it easier to locate and edit individual assets if changes are required. It's also helpful to use a density-specific suffix in the filename for the working file, to avoid confusion when editing the files. For example: _mdpi.psd.

From the mdpi working files, save individual flattened assets to the corresponding density-specific resource directory (in this case, mdpi/) in your working space.

Create high- and low-density assets from the medium-density sources

When you are finished working with your medium-density assets, copy the working files from the your workspace's mdpi/_pre_production directory to the corresponding locations in the ldpi and hdpi directories. If any of the working files use a density-specific suffix, rename the suffix to match the intended density.

Next, open each working file in the high- and low-density directories and scale the image up or down to match the intended density. To create an hdpi asset, scale the image by 150%. To create an ldpi asset, scale the image down by 75%. To scale the images, follow these steps:

1. Open the working file in Photoshop or similar program.
2. Under the Image menu, choose Image Size.
3. On the Image Size panel, change the Width pop up menu to "percent."
4. Change the Width value to "150" for hdpi assets and "75" for ldpi assets.
5. Select the Scale Styles checkbox.
6. Select the Constrain Proportions checkbox.
7. Select the Resample Image checkbox and set the pop up menu to "Bicubic (Best for smooth gradients)."
8. Click OK.

After you scale each image, save it to the target density-specific resource directory.

If you are scaling a nine-patch image, see the section below for notes on how to handle the tick marks at the edge of the image.

After scaling, redraw bitmap layers as needed

If you scaled an image up from a bitmap layer, rather than from a vector layer, those layers may need to be redrawn manually to accommodate the higher density. For example if a 60x60 circle was painted as a bitmap for mdpi it will need to be repainted as a 90x90 circle for hdpi.

When scaling a nine-patch image, crop tick marks before scaling and replace them after

Nine-patch images include tick marks at the outer edge of the image. When you scale a nine-patch image, the tick marks are also scaled, which produces an inaccurate result. The recommended way to handle the scaling of nine-patch images is to remove the tick marks from the source image before scaling and then manually replace the tick marks at the proper size after scaling.

To more easily determine the tick marks after the working file has been scaled to a new resolution, first create a temporary duplicate flattened image which includes the tick marks:

1. Under the Select menu choose All.
2. Under the Edit menu choose Copy Merged.
3. Under the File menu choose New and then click OK on the new panel.
4. Under the Edit choose Paste.

After creating the temporary copy, go back to the working file and crop the tick marks out of the working file before scaling the image:

1. Under the Image menu, choose the Canvas Size command.
2. On the Canvas Size panel, subtract 2 pixels from the Width and Height values.
3. Set the Anchor to "Center."
4. Click OK

Scale the working file to the target density. With the working file scaled and the canvas enlarged so that the tick marks can be repainted:

1. Under the Image menu, choose the Canvas Size command.
2. On the Canvas Size panel, add 2 pixels to the Width and Height values.
3. Set the Anchor to "Center."
4. Click OK.

To determine tick marks, go back to duplicate flattened image and scale it to the target resolution.

Copy the scaled duplicate flattened image into a new layer in the working file to use as reference. Create a new layer in which to paint new tick marks at the single pixel outer edge of the image. Note tickmarks must be 100% opaque black, without transparency, and all other areas of the tick mark region must be 100% transparent, otherwise the system will not interpret the nine-patch image correctly.

Using the scaled duplicate flattened image as reference paint new tick marks in the new layer that align with the reference layer. Note round up pixels for tick marks. Any pixels that are partially opaque in the reference layer should be fully opaqe in the new layer.

Adjust stroke and drop shadow after scaling an image

While it is desirable to scale layer styles for the most part (such as for Gradient Overlay or Inner Glow), you may need to manually reset the Stroke and Drop Shadow in the scaled image to 1 px before saving, especially when scaling to hdpi.

Save nine-patch images with the appropriate filename suffix

If an asset is a nine-patch asset (with tick marks), be sure to save the asset in PNG format with a filename that includes the .9.png suffix. If the filename does not use the suffix, the system won't recognize the image as a nine-patch asset and won't resize it as intended.

When saving image assets, remove the Photoshop header

To help keep each image asset as small as possible, make sure to remove the Photoshop headers from the file. To remove the Photoshop header, follow these steps:

1. Under the File menu, choose the Save for Web & Devices command
2. On the "Save for Web & Devices" panel, set the Preset pop-up to "PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the Transparency box (if the image uses transparency)
3. Select Save.

Make sure that corresponding assets for different densities use the same filenames

Corresponding icon asset files for each density must use the same filename, but be stored in density-specific resource directories. This allows the system to look up and load the proper resource according to the screen characteristics of the device. For this reason, make sure that the set of assets in each directory is consistent and that the files do not use density-specific suffixes. For more information about density-specific resources and how the system uses them to meet the needs of different devices, see Supporting Multiple Screens.

Using the Android Icon Templates Pack

The Android Icon Templates Pack is a collection of template designs, filters, and settings that make it easier for you to create icons that conform to the general specifications given in this document. We recommend downloading the template pack archive before you get started with your icon design.

The icon templates are provided in Adobe Photoshop and Adobe Illustrator file formats, 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 Icon Templates Pack archive using the link below:

Download the Icon Templates Pack »

Icon appendix

Standard launcher icons

Shown below are examples of launcher icons used by Android applications. The icons are provided for your reference only — please do not reuse these icons in your applications.. 

Standard menu icons

Shown below are standard menu icons that are used in the Android system. Because these resources can change between platform versions, you should not reference the system's copy of the resources. If you want 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 list below is not intended to be complete.

Add	Call	Camera	Clear / Close / Cancel / Discard	Compass	Delete	Directions
Edit	Gallery	Help	Info / details	Map mode	My Location	More
Preferences	Rotate	Save	Send	Search	Share	Upload
View	Zoom

Standard status bar icons

Shown below are standard status bar icons that are used in the Android platform. Because these resources can change between platform versions, you should not reference the system's copy of the resources. If you want 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 list below is not intended to be complete.

Bluetooth	Email	IM	Voicemail	Warning	Call	Call forward
Call on hold	Missed call