1page.title=Iconography 2page.tags="icons" 3@jd:body 4 5<img src="{@docRoot}design/media/iconography_overview.png"> 6 7 8<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, 9intuitive representation of an action, a status, or an app.</p> 10 11<p>When you design icons for your app, it's important to keep in mind that your 12app may be installed on a variety of devices that offer a range of 13pixel densities, as mentioned in 14<a href="{@docRoot}design/style/devices-displays.html">Devices 15and Displays</a>. But you can make your icons look great on all devices 16by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of 17the device screen and loads the appropriate density-specific assets for your app. </p> 18 19<p>Because you will deliver each icon in multiple sizes to support different densities, 20the design guidelines below 21refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym> 22units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p> 23 24<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> 25 26<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8 27scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and 28xxx-high respectively). For example, consider that the size for a launcher icon is specified to be 2948x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the 30high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high 31density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p> 32 33<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens, 34but you normally don't need to create custom assets at this size because Android 35effectively down-scales your HDPI assets by 1/2 to match the expected size.</p> 36 37 38 39 40<h2 id="launcher">Launcher</h2> 41 42<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the 43user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on 44any type of background.</p> 45 46<div class="layout-content-row"> 47 <div class="layout-content-col span-4"> 48 49 <img src="{@docRoot}design/media/iconography_launcher_size.png"> 50 51 </div> 52 <div class="layout-content-col span-4"> 53 54 <img src="{@docRoot}design/media/iconography_launcher_focal.png"> 55 56 </div> 57 <div class="layout-content-col span-4"> 58 59 <img src="{@docRoot}design/media/iconography_launcher_style.png"> 60 61 </div> 62</div> 63 64<div class="layout-content-row"> 65 <div class="layout-content-col span-4"> 66 67 <h4>Sizes & scale</h4> 68 69 <ul> 70 <li class="no-bullet with-icon tablet"> 71 <p>Launcher icons on a mobile device must be <strong>48x48 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 72 <li class="no-bullet with-icon web"> 73 <p>Launcher icons for display on Google Play must be <strong>512x512 pixels</strong>.</p></li> 74 </ul> 75 76 </div> 77 <div class="layout-content-col span-4"> 78 79 <h4>Proportions</h4> 80 81 <ul> 82 <li class="no-bullet with-icon tablet"> 83 <p>Full asset, <strong>48x48 dp</strong></p> 84 </li> 85 </ul> 86 87 </div> 88 <div class="layout-content-col span-4"> 89 90<h4>Style</h4> 91<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed 92from above, so that users perceive some depth.</p> 93 94 </div> 95</div> 96 97 98<div class="layout-content-row"> 99 <div class="layout-content-col span-4"> 100 101 </div> 102 <div class="layout-content-col span-7"> 103 104 <img src="{@docRoot}design/media/iconography_launcher_example.png"> 105 106 </div> 107 <!-- 2 free columns --> 108</div> 109 110<div class="layout-content-row"> 111 <div class="layout-content-col span-12"> 112 113 <img src="{@docRoot}design/media/iconography_launcher_example2.png"> 114 115 <div class="vspace size-2"> </div> 116 117 </div> 118 <!-- 1 free columns --> 119</div> 120 121 122<h2 id="action-bar">Action Bar</h2> 123 124<p> 125 126Action bar icons are graphic buttons that represent the most important actions people can take 127within your app. Each one should employ a simple metaphor representing a single concept that most 128people can grasp at a glance. 129 130</p> 131<p> 132 133Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The 134download link below provides a package with icons that are scaled for various screen densities and 135are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled 136icons that you can modify to match your theme, in addition to Adobe® Illustrator® source 137files for further customization. 138 139</p> 140<p> 141<a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);" 142 href="{@docRoot}downloads/design/Android_Design_Icons_20130926.zip">Download the Action Bar Icon Pack</a> 143</p> 144 145<div class="layout-content-row"> 146 <div class="layout-content-col span-4"> 147 148 <img src="{@docRoot}design/media/iconography_actionbar_size.png"> 149 150 </div> 151 <div class="layout-content-col span-4"> 152 153 <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> 154 155 </div> 156 <div class="layout-content-col span-4"> 157 158 <img src="{@docRoot}design/media/iconography_actionbar_style.png"> 159 160 </div> 161</div> 162 163<div class="layout-content-row"> 164 <div class="layout-content-col span-4"> 165 166 <h4>Sizes & scale</h4> 167 168 <ul> 169 <li class="no-bullet with-icon tablet"> 170 <p>Action bar icons for phones should be <strong>32x32 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 171 </ul> 172 173 </div> 174 <div class="layout-content-col span-4"> 175 176 <h4>Focal area & proportions</h4> 177 178 <ul> 179 <li class="no-bullet with-icon tablet"> 180 <p>Full asset, <strong>32x32 dp</strong></p> 181 <p>Optical square, <strong>24x24 dp</strong></p> 182 </li> 183 </ul> 184 185 </div> 186 <div class="layout-content-col span-4"> 187 188<h4>Style</h4> 189<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, 190rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative 191spaces should be a minimum of 2 dp.</p> 192 193 </div> 194</div> 195 196 197<div class="layout-content-row"> 198 <div class="layout-content-col span-3"> 199 200<h4>Colors</h4> 201<p>Colors: <strong>#333333</strong><br /> 202Enabled: <strong>60%</strong> opacity<br /> 203Disabled: <strong>30%</strong> opacity</p> 204<div class="vspace size-1"> </div> 205 206<p>Colors: <strong>#FFFFFF</strong><br /> 207Enabled: <strong>80%</strong> opacity<br /> 208Disabled: <strong>30%</strong> opacity</p> 209 210 </div> 211 <div class="layout-content-col span-9"> 212 213 <img src="{@docRoot}design/media/iconography_actionbar_colors.png"> 214 215 </div> 216</div> 217 218 219<h2 id="small-contextual">Small / Contextual Icons</h2> 220 221<p>Within the body of your app, use small icons to surface actions and/or provide status for specific 222items. For example, in the Gmail app, each message has a star icon that marks the message as 223important.</p> 224 225 226<div class="layout-content-row"> 227 <div class="layout-content-col span-4"> 228 229 <img src="{@docRoot}design/media/iconography_small_size.png"> 230 231 </div> 232 <div class="layout-content-col span-4"> 233 234 <img src="{@docRoot}design/media/iconography_small_focal.png"> 235 236 </div> 237 <div class="layout-content-col span-4"> 238 239 <img src="{@docRoot}design/media/iconography_small_style.png"> 240 241 </div> 242</div> 243 244<div class="layout-content-row"> 245 <div class="layout-content-col span-4"> 246 247 <h4>Sizes & scale</h4> 248 249 <ul> 250 <li class="no-bullet with-icon tablet"> 251 <p>Small icons should be <strong>16x16 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 252 </ul> 253 254 </div> 255 <div class="layout-content-col span-4"> 256 257 <h4>Focal area & proportions</h4> 258 259 <ul> 260 <li class="no-bullet with-icon tablet"> 261 <p>Full asset, <strong>16x16 dp</strong></p> 262 <p>Optical square, <strong>12x12 dp</strong></p> 263 </li> 264 </ul> 265 266 </div> 267 <div class="layout-content-col span-4"> 268 269<h4>Style</h4> 270<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual 271metaphor so that a user can easily recognize and understand its purpose.</p> 272 273 </div> 274</div> 275 276 277<div class="layout-content-row"> 278 <div class="layout-content-col span-4"> 279 280 <img src="{@docRoot}design/media/iconography_small_colors.png"> 281 282 <div class="vspace size-2"> </div> 283 284<h4>Colors</h4> 285<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon 286to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with 287the background.</p> 288 289 </div> 290 <div class="layout-content-col span-7"> 291 292 <img src="{@docRoot}design/media/iconography_small_example.png"> 293 294 </div> 295 <!-- 2 free columns --> 296</div> 297 298 299<h2 id="notification">Notification Icons</h2> 300 301<p>If your app generates notifications, provide an icon that the system can display in the status bar 302whenever a new notification is available.</p> 303 304 305<div class="layout-content-row"> 306 <div class="layout-content-col span-4"> 307 308 <img src="{@docRoot}design/media/iconography_notification_size.png"> 309 310 </div> 311 <div class="layout-content-col span-4"> 312 313 <img src="{@docRoot}design/media/iconography_notification_focal.png"> 314 315 </div> 316 <div class="layout-content-col span-4"> 317 318 <img src="{@docRoot}design/media/iconography_notification_style.png"> 319 320 </div> 321</div> 322 323<div class="layout-content-row"> 324 <div class="layout-content-col span-4"> 325 326 <h4>Sizes & scale</h4> 327 328 <ul> 329 <li class="no-bullet with-icon tablet"> 330 <p>Notification icons must be <strong>24x24 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> 331 </ul> 332 333 </div> 334 <div class="layout-content-col span-4"> 335 336 <h4>Focal area & proportions</h4> 337 338 <ul> 339 <li class="no-bullet with-icon tablet"> 340 <p>Full asset, <strong>24x24 dp</strong></p> 341 <p>Optical square, <strong>22x22 dp</strong></p> 342 </li> 343 </ul> 344 345 </div> 346 <div class="layout-content-col span-4"> 347 348<h4>Style</h4> 349<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> 350 351 </div> 352</div> 353 354 355<div class="layout-content-row"> 356 <div class="layout-content-col span-4"> 357 358<h4>Colors</h4> 359<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> 360 361 </div> 362 <div class="layout-content-col span-7"> 363 364 <img src="{@docRoot}design/media/iconography_notification_example.png"> 365 366 </div> 367 <!-- 2 free columns --> 368</div> 369 370 371 372 373 374 375 376 377 378 379<h2 id="DesignTips">Design Tips</h2> 380 381<p>Here are some tips you might find useful as you create icons or other 382drawable assets for your application. These tips assume you are using 383Adobe® Photoshop® or a similar raster and vector image-editing program.</p> 384 385 386 387 388<h3>Use vector shapes where possible</h3> 389 390<p>Many image-editing programs such as Adobe® Photoshop® allow you to use a 391combination of vector shapes and raster layers and effects. When possible, 392use vector shapes so that if the need arises, assets can be scaled up without 393loss of detail and edge crispness.</p> 394 395<p>Using vectors also makes it easy to align edges and corners to pixel 396boundaries at smaller resolutions.</li> 397 398 399 400<h3>Start with large artboards</h3> 401 402<p>Because you will need to create assets for different screen densities, 403it is best to start your icon 404designs on large artboards with dimensions that are multiples of the target icon 405sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, 406depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you 407initially draw launcher icons on an 864x864 artboard, it will be easier and 408cleaner to adjust the icons when you scale the artboard down to the target 409sizes for final asset creation.</p> 410 411 412 413<h3>When scaling, redraw bitmap layers as needed</h3> 414 415<p>If you scaled an image up from a bitmap layer, rather than from a vector 416layer, those layers will need to be redrawn manually to appear crisp at higher 417densities. For example if a 60x60 circle was painted as a bitmap for 418mdpi it will need to be repainted as a 90x90 circle for hdpi.</p> 419 420 421 422<h3>Use common naming conventions for icon assets</h3> 423 424<p>Try to name files so that related assets will group together inside a 425directory when they are sorted alphabetically. In particular, it helps to use a 426common prefix for each icon type. For example:</p> 427 428<table> 429<tr> 430<th>Asset Type</th> 431<th>Prefix</th> 432<th>Example</th> 433</tr> 434<tr> 435<td>Icons</td> 436<td><code>ic_</code></td> 437<td><code>ic_star.png</code></td> 438</tr> 439<tr> 440<td>Launcher icons</td> 441<td><code>ic_launcher</code></td> 442<td><code>ic_launcher_calendar.png</code></td> 443</tr> 444<tr> 445<td>Menu icons and Action Bar icons</td> 446<td><code>ic_menu</code></td> 447<td><code>ic_menu_archive.png</code></td> 448</tr> 449<tr> 450<td>Status bar icons</td> 451<td><code>ic_stat_notify</code></td> 452<td><code>ic_stat_notify_msg.png</code></td> 453</tr> 454<tr> 455<td>Tab icons</td> 456<td><code>ic_tab</code></td> 457<td><code>ic_tab_recent.png</code></td> 458</tr> 459<tr> 460<td>Dialog icons</td> 461<td><code>ic_dialog</code></td> 462<td><code>ic_dialog_info.png</code></td> 463</tr> 464</table> 465 466<p>Note that you are not required to use a shared prefix of any 467type—doing so is for your convenience only.</p> 468 469 470<h3>Set up a working space that organizes files by density</h3> 471 472<p>Supporting multiple screen densities means you must create multiple versions 473of the same icon. To help keep the multiple copies of files safe and easier to 474find, we recommend creating a directory structure in your working space that 475organizes asset files based on the target density. For example:</p> 476 477<pre> 478art/... 479 mdpi/... 480 _pre_production/... 481 <em>working_file</em>.psd 482 <em>finished_asset</em>.png 483 hdpi/... 484 _pre_production/... 485 <em>working_file</em>.psd 486 <em>finished_asset</em>.png 487 xhdpi/... 488 _pre_production/... 489 <em>working_file</em>.psd 490 <em>finished_asset</em>.png</pre> 491 xxhdpi/... 492 _pre_production/... 493 <em>working_file</em>.psd 494 <em>finished_asset</em>.png</pre> 495 496<p>Because the structure in your working space is similar to that of the application, you 497can quickly determine which assets should be copied to each 498resources directory. Separating assets by density also helps you detect any 499variances in filenames across densities, which is important because 500corresponding assets for different densities must share the same filename.</p> 501 502<p>For comparison, here's the resources directory structure of a typical 503application: </p> 504 505<pre>res/... 506 drawable-ldpi/... 507 <em>finished_asset</em>.png 508 drawable-mdpi/... 509 <em>finished_asset</em>.png 510 drawable-hdpi/... 511 <em>finished_asset</em>.png 512 drawable-xhdpi/... 513 <em>finished_asset</em>.png 514</pre> 515 516<p>For more information about how to save resources in the application project, 517see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>. 518</p> 519 520 521<h3>Remove unnecessary metadata from final assets</h3> 522 523<p>Although the Android SDK tools will automatically compress PNGs when packaging 524application resources into the application binary, a good practice is to remove 525unnecessary headers and metadata from your PNG assets. Tools such as <a 526href="http://optipng.sourceforge.net/">OptiPNG</a> or <a 527href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this 528metadata is removed and that your image asset file sizes are optimized.</p> 529 530 531
