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