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