468 lines
15 KiB
Plaintext
468 lines
15 KiB
Plaintext
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 »</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_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 »</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 —
|
||
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 &
|
||
Devices</strong> command </li>
|
||
<li>On the "Save for Web & 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>
|
||
|