1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
page.title=Dialog Icons
excludeFromSuggestions=true
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon1">All Android Versions</a>
<ol>
<li><a href="#structure1">Structure</a></li>
<li><a href="#style1">Light, effects, and shadows</a></li>
</ol>
</li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<div class="note design">
<p><strong>New Guides for App Designers!</strong></p>
<p>Check out the new documents for designers at <strong><a
href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines
for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p>
</div>
<p>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.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, 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 <a href="icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p class="table-caption"><strong>Table 1.</strong> Summary of finished dialog
icon dimensions for each of the three generalized screen densities.</p>
<table>
<tbody>
<tr>
<th></th>
<th>
<code>ldpi</code> (120 dpi)<br>
<small style="font-weight: normal">(Low density screen)</small>
</th>
<th>
<code>mdpi</code> (160 dpi)<br>
<small style="font-weight: normal">(Medium density screen)</small>
</th>
<th>
<code>hdpi</code> (240 dpi)<br>
<small style="font-weight: normal">(High density screen)</small>
</th>
<th>
<code>xhdpi</code> (320 dpi)<br>
<small style="font-weight: normal">(Extra-high density screen)</small>
</th>
</tr>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
Dialog Icon Size
</th>
<td>
24 x 24 px
</td>
<td>
32 x 32 px
</td>
<td>
48 x 48 px
</td>
<td>
64 x 64 px
</td>
</tr>
</tbody>
</table>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<h2 id="icon1">All Android Versions</h2>
<p>The following guidelines describe how to design dialog icons for all versions
of the Android platform.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>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.</li>
<li>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.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog
icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 1. </strong>Safeframe and fill gradient for dialog icons.
Icon size is 32x32.</p>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>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.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light,
effects, and shadows for dialog icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Light, effects, and shadows for dialog
icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
<tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0;">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 32x32 px on a transparent background. </li>
<li>Add the effects seen in Figure 2 for the proper filter.</li>
<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>
|
