1page.title=Status Bar 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="#icon11">Android 3.0 and Later</a> 14 <ol> 15 <li><a href="#overview11">Overview of changes</a></li> 16 <li><a href="#size11">Size and format</a></li> 17 <li><a href="#style11">Style, colors, and effects</a></li> 18 <li><a href="#dimming11">Automatic dimming</a></li> 19 <li><a href="#examples11">Example icons</a></li> 20 </ol> 21</li> 22<li><a href="#icon9">Android 2.3</a> 23 <ol> 24 <li><a href="#size9">Size</a></li> 25 <li><a href="#style9">Style, color, and effects</a></li> 26 <li><a href="#dosdonts9">Do's and don'ts</a></li> 27 <li><a href="#examples9">Example icons</a></li> 28 </ol> 29</li> 30<li><a href="#icon1">Android 2.2 and Earlier</a></li> 31</ol> 32 33<h2>See also</h2> 34 35<ol> 36<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple 37Screens</a></li> 38</ol> 39 40</div> 41</div> 42 43 44<div class="note design"> 45<p><strong>New Guides for App Designers!</strong></p> 46<p>Check out the new documents for designers at <strong><a 47href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines 48for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p> 49</div> 50 51 52<p>Status bar icons are used to represent notifications from your application in 53the status bar.</p> 54 55<p>As described in <a 56href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific 57Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple 58Screens</a>, you should create separate icons for all generalized screen densities, including low-, 59medium-, high-, and extra-high-density screens. This ensures that your icons will display properly 60across the range of devices on which your application can be installed. See <a 61href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a> 62for suggestions on how to work with multiple sets of icons.</p> 63 64<p>Templates for creating icons in Adobe Photoshop are available in the <a 65href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon 66Templates Pack</a>.</p> 67 68 69<div class="warning"> 70 71<p><strong>Warning:</strong>The style and dimensions of status bar icons have changed dramatically 72in Android 3.0 and 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To 73provide support for all Android versions</strong>, developers should:</p> 74 75<ol> 76<li>Place status bar icons for Android 3.0 and later in the 77 <code>drawable-xhdpi-v11</code>, <code>drawable-hdpi-v11</code>,<code>drawable-mdpi-v11</code>, 78 and <code>drawable-ldpi-v11</code> directories.</li> 79<li>Place status bar icons for Android 2.3 in the 80 <code>drawable-xhdpi-v9</code>, <code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>, 81 and <code>drawable-ldpi-v9</code> directories.</li> 82<li>Place status bar icons for previous versions in 83 <code>drawable-xhdpi</code>, <code>drawable-hdpi</code>, <code>drawable-mdpi</code>, 84 and <code>drawable-ldpi</code> directories.</li> 85</ol> 86 87</div> 88 89 90 91 92<h2 id="icon11">Android 3.0 and Later</h2> 93 94<p>The following guidelines describe how to design status bar icons for Android 953.0 (API Level 11) and later.</p> 96 97 98<h3 id="overview11">Overview of changes</h3> 99 100<p>The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons 101 used in Android 3.0 and later are easier to create, and they allow for more flexible presentation 102 in a variety of situations:</p> 103 104<ul> 105 <li>Status bar icons are composed simply of <strong>white pixels on a transparent 106 backdrop</strong>, with alpha blending used for smooth edges and internal texture where 107 appropriate.</li> 108 <li>Icons are square icon contents should <strong>fill the available space</strong>, although a 109 small amount of internal padding can help maintain balance across status bar icons. See 110 <a href="#size11">Size and format</a> below for details.</li> 111</ul> 112 113<p>These larger and brighter icons, while highly legible, are too intense for use on dark phone 114status bars. These icons would be too distracting if used directly in the status bar. Therefore: 115</p> 116 117<ul> 118 <li><strong>The system automatically resizes and dims</strong> these icons in such situations and 119 developers do not need to supply a separate icon for this purpose. See 120 <a href="#dimming11">Automatic dimming</a> below for more on this behavior.</li> 121</ul> 122 123 124<h3 id="size11">Size and format</h2> 125 126<p>Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished 127status bar icon dimensions corresponding to a given generalized screen density are shown in the 128table below.</p> 129 130<p class="note"><strong>Note:</strong> The system will shrink and dim status bar icons to minimize 131distractions, allowing users to focus on the foreground activity.</p> 132 133 134<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of 135finished icon dimensions for each generalized screen density.</p> 136 137<table> 138 <tbody> 139 <tr> 140 <th></th> 141 <th> 142 <code>ldpi</code> (120 dpi)<br> 143 <small style="font-weight: normal">(Low density screen)</small> 144 </th> 145 <th> 146 <code>mdpi</code> (160 dpi)<br> 147 <small style="font-weight: normal">(Medium density screen)</small> 148 </th> 149 <th> 150 <code>hdpi</code> (240 dpi)<br> 151 <small style="font-weight: normal">(High density screen)</small> 152 </th> 153 <th> 154 <code>xhdpi</code> (320 dpi)<br> 155 <small style="font-weight: normal">(Extra-high density screen)</small> 156 </th> 157 </tr> 158 <tr> 159 <th> 160 Status Bar Icon Size<br><small>(Android 3.0 and Later)</small> 161 </th> 162 <td> 163 18 x 18 px 164 </td> 165 <td> 166 24 x 24 px 167 </td> 168 <td> 169 36 x 36 px 170 </td> 171 <td> 172 48 x 48 px 173 </td> 174 </tr> 175 </tbody> 176</table> 177 178<p>You can also include a few pixels of padding in status bar icons to maintain a 179consistent visual weight with adjacent icons. For example, a 48 x 48 pixel <code>xhdpi</code> 180status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.</p> 181 182 183<h3 id="style11">Style, colors, and effects</h3> 184 185<p>Status bar icons are flat, pictured face on, and must be white on a transparent background.</p> 186 187<p>In order to maintain consistency across all status bar notifications, status bar icons should 188use the styling shown in Figure 1.</p> 189 190 191 192<table class="image-caption"> 193<tr> 194<td class="image-caption-i"> 195 <img src="{@docRoot}images/icon_design/status_bar_honeycomb_style.png" 196 alt="A view of effects for status bar icons."> 197</td> 198<td class="image-caption-c"> 199 <div class="caption grad-rule-top"> 200 <p><strong>Figure 1. </strong>Style for status bar icons.</p> 201 <div class="image-caption-nested"> 202 <table> 203 <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code><br><br></td></tr> 204 <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from 205 the outer shape and consist purely of transparent pixels.</td></tr> 206 </table> 207 </div> 208 </div> 209</td> 210</tr> 211</table> 212 213 214<h3 id="dimming11">Automatic dimming</h3> 215 216<p>The system may dim and shrink status bar icons to allow users to focus on the foreground 217activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices 218reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at 219full intensity in the expanded notification panel. An example of what this looks like is shown below 220in Figure 2.</p> 221 222 223<img src="{@docRoot}images/icon_design/status_bar_honeycomb_dimming.png" 224 alt="Automatic shrinking and dimming behavior in Android 3.0 and later"> 225<p class="img-caption"> 226 <strong>Figure 2.</strong> Automatic shrinking and dimming behavior in Android 3.0 and later. 227</p> 228 229 230<h3 id="examples11">Example icons</h3> 231 232<p>Shown below are example extra-high-density status bar icons that are used throughout Android 233system applications.</p> 234 235<p class="warning"><strong>Warning:</strong> Because resources can change between platform versions, 236you should not reference built-in icons using the Android platform resource IDs (i.e. status bar 237icons under <code>android.R.drawable</code>). If you want to use any icons or other internal 238drawable resources, you should store a local copy of those icons or drawables in your application 239resources, then reference the local copy from your application code. In that way, you can maintain 240control over the appearance of your icons, even if the system's copy changes. Note that the grid 241below is not intended to be complete.</p> 242 243<img src="{@docRoot}images/icon_design/status_bar_honeycomb_examples.png" /> 244 245 246 247 248 249<h2 id="icon9">Android 2.3</h2> 250 251<p>The following guidelines describe how to design status bar icons for Android 2522.3 (API Levels 9 and 10).</p> 253 254<h3 id="size9">Size and positioning</h3> 255 256<p>Status bar icons should use simple shapes and forms and those must be 257scaled and positioned inside the final asset.</p> 258 259<p>Figure 3 illustrates various ways of positioning the icon inside the 260asset. You should size the icons <em>smaller than the actual bounds of the 261asset</em>. <strong>Status bar icons may vary in width, but only 262minimally.</strong></p> 263 264<p>In order to indicate the recommended size for the icon, each example in 265Figure 3 includes two different guide rectangles:</p> 266 267<ul> 268<li>The red box is the bounding box for the full asset.</li> 269<li>The blue box is the recommended bounding box for the actual icon. 270The icon box is sized smaller vertically than the full asset box to allow for 271varying icon shapes while maintaining a consistent visual weight.</li> 272</ul> 273 274<table> 275<tr> 276 277<td style="border:0;"> 278<ol class="nolist"> 279 <li>Status bar icon dimensions for high-density (<code>hdpi</code>) screens:</li> 280 <ol class="nolist"> 281 <li>Full Asset: 24w x 38h px (preferred, width may vary)</li> 282 <li>Icon: 24w x 24h px (preferred, width may vary)</li> 283 </ol> 284 </li> 285</ol> 286</td> 287<td style="border:0;"> 288 <img src="{@docRoot}images/icon_design/statusbar_size_hdpi.png" width="318"> 289</td> 290</tr> 291<tr> 292<td style="border:0;"> 293 <ol class="nolist"> 294 <li>Status bar icon dimensions for medium-density (<code>mdpi</code>) screens:</li> 295 <ol class="nolist"> 296 <li>Full Asset: 16w x 25 px (preferred, width may vary)</li> 297 <li>Icon: 16w x 16w px (preferred, width may vary)</li> 298 </ol> 299 </li> 300</ol> 301</td> 302 303<td style="border:0;"> 304 <img src="{@docRoot}images/icon_design/statusbar_size_mdpi.png" width="318"> 305</td> 306</tr> 307<tr> 308<td style="border:0;"> 309 <ol class="nolist"> 310 <li>Status bar icon dimensions for low-density (<code>ldpi</code>) screens:</li> 311 <ol class="nolist"> 312 <li>Full Asset: 12w x 19h px (preferred, width may vary)</li> 313 <li>Icon: 12w x 12h px (preferred, width may vary)</li> 314 </ol> 315 </li> 316</ol> 317</td> 318 319<td style="border:0;"> 320 <img src="{@docRoot}images/icon_design/statusbar_size_ldpi.png" width="318"> 321</td> 322</tr> 323 324<tr> 325<td style="border:0;"></td> 326<td style="border:0;"> 327 <p class="table-caption"><strong>Figure 3.</strong> 328 Status bar icon sizing and positioning inside the bounds of the 329 icon asset.</p> 330</td> 331</tr> 332 333</table> 334 335 336 337 338<h3 id="style9">Style, colors, and effects</h3> 339 340<p>Status bar icons are flat, matte, and pictured face-on.</p> 341 342 343<table class="image-caption"> 344<tr> 345<td class="image-caption-i"> 346 <img src="{@docRoot}images/icon_design/statusbar_style.png" alt="A view of effects for status bar icons."/> 347</td> 348<td class="image-caption-c"> 349 <div class="caption grad-rule-top"> 350 <p><strong>Figure 4. </strong>Style and effects for status icons.</p> 351 <div class="image-caption-nested"> 352 <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p> 353 <table> 354 <tr><td><em>1.</em></td><td nowrap>Fill gradient:</td><td>90°, from <code>#828282</code> to <code>#919191</code><br><br></td></tr> 355 <tr><td><em>2.</em></td><td nowrap>Inner shadow:</td><td><code>#FFFFFF</code>, 10% opacity<br>angle 90°<br>distance 1px<br>size 0px<br><br></td></tr> 356 <tr><td><em>3.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.</td></tr> 357 </table> 358 </div> 359 </div> 360</td> 361</tr> 362</table> 363 364 365 366 367<h3 id="dosdonts9">Do's and don'ts</h3> 368 369<p>Below are some "do and don't" examples to consider when creating status bar icons for 370your application. </p> 371 372 373<img src="{@docRoot}images/icon_design/do_dont_statusicons.png"> 374 375 376 377 378<h3 id="examples9">Example icons</h3> 379 380<p>Shown below are standard high-density status bar icons that are used in 381the Android platform.</p> 382 383<p class="warning"><strong>Warning:</strong> Because these resources can change 384between platform versions, you should not reference these icons using the 385Android platform resource IDs (i.e. status bar icons under 386<code>android.R.drawable</code>). If you want to use any icons or other internal 387drawable resources, you should store a local copy of those icons or drawables in 388your application resources, then reference the local copy from your application 389code. In that way, you can maintain control over the appearance of your icons, 390even if the system's copy changes. Note that the grid below is not intended to 391be complete.</p> 392 393<img src="{@docRoot}images/icon_design/statusbar_standard.png" /> 394 395 396 397<h2 id="icon1">Android 2.2 and Earlier</h2> 398 399<p>The following guidelines describe how to design status bar icons for Android 4002.2 (API Level 8) and earlier.</p> 401 402<h3 id="structure1">Structure</h3> 403 404<ul> 405<li>Rounded corners must always be applied to the base shape and to the details 406of a status bar icon shown Figure 5.</li> 407 408<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2 409pixel safeframe.</li> 410 411<li>Status bar icons can overlap the safeframe to the left and right when 412necessary, but must not overlap the safeframe at the top and bottom.</li> 413 414<li><strong>Final art must be exported as a transparent PNG file.</strong></li> 415 416<li>Templates for creating status bar icons using Adobe Photoshop are available 417in the Icon Templates Pack.</li> 418</ul> 419 420<table class="image-caption"> 421<tr> 422<td class="image-caption-i"> 423 <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of 424status bar icon structure." /> 425</td> 426<td class="image-caption-c"> 427 <div class="caption grad-rule-top"> 428 <p><strong>Figure 5. </strong>Safeframe and corner-rounding for status bar 429icons. Icon size is 25x25.</p> 430 </div> 431</td> 432</tr> 433</table> 434 435 436<h3 id="style1">Light, effects, and shadows</h3> 437 438<p>Status bar icons are slightly debossed, high in contrast, and pictured 439face-on to enhance clarity at small sizes.</p> 440 441<table class="image-caption"> 442<tr> 443<td class="image-caption-i"> 444 <img src="{@docRoot}images/icon_design/statusbar_light.png"/> 445</td> 446<td class="image-caption-c"> 447 <div class="caption grad-rule-top"> 448 <p><strong>Figure 6. </strong>Light, effects, and shadows for status bar icons.</p> 449 <div class="image-caption-nested"> 450 <table> 451 <tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> 452 <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr> 453 <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr> 454 <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr> 455 </table> 456 </div> 457 </div> 458</td> 459</tr> 460</table> 461 462<table> 463<tr> 464<td style="border:0"> 465 466<h4 id="palette1">Color palette</h4> 467 468<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p> 469 470<table> 471<tr> 472<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png"/></td> 473<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td> 474</tr> 475 476<tr> 477<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png"/></td> 478<td class="image-caption-c">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td> 479</tr> 480 481<tr> 482<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png"/></td> 483<td class="image-caption-c">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td> 484</tr> 485 486<tr> 487<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png"/></td> 488<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td> 489</tr> 490 491</table> 492 493</td> 494 495<td style="border:0"> 496 497<h4 id="steps1">Step by step</h4> 498 499<ol> 500<li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px 501image on a transparent background. Mind the safeframe, and keep the upper and 502lower 2 pixels free.</li> 503<li>Add rounded corners as specified in Figure 5.</li> 504<li>Add light, effects, and shadows as specified in Figure 6.</li> 505<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li> 506</ol> 507 508</td> 509</tr> 510</table> 511
