Skip to content

Most visited

Recently visited

navigation

Dialog Icons

New Guides for App Designers!

Check out the new documents for designers at Android Design, including more guidelines for Iconography.

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, you should create separate icon sets for low-, medium-, 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.

Table 1. Summary of finished dialog icon dimensions for each of the three generalized screen densities.

ldpi (120 dpi)
(Low density screen)
mdpi (160 dpi)
(Medium density screen)
hdpi (240 dpi)
(High density screen)
xhdpi (320 dpi)
(Extra-high density screen)
Dialog Icon Size 24 x 24 px 32 x 32 px 48 x 48 px 64 x 64 px

Final art must be exported as a transparent PNG file. Do not include a background color.

Templates for creating icons in Adobe Photoshop are available in the Icon Templates Pack.

All Android Versions

The following guidelines describe how to design dialog icons for all versions of the Android platform.

Structure

A view of dialog
icon structure.

Figure 1. 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.

A view of light,
effects, and shadows for dialog icons.

Figure 2. 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

  1. Create the basic shapes using a tool like Adobe Illustrator.
  2. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.
  3. Add the effects seen in Figure 2 for the proper filter.
  4. Export the icon at 32x32 as a PNG file with transparency enabled.
This site uses cookies to store your preferences for site-specific language and display options.

Hooray!

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.