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.
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:
res/drawable-mdpi/
directory (or in the default res/drawable/ directory),res/drawable-hdpi/ directory,
andres/drawable-ldpi/
directory.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 | ||
|---|---|---|---|
|
|
|
|
|
| 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 |
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.
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:
Simple and iconic:
Tactile and textured:
Forward-facing and top-lit:
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.
Below are some "do and don't" examples to consider when creating icons for your application.
Android Launcher icons are...
|
Android Launcher icons are not...
|
Figure 2. Side-by-side examples of "do's and don'ts" for Android launcher icons.
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.
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.
|
|
|
|
|
Figure 6. Icon sizing and positioning inside the bounds of the icon asset. |
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:
|
|
Shadow for HVGA (medium density) sreens:
|
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 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.
|
Figure 7. Safeframe and corner-rounding for menu icons. Icon size is 48x48. |
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.
|
Color palette
|
Step by step
|
Below are some "do and don't" examples to consider when creating menu icons for your application.
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.
|
Figure 9. Safeframe and corner-rounding for status bar icons. Icon size is 25x25. |
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.
|
Color paletteOnly status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.
|
Step by step
|
Below are some "do and don't" examples to consider when creating status bar icons for your application.
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.
|
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 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.
|
Step by step
|
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.
|
Color palette
|
Step by step
|
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.
|
Figure 15. Safeframe and fill gradient for dialog icons. Icon size is 32x32. |
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.
|
Step by step
|
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 a ListView. 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.
|
Figure 17. Safeframe and fill gradient for list view icons. Icon size is 32x32. |
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.
|
|||||||||
Step by step
|
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.
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.
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
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_production directory. 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.
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:
hdpi assets and "75" for ldpi assets.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.
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.
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:
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:
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:
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.
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.
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.
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:
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.
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 »
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..
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 |
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 |