docs/html/guide/practices/ui_guidelines/icon_design.jd - platform/frameworks/base - Git at Google

 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 &raquo;</a></li>
 <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>
 </ol>

 <h2>See also</h2>

 <ol>
 <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
 Screens</a></li>
 </ol>


 </div>
 </div>


 <div class="design-announce">
 <p><strong>New Guides for App Designers!</strong></p>
 <p>Check out the new documents for designers at <strong><a
 href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines
 for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p>
 </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 &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 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 &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>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>
	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>
	</ol>

	<h2>See also</h2>

	<ol>
	<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
	Screens</a></li>
	</ol>


	</div>
	</div>


	<div class="design-announce">
	<p><strong>New Guides for App Designers!</strong></p>
	<p>Check out the new documents for designers at <strong><a
	href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines
	for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p>
	</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>