1 page.title=Action Bar 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="#icon11">Android 3.0 and Later</a> 13 <ol> 14 <li><a href="#size11">Size and format</a></li> 15 <li><a href="#style11">Style, colors, and effects</a></li> 16 <li><a href="#examples11">Example icons</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 25 Screens</a></li> 26 <li><a href="{@docRoot}guide/topics/ui/actionbar.html">Using the Action Bar</a></li> 27 </ol> 28 29 </div> 30 </div> 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 35 href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines 36 for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p> 37 </div> 38 39 40 <p>Action Bar icons are graphical elements placed in the <a 41 href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> representing individual action 42 items.</p> 43 44 <p>As described in <a 45 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific 46 Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple 47 Screens</a>, you should create separate icons for all generalized screen densities, including low-, 48 medium-, high-, and extra-high-density screens. This ensures that your icons will display properly 49 across the range of devices on which your application can be installed. See <a 50 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a> 51 for suggestions on how to work with multiple sets of icons.</p> 52 53 <p><strong>Final art must be exported as a transparent PNG file. Do not include 54 a background color</strong>.</p> 55 56 <p>Templates for creating icons in Adobe Photoshop are available in the <a 57 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon 58 Templates Pack</a>.</p> 59 60 61 62 <h2 id="icon11">Android 3.0 and Later</h2> 63 64 <p>The following guidelines describe how to design action bar icons for Android 65 3.0 (API Level 11) and later.</p> 66 67 68 <h3 id="size11">Size and format</h2> 69 70 <p>Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished 71 action bar icon dimensions, corresponding to a given generalized screen density, are shown in 72 the table below.</p> 73 74 <p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of 75 finished Action Bar icon dimensions for each generalized screen density.</p> 76 77 <table> 78 <tbody> 79 <tr> 80 <th></th> 81 <th> 82 <code>ldpi</code> (120 dpi)<br> 83 <small style="font-weight: normal">(Low density screen)</small> 84 </th> 85 <th> 86 <code>mdpi</code> (160 dpi)<br> 87 <small style="font-weight: normal">(Medium density screen)</small> 88 </th> 89 <th> 90 <code>hdpi</code> (240 dpi)<br> 91 <small style="font-weight: normal">(High density screen)</small> 92 </th> 93 <th> 94 <code>xhdpi</code> (320 dpi)<br> 95 <small style="font-weight: normal">(Extra-high density screen)</small> 96 </th> 97 </tr> 98 <tr> 99 <th style="background-color:#f3f3f3;font-weight:normal"> 100 Action Bar Icon Size 101 </th> 102 <td> 103 18 x 18 px 104 </td> 105 <td> 106 24 x 24 px 107 </td> 108 <td> 109 36 x 36 px 110 </td> 111 <td> 112 48 x 48 px 113 </td> 114 </tr> 115 </tbody> 116 </table> 117 118 119 120 <h3 id="style11">Style, colors, and effects</h3> 121 122 <p>Action Bar icons are flat, pictured face on, and generally greyscale, depending on the 123 application's theme. Action Bar icons should not look three-dimensional.</p> 124 125 <p>In order to maintain consistency across the application's Action Bar, all Action Bar icons should 126 use the same color palette and effects.</p> 127 128 <p>When using the default "Holo Light" or "Holo Dark" themes, icons should use the color palette 129 and effects shown in Figure 1 and Figure 2, below.</p> 130 131 132 133 <table class="image-caption"> 134 <tr> 135 <td class="image-caption-i"> 136 <img src="{@docRoot}images/icon_design/action_bar_holo_light_style.png" 137 alt="A view of effects for Action Bar icons for the 'Holo Light' theme."> 138 </td> 139 <td class="image-caption-c"> 140 <div class="caption grad-rule-top"> 141 <p><strong>Figure 1. </strong>Style and effects for "Holo Light" theme Action Bar icons.</p> 142 <div class="image-caption-nested"> 143 <table> 144 <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#333333</code>, 60% opacity 145 <br><br></td></tr> 146 <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from 147 the outer shape and consist purely of transparent pixels.</td></tr> 148 </table> 149 </div> 150 </div> 151 </td> 152 </tr> 153 </table> 154 155 <table class="image-caption"> 156 <tr> 157 <td class="image-caption-i"> 158 <img src="{@docRoot}images/icon_design/action_bar_holo_dark_style.png" 159 alt="A view of effects for Action Bar icons for the 'Holo Dark' theme."> 160 </td> 161 <td class="image-caption-c"> 162 <div class="caption grad-rule-top"> 163 <p><strong>Figure 2. </strong>Style and effects for "Holo Dark" theme Action Bar icons.</p> 164 <div class="image-caption-nested"> 165 <table> 166 <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code>, 80% opacity 167 <br><br></td></tr> 168 <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from 169 the outer shape and consist purely of transparent pixels.</td></tr> 170 </table> 171 <p class="note"><strong>Note: </strong> icons should should have a transparent background; 172 the dark background here is for effect only.</p> 173 </div> 174 </div> 175 </td> 176 </tr> 177 </table> 178 179 180 181 182 <h3 id="examples11">Example icons</h3> 183 184 <p>Shown below are example extra-high-density Action Bar icons that are used throughout Android 185 system applications.</p> 186 187 <p class="warning"><strong>Warning:</strong> Because resources can change between platform versions, 188 you should not reference built-in icons using the Android platform resource IDs (i.e. menu or Action 189 Bar icons under <code>android.R.drawable</code>). If you want to use any icons or other internal 190 drawable resources, you should store a local copy of those icons or drawables in your application 191 resources, then reference the local copy from your application code. In that way, you can maintain 192 control over the appearance of your icons, even if the system's copy changes. Note that the grid 193 below is not intended to be complete.</p> 194 195 <img src="{@docRoot}images/icon_design/action_bar_examples.png" /> 196
