path: root/docs/html/guide/practices/ui_guidelines/icon_design.jd

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-v2.3.zip">Android Icon
Templates Pack, v2.3 &raquo;</a></li>
<li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon
Templates Pack, v2.0 &raquo;</a></li>
<li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon
Templates Pack, v1.0 &raquo;</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_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-v2.3.zip">Download the Icon Templates
Pack for Android 2.3 &raquo;</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 of the three generalized screen densities listed in Table 1. 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>

<p class="table-caption" id="screens-table"><strong>Table 1.</strong> Summary of
finished icon dimensions for each of the three generalized screen densities, by
icon type.</p>

  <table>
    <tbody>
<tr>
<th>Icon Type</th><th colspan="3">Standard Asset Sizes (in Pixels), for
Generalized Screen Densities</th></tr>
    <tr>
      <td style="background-color:#f3f3f3"></td>
      <th style="background-color:#f3f3f3;font-weight:normal">
        <nobr>Low density screen <em>(ldpi)</em></nobr>
      </th>
      <th style="background-color:#f3f3f3;font-weight:normal">
        <nobr>Medium density screen <em>(mdpi)</em></nobr>
      </th>
      <th style="background-color:#f3f3f3;font-weight:normal">
        <nobr>High density screen <em>(hdpi)</em><nobr>
      </th>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Launcher
      </th>
      <td>
          36 x 36 px
      </td>

      <td>
         48 x 48 px
      </td>
      <td>
          72 x 72 px
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Menu
      </th>
      <td>
          36 x 36 px
      </td>

      <td>
         48 x 48 px
      </td>
      <td>
          72 x 72 px
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Status Bar (Android 2.3 and later)
      </th>
      <td>
        12w x 19h px<br>
        (preferred, width may vary)
      </td>

      <td>
        16w x 25h px<br>
        (preferred, width may vary)
      </td>
      <td>
         24w x 38h px<br>
        (preferred, width may vary)
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Status Bar (Android 2.2 and below)
      </th>
      <td>
          19 x 19 px
      </td>

      <td>
         25 x 25 px
      </td>
      <td>
          38 x 38 px
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Tab
      </th>
      <td>
          24 x 24 px
      </td>

      <td>
         32 x 32 px
      </td>
      <td>
          48 x 48 px
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        Dialog
      </th>
      <td>
          24 x 24 px
      </td>

      <td>
         32 x 32 px
      </td>
      <td>
          48 x 48 px
      </td>
    </tr>

    <tr>
      <th style="background-color:#f3f3f3;font-weight:normal">
        List View
      </th>
      <td>
          24 x 24 px
      </td>

      <td>
         32 x 32 px
      </td>
      <td>
          48 x 48 px
      </td>
    </tr>
    </tbody>
  </table>




<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</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 &mdash;
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>assets/...
    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</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</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, as
shown in <a href="#screens-table">Table 1</a>, 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 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>

<p>It's also beneficial to add guide lines (also known as guides) to your large
artboard for the recommended safe margins at the highest target density.
Continuing with the example above, per the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html#size5">guidelines</a>,
launcher icon content should be 60x60 pixels (56x56 for square icons) within the
full 72x72 asset, or a safe margin of 6 pixels on each side. On an 864x864
artboard, this corresponds to horizontal and vertical guide lines 72 pixels from
each side of the artboard.</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>To help keep each image asset as small as possible, make sure to remove any
unnecessary headers from the file, such as Adobe Fireworks metadata or Adobe
Photoshop headers. To remove the Photoshop header, follow these steps: </p>

<ol>
<li>Under the <strong>File</strong> menu, choose the <strong>Save for Web &amp;
Devices</strong> command </li>
<li>On the "Save for Web &amp; Devices" panel, set the Preset pop-up to
"PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the
Transparency box (if the image uses transparency)</li>
<li>Select <strong>Save</strong>.</li>
</ol>

<p>It is also useful to use PNG file size optimization tools such as <a
href="http://optipng.sourceforge.net/">OptiPNG</a> or <a
href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a>.



<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>