| page.title=Icon Design Guidelines |
| parent.title=UI Guidelines |
| parent.link=index.html |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| |
| <h2>Quickview</h2> |
| |
| <ul> |
| <li>You can use several types of icons in an Android application.</li> |
| <li>Your icons should follow the general specification in this document.</li> |
| <li>You should create separate icon sets for high-, medium-, and low-density screens.</li> |
| </ul> |
| |
| <h2>In this document</h2> |
| |
| <ol> |
| <li><a href="#templatespack">Using the Icon Templates Pack</a></li> |
| <li><a href="#icon-sets">Providing Density-Specific Icon Sets</a></li> |
| <li><a href="#design-tips">Tips for Designers</a></li> |
| </ol> |
| |
| <h2>Topics</h2> |
| |
| <ol> |
| <li><a href="icon_design_launcher.html">Launcher Icons</a></li> |
| <li><a href="icon_design_menu.html">Menu Icons</a></li> |
| <li><a href="icon_design_status_bar.html">Status Bar Icons</a></li> |
| <li><a href="icon_design_tab.html">Tab Icons</a></li> |
| <li><a href="icon_design_dialog.html">Dialog Icons</a></li> |
| <li><a href="icon_design_list.html">List View Icons</a></li> |
| </ol> |
| |
| <h2>Downloads</h2> |
| |
| <ol> |
| <li><a href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon |
| Templates Pack, v4.0 »</a></li> |
| <li><a href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon |
| Templates Pack, v2.3 »</a></li> |
| <li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon |
| Templates Pack, v2.0 »</a></li> |
| <li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon |
| Templates Pack, v1.0 »</a></li> |
| </ol> |
| |
| <h2>See also</h2> |
| |
| <ol> |
| <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a></li> |
| </ol> |
| |
| |
| </div> |
| </div> |
| |
| <p>Creating a unified look and feel throughout a user interface adds value to |
| your product. Streamlining the graphic style will also make the UI seem more |
| professional to users.</p> |
| |
| <p>This document provides information to help you create icons for various parts |
| of your application’s user interface that match the general styles used by the |
| Android 2.x framework. Following these guidelines will help you to create a |
| polished and unified experience for the user.</p> |
| |
| <p>The following documents discuss detailed guidelines for the common types of |
| icons used throughout Android applications:</p> |
| |
| <dl> |
| <dt><strong><a href="icon_design_launcher.html">Launcher Icons</a></strong></dt> |
| <dd>A Launcher icon is a graphic that represents your application on the |
| device's Home screen and in the Launcher window.</dd> |
| <dt><strong><a href="icon_design_menu.html">Menu Icons</a></strong></dt> |
| <dd>Menu icons are graphical elements placed in the options menu shown to |
| users when they press the Menu button.</dd> |
| <dt><strong><a href="icon_design_action_bar.html">Action Bar Icons</a> |
| <span class="new">new!</span></strong></dt> |
| <dd>Action Bar icons are graphical elements representing action items in the |
| <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>.</dd> |
| <dt><strong><a href="icon_design_status_bar.html">Status Bar Icons</a></strong></dt> |
| <dd>Status bar icons are used to represent notifications from your |
| application in the status bar.</dd> |
| <dt><strong><a href="icon_design_tab.html">Tab Icons</a></strong></dt> |
| <dd>Tab icons are graphical elements used to represent individual tabs in a |
| multi-tab interface.</dd> |
| <dt><strong><a href="icon_design_dialog.html">Dialog Icons</a></strong></dt> |
| <dd>Dialog icons are shown in pop-up dialog boxes that prompt the user for |
| interaction.</dd> |
| <dt><strong><a href="icon_design_list.html">List View Icons</a></strong></dt> |
| <dd>List view icons are used with {@link android.widget.ListView} to |
| graphically represent list items. An example is the Settings application.</dd> |
| </dl> |
| |
| <p>To get started creating your icons more quickly, you can download |
| the Android Icon Templates Pack.</p> |
| |
| |
| |
| |
| |
| <h2 id="templatespack">Using the Android Icon Templates Pack</h2> |
| |
| <p>The Android Icon Templates Pack is a collection of template designs, |
| textures, and layer styles that make it easier for you to create icons that |
| conform to the guidelines given in this document. We recommend downloading the |
| template pack archive before you start designing your icons.</p> |
| |
| <p>The icon templates are provided in the Adobe Photoshop file format (.psd), |
| which preserves the layers and design treatments we used when creating the |
| standard icons for the Android platform. You can load the template files into |
| any compatible image-editing program, although your ability to work directly |
| with the layers and treatments may vary based on the program you are using.</p> |
| |
| <p>You can obtain the latest Icon Templates Pack archive using the link below: |
| </p> |
| |
| <p style="margin-left:2em"><a |
| href="{@docRoot}shareables/icon_templates-v4.0.zip">Download the Icon Templates |
| Pack for Android 4.0 »</a> |
| |
| <p>For previous versions of the Icon Templates Pack, see the <em>Downloads</em> |
| section in the box at the top-right corner of this page.</p> |
| |
| |
| |
| |
| |
| <h2 id="icon-sets">Providing Density-Specific Icon Sets</h2> |
| |
| <p>Android is designed to run on a variety of devices that offer a range of |
| screen sizes and resolutions. When you design the icons for your application, |
| it's important keep in mind that your application may be installed on any of |
| those devices. As described in the <a |
| href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a> document, the Android platform makes it straightforward for you to |
| provide icons in such a way that they will be displayed properly on any device, |
| regardless of the device's screen size or resolution.</p> |
| |
| <p>In general, the recommended approach is to create a separate set of icons for |
| each generalized screen density. Then, |
| store them in density-specific resource directories in your application. When |
| your application runs, the Android platform will check the characteristics of |
| the device screen and load icons from the appropriate density-specific |
| resources. For more information about how to store density-specific resources in |
| your application, see <a |
| href="{@docRoot}guide/practices/screens_support.html#qualifiers">Resource |
| directory qualifiers for screen size and density</a>. </p> |
| |
| <p>For tips on how to create and manage icon sets for multiple densities, see |
| <a href="#design-tips">Tips for Designers</a>.</p> |
| |
| |
| |
| |
| <h2 id="design-tips">Tips for Designers</h2> |
| |
| <p>Here are some tips that you might find useful as you develop icons or other |
| drawable assets for your application. The tips assume that you are using |
| Adobe Photoshop or a similar raster and vector image-editing program.</p> |
| |
| <h3>Use common naming conventions for icon assets</h3> |
| |
| <p>Try to name files so that related assets will group together inside a |
| directory when they are sorted alphabetically. In particular, it helps to use a |
| common prefix for each icon type. For example:</p> |
| |
| <table> |
| <tr> |
| <th>Asset Type</th> |
| <th>Prefix</th> |
| <th>Example</th> |
| </tr> |
| <tr> |
| <td>Icons</td> |
| <td><code>ic_</code></td> |
| <td><code>ic_star.png</code></td> |
| </tr> |
| <tr> |
| <td>Launcher icons</td> |
| <td><code>ic_launcher</code></td> |
| <td><code>ic_launcher_calendar.png</code></td> |
| </tr> |
| <tr> |
| <td>Menu icons and Action Bar icons</td> |
| <td><code>ic_menu</code></td> |
| <td><code>ic_menu_archive.png</code></td> |
| </tr> |
| <tr> |
| <td>Status bar icons</td> |
| <td><code>ic_stat_notify</code></td> |
| <td><code>ic_stat_notify_msg.png</code></td> |
| </tr> |
| <tr> |
| <td>Tab icons</td> |
| <td><code>ic_tab</code></td> |
| <td><code>ic_tab_recent.png</code></td> |
| </tr> |
| <tr> |
| <td>Dialog icons</td> |
| <td><code>ic_dialog</code></td> |
| <td><code>ic_dialog_info.png</code></td> |
| </tr> |
| </table> |
| |
| <p>Note that you are not required to use a shared prefix of any type — |
| doing so is for your convenience only.</p> |
| |
| |
| <h3>Set up a working space that organizes files for multiple densities</h3> |
| |
| <p>Supporting multiple screen densities means you must create multiple versions |
| of the same icon. To help keep the multiple copies of files safe and easier to |
| find, we recommend creating a directory structure in your working space that |
| organizes asset files per resolution. For example:</p> |
| |
| <pre>art/... |
| ldpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png |
| mdpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png |
| hdpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png |
| xhdpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png</pre> |
| |
| <p>This structure parallels the density-specific structure in which you will |
| ultimately store the finished assets in your application's resources. Because |
| the structure in your working space is similar to that of the application, you |
| can quickly determine which assets should be copied to each application |
| resources directory. Separating assets by density also helps you detect any |
| variances in filenames across densities, which is important because |
| corresponding assets for different densities must share the same filename.</p> |
| |
| <p>For comparison, here's the resources directory structure of a typical |
| application: </p> |
| |
| <pre>res/... |
| drawable-ldpi/... |
| <em>finished_asset</em>.png |
| drawable-mdpi/... |
| <em>finished_asset</em>.png |
| drawable-hdpi/... |
| <em>finished_asset</em>.png |
| drawable-xhdpi/... |
| <em>finished_asset</em>.png</pre> |
| |
| |
| |
| <h3>Use vector shapes where possible</h3> |
| |
| <p>Many image-editing programs such as Adobe Photoshop allow you to use a |
| combination of vector shapes and raster layers and effects. When possible, |
| use vector shapes so that if the need arises, assets can be scaled up without |
| loss of detail and edge crispness.</p> |
| |
| <p>Using vectors also makes it easy to align edges and corners to pixel |
| boundaries at smaller resolutions.</li> |
| |
| |
| |
| <h3>Start with large artboards</h3> |
| |
| <p>Because you will need to create assets for different screen densities, |
| it is best to start your icon |
| designs on large artboards with dimensions that are multiples of the target icon |
| sizes. For example, <a |
| href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html">launcher |
| icons</a> are 96, 72, 48, or 36 pixels wide, depending on screen density. If you |
| initially draw launcher icons on an 864x864 artboard, it will be easier and |
| cleaner to tweak the icons when you scale the artboard down to the target |
| sizes for final asset creation.</p> |
| |
| |
| |
| <h3>When scaling, redraw bitmap layers as needed</h3> |
| |
| <p>If you scaled an image up from a bitmap layer, rather than from a vector |
| layer, those layers will need to be redrawn manually to appear crisp at higher |
| densities. For example if a 60x60 circle was painted as a bitmap for |
| <code>mdpi</code> it will need to be repainted as a 90x90 circle for |
| <code>hdpi</code>.</p> |
| |
| |
| |
| <h3>When saving image assets, remove unnecessary metadata</h3> |
| |
| <p>Although the Android SDK tools will automatically compress PNGs when packaging |
| application resources into the application binary, a good practice is to remove |
| unnecessary headers and metadata from your PNG assets. Tools such as <a |
| href="http://optipng.sourceforge.net/">OptiPNG</a> or <a |
| href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this |
| metadata is removed and that your image asset file sizes are optimized.</p> |
| |
| |
| |
| <h3>Make sure that corresponding assets for different densities use the same |
| filenames</h3> |
| |
| <p>Corresponding icon asset files for each density <strong>must use the same |
| filename</strong>, but be stored in density-specific resource directories. This |
| allows the system to look up and load the proper resource according to the |
| screen characteristics of the device. For this reason, make sure that the set of |
| assets in each directory is consistent and that the files do not use |
| density-specific suffixes.</p> |
| |
| <p>For more information about density-specific resources |
| and how the system uses them to meet the needs of different devices, see <a |
| href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a>.</p> |
| |