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 Settings
application.
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 list view
icon dimensions for each of the three generalized screen densities.
Low density screen (ldpi)
|
Medium density screen (mdpi)
|
High density screen (hdpi)
|
24 x 24 px
|
32 x 32 px
|
48 x 48 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 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.
|
Figure 1. 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 2. 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 2 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.
|
↑ Go to top
← Back to Icon Design Guidelines