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