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