1page.title=List View 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 32<div class="note design"> 33<p><strong>New Guides for App Designers!</strong></p> 34<p>Check out the new documents for designers at <strong><a 35href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines 36for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p> 37</div> 38 39 40<p>List view icons look a lot like dialog icons, but they use an inner shadow 41effect where the light source is above the object. They are also designed to be 42used only in a {@link android.widget.ListView}. Examples include the Settings 43application.</p> 44 45<p>As described in <a href="icon_design.html#icon-sets">Providing 46Density-Specific Icon Sets</a>, you should create separate icon sets for low-, 47medium-, and high-density screens. This ensures that your icons will display 48properly across the range of devices on which your application can be installed. 49See Table 1 for a listing of the recommended finished icon sizes for each 50density. Also, see <a href="icon_design.html#design-tips">Tips for Designers</a> 51for suggestions on how to work with multiple sets of icons.</p> 52 53 54<p class="table-caption"><strong>Table 1.</strong> Summary of finished list view 55icon dimensions for each of the three generalized screen densities.</p> 56 57<table> 58 <tbody> 59 <tr> 60 <th></th> 61 <th> 62 <code>ldpi</code> (120 dpi)<br> 63 <small style="font-weight: normal">(Low density screen)</small> 64 </th> 65 <th> 66 <code>mdpi</code> (160 dpi)<br> 67 <small style="font-weight: normal">(Medium density screen)</small> 68 </th> 69 <th> 70 <code>hdpi</code> (240 dpi)<br> 71 <small style="font-weight: normal">(High density screen)</small> 72 </th> 73 <th> 74 <code>xhdpi</code> (320 dpi)<br> 75 <small style="font-weight: normal">(Extra-high density screen)</small> 76 </th> 77 </tr> 78 <tr> 79 <th style="background-color:#f3f3f3;font-weight:normal"> 80 List View Icon Size 81 </th> 82 <td> 83 24 x 24 px 84 </td> 85 <td> 86 32 x 32 px 87 </td> 88 <td> 89 48 x 48 px 90 </td> 91 <td> 92 64 x 64 px 93 </td> 94 </tr> 95 </tbody> 96</table> 97 98<p><strong>Final art must be exported as a transparent PNG file. Do not include 99a background color</strong>.</p> 100 101<p>Templates for creating icons in Adobe Photoshop are available in the <a 102href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon 103Templates Pack</a>.</p> 104 105<h2 id="icon1">All Android Versions</h2> 106 107<p>The following guidelines describe how to design dialog icons for all versions 108of the Android platform.</p> 109 110<h3 id="structure1">Structure</h3> 111 112<ul> 113<li>A list view icon normally has a 1 px safeframe, but it is OK to use the 114safeframe area for the edge of the anti-alias of a round shape.</li> 115 116<li>All dimensions specified are based on a 32x32 pixel artboard size in 117Photoshop. Keep 1 pixel of padding around the bounding box inside the template. 118</li> 119 120</ul> 121 122<table class="image-caption"> 123<tr> 124<td class="image-caption-i"> 125 <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list 126view icon 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 list view 131icons. Icon size is 32x32.</p> 132 </div> 133</td> 134</tr> 135</table> 136 137<h3 id="style1">Light, effects, and shadows</h3> 138 139<p>List view icons are flat and pictured face-on with an inner shadow. Built up 140by a light gradient and inner shadow, they stand out well on a dark 141background.</p> 142 143<table class="image-caption"> 144<tr> 145<td class="image-caption-i"> 146 <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view 147of light, effects, and shadows for list view 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 list view 152icons.</p> 153 <div class="image-caption-nested"> 154 <table> 155 <tr><td><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr> 156 <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr> 157 <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr> 158 </table> 159 </div> 160 </div> 161</td> 162</tr> 163</table> 164 165<table> 166<tr> 167<td style="border:0"> 168 169<h4 id="steps1">Step by step</h4> 170 171<ol> 172<li>Add the effects seen in Figure 2 for the proper filter.</li> 173<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> 174<li>Create the basic shapes using a tool like Adobe Illustrator.</li> 175<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image 176of 32x32 px on a transparent background. </li> 177</ol> 178 179</td> 180</tr> 181</table> 182
