Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 1 | page.title=Iconography |
Scott Main | 64d5103 | 2013-04-12 14:00:30 -0700 | [diff] [blame] | 2 | page.tags="icons" |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 3 | @jd:body |
| 4 | |
| 5 | <img src="{@docRoot}design/media/iconography_overview.png"> |
| 6 | |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 7 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 8 | <p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, |
| 9 | intuitive representation of an action, a status, or an app.</p> |
| 10 | |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 11 | <p>When you design icons for your app, it's important to keep in mind that your |
| 12 | app may be installed on a variety of devices that offer a range of |
| 13 | pixel densities, as mentioned in |
| 14 | <a href="{@docRoot}design/style/devices-displays.html">Devices |
| 15 | and Displays</a>. But you can make your icons look great on all devices |
| 16 | by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of |
| 17 | the 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, |
| 20 | the design guidelines below |
| 21 | refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym> |
| 22 | units, 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 | |
Dirk Dougherty | 3e529b4 | 2013-10-19 11:43:41 -0700 | [diff] [blame] | 26 | <p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8 |
| 27 | scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and |
| 28 | xxx-high respectively). For example, consider that the size for a launcher icon is specified to be |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 29 | 48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the |
| 30 | high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high |
| 31 | density (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, |
| 34 | but you normally don't need to create custom assets at this size because Android |
| 35 | effectively down-scales your HDPI assets by 1/2 to match the expected size.</p> |
| 36 | |
| 37 | |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 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 |
| 43 | user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on |
| 44 | any 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 |
| 92 | from 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 | |
| 126 | Action bar icons are graphic buttons that represent the most important actions people can take |
| 127 | within your app. Each one should employ a simple metaphor representing a single concept that most |
| 128 | people can grasp at a glance. |
| 129 | |
| 130 | </p> |
| 131 | <p> |
| 132 | |
| 133 | Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The |
| 134 | download link below provides a package with icons that are scaled for various screen densities and |
| 135 | are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled |
| 136 | icons that you can modify to match your theme, in addition to Adobe® Illustrator® source |
| 137 | files for further customization. |
| 138 | |
| 139 | </p> |
| 140 | <p> |
Scott Main | fe3057f | 2012-10-03 15:23:06 -0700 | [diff] [blame] | 141 | <a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Action Bar Icons (@iconography page)']);" |
Dirk Dougherty | 2a91ecb | 2013-11-05 19:06:27 -0800 | [diff] [blame] | 142 | href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 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"> |
Scott Main | 50e990c | 2012-06-21 17:14:39 -0700 | [diff] [blame] | 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> |
Roman Nurik | b99ae73 | 2012-03-06 12:26:15 -0800 | [diff] [blame] | 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, |
| 190 | rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative |
| 191 | spaces 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 /> |
| 202 | Enabled: <strong>60%</strong> opacity<br /> |
| 203 | Disabled: <strong>30%</strong> opacity</p> |
| 204 | <div class="vspace size-1"> </div> |
| 205 | |
| 206 | <p>Colors: <strong>#FFFFFF</strong><br /> |
| 207 | Enabled: <strong>80%</strong> opacity<br /> |
| 208 | Disabled: <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 |
| 222 | items. For example, in the Gmail app, each message has a star icon that marks the message as |
| 223 | important.</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 |
| 271 | metaphor 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 |
| 286 | to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with |
| 287 | the 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 |
| 302 | whenever 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> |
Scott Main | 65b2f3e | 2013-06-03 12:39:06 -0700 | [diff] [blame] | 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 |
| 382 | drawable assets for your application. These tips assume you are using |
| 383 | Adobe® 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 |
| 391 | combination of vector shapes and raster layers and effects. When possible, |
| 392 | use vector shapes so that if the need arises, assets can be scaled up without |
| 393 | loss of detail and edge crispness.</p> |
| 394 | |
| 395 | <p>Using vectors also makes it easy to align edges and corners to pixel |
| 396 | boundaries 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, |
| 403 | it is best to start your icon |
| 404 | designs on large artboards with dimensions that are multiples of the target icon |
| 405 | sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, |
| 406 | depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you |
| 407 | initially draw launcher icons on an 864x864 artboard, it will be easier and |
| 408 | cleaner to adjust the icons when you scale the artboard down to the target |
| 409 | sizes 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 |
| 416 | layer, those layers will need to be redrawn manually to appear crisp at higher |
| 417 | densities. For example if a 60x60 circle was painted as a bitmap for |
| 418 | mdpi 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 |
| 425 | directory when they are sorted alphabetically. In particular, it helps to use a |
| 426 | common 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 |
| 467 | type—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 |
| 473 | of the same icon. To help keep the multiple copies of files safe and easier to |
| 474 | find, we recommend creating a directory structure in your working space that |
| 475 | organizes asset files based on the target density. For example:</p> |
| 476 | |
| 477 | <pre> |
| 478 | art/... |
| 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 |
| 497 | can quickly determine which assets should be copied to each |
| 498 | resources directory. Separating assets by density also helps you detect any |
| 499 | variances in filenames across densities, which is important because |
| 500 | corresponding assets for different densities must share the same filename.</p> |
| 501 | |
| 502 | <p>For comparison, here's the resources directory structure of a typical |
| 503 | application: </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, |
| 517 | see <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 |
| 524 | application resources into the application binary, a good practice is to remove |
| 525 | unnecessary headers and metadata from your PNG assets. Tools such as <a |
| 526 | href="http://optipng.sourceforge.net/">OptiPNG</a> or <a |
| 527 | href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this |
| 528 | metadata is removed and that your image asset file sizes are optimized.</p> |
| 529 | |
| 530 | |