Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Icon Guidelines and Icon Templates Pack for ICS

Browse Source 
Change-Id: I2e0f132e636a288d21989095bac0da443e128d04
This commit is contained in:
Roman Nurik
2011-09-28 13:01:20 -07:00
parent 966222ef24
commit ced7edda54
21 changed files with 1157 additions and 676 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/html/guide/guide_toc.cs
View File

@@ -693,17 +693,20 @@
<ul>
<li class="toggle-list">
<div><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">
<span class="en">Icon Design</span>
<span class="en">Icon Design <span class="new">updated</span></span>
</a></div>
<ul>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_launcher.html">
<span class="en">Launcher Icons</span>
<span class="en">Launcher Icons <span class="new">updated</span></span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_menu.html">
<span class="en">Menu Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_action_bar.html">
<span class="en">Action Bar Icons <span class="new">new!</span></span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_status_bar.html">
<span class="en">Status Bar Icons</span>
<span class="en">Status Bar Icons <span class="new">updated</span></span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_tab.html">
<span class="en">Tab Icons</span>

196
docs/html/guide/practices/ui_guidelines/icon_design.jd
View File

@@ -36,6 +36,8 @@ parent.link=index.html
<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
@@ -74,6 +76,10 @@ icons used throughout Android applications:</p>
<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>
@@ -112,8 +118,8 @@ with the layers and treatments may vary based on the program you are using.</p>
</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>
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>
@@ -134,7 +140,7 @@ 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,
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
@@ -146,145 +152,6 @@ 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>
@@ -317,7 +184,7 @@ common prefix for each icon type. For example:</p>
<td><code>ic_launcher_calendar.png</code></td>
</tr>
<tr>
<td>Menu icons</td>
<td>Menu icons and Action Bar icons</td>
<td><code>ic_menu</code></td>
<td><code>ic_menu_archive.png</code></td>
</tr>
@@ -349,7 +216,7 @@ 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/...
<pre>art/...
ldpi/...
_pre_production/...
<em>working_file</em>.psd
@@ -359,6 +226,10 @@ organizes asset files per resolution. For example:</p>
<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>
@@ -380,6 +251,8 @@ application: </p>
drawable-mdpi/...
<em>finished_asset</em>.png
drawable-hdpi/...
<em>finished_asset</em>.png
drawable-xhdpi/...
<em>finished_asset</em>.png</pre>
@@ -398,25 +271,16 @@ 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
<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 72, 48, or 36 pixels wide, depending on screen density. If you
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>
<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>
@@ -431,22 +295,12 @@ densities. For example if a 60x60 circle was painted as a bitmap for
<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
<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>.
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>

189
docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd Normal file
View File

@@ -0,0 +1,189 @@
page.title=Action Bar Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon11">Android 3.0 and Later</a>
<ol>
<li><a href="#size11">Size and format</a></li>
<li><a href="#style11">Style, colors, and effects</a></li>
<li><a href="#examples11">Example icons</a></li>
</ol>
</li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
<li><a href="{@docRoot}guide/topics/ui/actionbar.html">Using the Action Bar</a></li>
</ol>
</div>
</div>
<p>Action Bar icons are graphical elements placed in the <a
href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> representing individual action
items.</p>
<p>As described in <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a>, you should create separate icons for all generalized screen densities, including low-,
medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
across the range of devices on which your application can be installed. See <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<h2 id="icon11">Android 3.0 and Later</h2>
<p>The following guidelines describe how to design action bar icons for Android
3.0 (API Level 11) and later.</p>
<h3 id="size11">Size and format</h2>
<p>Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished
action bar icon dimensions, corresponding to a given generalized screen density, are shown in
the table below.</p>
<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
finished Action Bar icon dimensions for each generalized screen density.</p>
<table>
<tbody>
<tr>
<th></th>
<th>
<code>ldpi</code> (120 dpi)<br>
<small style="font-weight: normal">(Low density screen)</small>
</th>
<th>
<code>mdpi</code> (160 dpi)<br>
<small style="font-weight: normal">(Medium density screen)</small>
</th>
<th>
<code>hdpi</code> (240 dpi)<br>
<small style="font-weight: normal">(High density screen)</small>
</th>
<th>
<code>xhdpi</code> (320 dpi)<br>
<small style="font-weight: normal">(Extra-high density screen)</small>
</th>
</tr>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
Action Bar Icon Size
</th>
<td>
18 x 18 px
</td>
<td>
24 x 24 px
</td>
<td>
36 x 36 px
</td>
<td>
48 x 48 px
</td>
</tr>
</tbody>
</table>
<h3 id="style11">Style, colors, and effects</h3>
<p>Action Bar icons are flat, pictured face on, and generally greyscale, depending on the
application's theme. Action Bar icons should not look three-dimensional.</p>
<p>In order to maintain consistency across the application's Action Bar, all Action Bar icons should
use the same color palette and effects.</p>
<p>When using the default "Holo Light" or "Holo Dark" themes, icons should use the color palette
and effects shown in Figure 1 and Figure 2, below.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/action_bar_holo_light_style.png"
alt="A view of effects for Action Bar icons for the 'Holo Light' theme.">
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 1. </strong>Style and effects for "Holo Light" theme Action Bar icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#333333</code>, 60% opacity
<br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
the outer shape and consist purely of transparent pixels.</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/action_bar_holo_dark_style.png"
alt="A view of effects for Action Bar icons for the 'Holo Dark' theme.">
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Style and effects for "Holo Dark" theme Action Bar icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code>, 80% opacity
<br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
the outer shape and consist purely of transparent pixels.</td></tr>
</table>
<p class="note"><strong>Note: </strong> icons should should have a transparent background;
the dark background here is for effect only.</p>
</div>
</div>
</td>
</tr>
</table>
<h3 id="examples11">Example icons</h3>
<p>Shown below are example extra-high-density Action Bar icons that are used throughout Android
system applications.</p>
<p class="warning"><strong>Warning:</strong> Because resources can change between platform versions,
you should not reference built-in icons using the Android platform resource IDs (i.e. menu or Action
Bar icons under <code>android.R.drawable</code>). If you want to use any icons or other internal
drawable resources, you should store a local copy of those icons or drawables in your application
resources, then reference the local copy from your application code. In that way, you can maintain
control over the appearance of your icons, even if the system's copy changes. Note that the grid
below is not intended to be complete.</p>
<img src="{@docRoot}images/icon_design/action_bar_examples.png" />

636
docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
View File

@@ -9,23 +9,15 @@ parent.link=icon_design.html
<h2>In this document</h2>
<ol>
<li><a href="#market">Application Icons in Android Market</a></li>
<li><a href="#icon5">Android 2.0 and Later</a>
<ol>
<li><a href="#style5">Style</a></li>
<li><a href="#size5">Size</a></li>
<li><a href="#materialscolors5">Materials and colors</a></li>
<li><a href="#effects5">Effects</a></li>
<li><a href="#dodonts5">Do's and don'ts</a></li>
<li><a href="#examples5">Example icons</a></li>
</ol>
</li>
<li><a href="#icon1">Android 1.6 and Earlier</a></li>
<li><a href="#goals">Goals of the Launcher Icon</a></li>
<li><a href="#dos_donts">Do's and Don'ts</a></li>
<li><a href="#size">Size and Format</a></li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="icon_design_launcher_archive.html">Older guidelines</a></li>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
@@ -34,487 +26,225 @@ Screens</a></li>
</div>
<p>A Launcher icon is a graphic that represents your application on the device's
Home screen and in the Launcher window.</p>
<p>A launcher icon is a graphic that represents your application. Launcher icons are used by
Launcher applications and appear on the user’s Home screen. Launcher icons can also be used to
represent shortcuts into your application (for example, a contact shortcut icon that opens detail
information for a contact).</p>
<p>The user opens the Launcher by touching the icon at the bottom of the Home
screen. The Launcher opens and exposes the icons for all of the installed
applications. The user selects an application and opens it by touching the
Launcher icon or by means of any hardware navigation controls available, such as
a trackball or d-pad.</p>
<p>As described in <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a>, you should create separate icons for all generalized screen densities, including low-,
medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
across the range of devices on which your application can be installed. See <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icons for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a> for
suggestions on how to work with multiple sets of icons.</p>
<p>A high-resolution version of your application launcher icon is also required by Android Market
for use in application listings. For more details on this, see <a
href="#icons_in_market">Application Icons in Android Market</a> below.</p>
<p class="note"><strong>Note:</strong>
<h2 id="market">Application Icons in Android Market</h2>
The launcher icon guidelines pertaining to all versions of Android have been re-written. If you
need to review the old guidelines, see the
<a href="icon_design_launcher_archive.html">launcher icon guidelines archive</a>.
<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing
your application on Android Market</a>, you will also need to provide a 512x512
pixel, high-resolution application icon in the <a
href="http://market.android.com/publish">developer console</a> at upload-time.
This icon will be used in various locations in Android Market and does
not replace your launcher icon.</p>
<p>For tips and recommendations on creating high-resolution launcher icons that
can easily be scaled up to 512x512, see
<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">
Tips for Designers</a>.</p>
<p>For information and specifications about high-resolution application
icons in Android Market, see the following article:</p>
<p style="margin-left:2em"><a
href="http://market.android.com/support/bin/answer.py?answer=1078870">
Graphic Assets for your Application (Android Market Help) &raquo;</a>
</p>
<h2 id="goals">Goals of the Launcher Icon</h2>
<h2 id="icon5">Android 2.0 and Later</h2>
<p>Starting with Android 2.0, launcher icons should be front-facing, instead of
at a three-quarter perspective. The following guidelines describe how to design
launcher icons for Android 2.0 (API Level 5) and later.</p>
<h3 id="style5">Style</h3>
<p>The launcher icons that you create should follow the general style principles
below. The guidelines aren't meant to restrict what you can do with your icons,
but rather they are meant to emphasize the common approaches that your icons can
share with others on the device. Figure 1, at right, provides examples. </p>
<div class="figure">
<img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png"
width="340">
<div class="figure" style="width:400px" id="launcher_examples">
<img src="{@docRoot}images/icon_design/launcher_examples.png"
alt="Example launcher icons for system and third-party applications"
width="400" />
<p class="img-caption">
<strong>Figure 1.</strong> Example launcher icons for Android 2.0 and
greater.
<strong>Figure 1.</strong> Example launcher icons for system applications (left) and
third-party applications (right).
</p>
</div>
<p>Clean and contemporary:</p>
<ul>
<li>Launcher icons should be modern and sometimes quirky; they should not
appear aged or ragged. You should avoid overused symbolic metaphors whenever
possible.</li>
</ul>
<p>Application launcher icons have three primary goals:</p>
<p>Simple and iconic:</p>
<ul>
<li>Android Launcher icons are caricatural in nature; your icons should be
highly simplified and exaggerated, so that they are appropriate for use at small
sizes. Your icons should not be overly complicated. </li>
<li>Try featuring a single part of an application as a symbolic
representation of the whole (for example, the Music icon features a speaker).
</li>
<li>Consider using natural outlines and shapes, both geometric and organic,
with a realistic (but never photorealistic) rendering. </li>
<li>Your icons <em>should not</em> present a cropped view of a larger
image.</li>
</ul>
<p>Tactile and textured:</p>
<ul>
<li>Icons should feature non-glossy, textured material. See
<a href="#materialscolors5">Materials and colors</a>, below, for more
information.</li>
</ul>
<p>Forward-facing and top-lit:</p>
<ul>
<li><em>New for Android 2.0 and later platforms</em>: Android Launcher
icons should be forward-facing, with very little perspective, and they
should be top-lit.</li>
</ul>
<p class="note"><strong>Note:</strong> Android applies separate text labels
using the application name when displaying launcher icons, so you should avoid
embedding text in your icon and instead focus on designing a distinct and
memorable icon.</p>
<h3 id="size5">Size and positioning</h3>
<p>Launcher icons should use a variety of shapes and forms that are scaled and
positioned inside the asset to create consistent visual weight with other
icons.</p>
<p>Figure 2 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em> to create a consistent visual weight and to allow for shadows. If
your icon is square or nearly square, it should be scaled even smaller.</p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 2 includes three different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
<li>The blue box is the recommended bounding box for the actual icon.
The icon box is sized smaller than the full asset box so that there is space to
include shadows and allow for special icon treatments.</li>
<li>The orange box is the recommended bounding box for the actual icon when
the content is square. The box for square icons is smaller than that for other
icons to establish a consistent visual weight across the two types.</li>
</ul>
<table>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for high-density (<code>hdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 72 x 72 px</li>
<li>Icon: 60 x 60 px</li>
<li>Square Icon: 56 x 56 px</li>
</ol>
</li>
<ol>
<li>Promote the brand and tell the story of the app.</li>
<li>Help users discover the app in Android Market.</li>
<li>Function well in the Launcher.</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_hdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 48 x 48 px</li>
<li>Icon: 40 x 40 px</li>
<li>Square Icon: 38 x 38 px</li>
</ol>
<h3 id="promoting_brand_story">Promote the brand story</h3>
<p>App launcher icons are an opportunity to showcase the brand and hint at the story of what your
app is about. Thus, you should:</p>
<ul>
<li>Create an icon that is unique and memorable.</li>
<li>Use a color scheme that suits your brand.</li>
<li>Don't try to communicate too much with the icon. A simple icon will have more impact and be
more memorable.</li>
<li>Avoid including the application name in the icon. The app name will always be displayed
adjacent to the icon.</li>
</ul>
<h3 id="help_users_discover">Help users discover the app in Android Market</h3>
<p>App launcher icons are the first look that prospective users will get of your app in Android
Market. A high quality app icon can influence users to find out more as they scroll through lists of
applications.</p>
<p>Quality matters here. A well-designed icon can be a strong signal that your app
is of similarly high quality. Consider working with an icon designer to develop the app’s launcher
icon.</p>
<p class="note"><strong>Note:</strong> Android Market requires a high-resolution version of your
icon; for more details on this, see <a href="#icons_in_market">Application Icons in Android
Market</a> below.</p>
<h3 id="function_well_in_launcher">Function well in the Launcher</h3>
<p>The launcher is where users will interact with the icon most frequently. A successful app
launcher icon will look great in all situations: on any background and next to any other icons and
app widgets. To do this, icons should:</p>
<ul>
<li>Communicate well at small sizes.</li>
<li>Work on a wide variety of backgrounds.</li>
<li>Reflect the implied lighting model of the launcher (top-lit).</li>
<li>If the icon is 3D, use a perspective that doesn't feel out of place with other icons;
forward-facing works best. <ul>
<li>3D icons work best with a shallow depth.</li></ul>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_mdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for low-density (<code>ldpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 36 x 36 px</li>
<li>Icon: 30 x 30 px</li>
<li>Square Icon: 28 x 28 px</li>
</ol>
<li>Have a unique silhouette for faster recognition; not all Android app icons should be square. <ul>
<li>Icons should not present a cropped view of a larger image.</li></ul>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_ldpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 2.</strong>
Launcher icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
</tr>
</table>
<li>Have similar weight to other icons. Icons that are too spindly or that don't use enough of
the space may not successfully attract the user’s attention, or may not stand out well on all
backgrounds.</li>
</ul>
<h2 id="dos_donts">Do's and Don'ts</h2>
<p>Below are some "do and don't" examples to consider when creating icons for your application.</p>
<h3 id="materialscolors5">Materials and colors</h3>
<p>Launcher icons should make use of tactile, top-lit, textured materials. Even
if your icon is just a simple shape, you should try to render in a way that
makes it appear to be sculpted from some real-world material.</p>
<p>Android launcher icons usually consist of a smaller shape within a
larger base shape and combine one neutral and one primary color. Icons may
use a combination of neutral colors but should maintain a fairly high level of
contrast. Icons should not use more than one primary color per icon, if
possible.</p>
<p>Launcher icons should use a limited color palette that includes a range
of neutral and primary colors. The icons should not be over-saturated.</p>
<p>The recommended color palette to use for Launcher icons is shown in Figure 3.
You can use elements of the palette for both the base color and the highlight
color. You can use the colors of the palette in conjunction with a
white-to-black vertical linear gradient overlay. This creates the impression
that the icon is lit from above and keeps the color less saturated.</p>
<img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="530">
<p class="img-caption">
<strong>Figure 3.</strong> Recommended color palette for icons.</p>
<p>When you combine the materials in Figure 4 with a color highlight from the
recommended palette above, you can create materials combinations such as those
shown in Figure 5. To get you started, the
<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon Templates Pack</a>
includes a Photoshop file (<code>ic_launcher_template/example_materials.psd</code>)
that provides all of the default materials, colors, and gradients. </p>
<table>
<table style="width: 600px">
<tbody>
<tr>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450">
<p class="img-caption">
<strong>Figure 4.</strong> Example materials that you can use to create
your icons.</p>
</td>
<td style="border:0;border-left:1px solid #ccc;margin-left:1em;padding-left:1em">
<img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450">
<p class="img-caption">
<strong>Figure 5.</strong> Examples of materials combined with base
and highlight colors from the recommended palette.</p>
</td>
<td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_settings.png"
alt="Side by side: overly complicated vs. simpler launcher icons"></td>
<td style="border:0; vertical-align:middle">Icons should not be overly complicated. Remember
that launcher icons will be used at often small sizes, so they should be distinguishable at
small sizes.</td>
</tr>
<tr>
<td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_clock.png"
alt="Side by side: cropped and glossy vs. matte and single-shape launcher icons"></td>
<td style="border:0; vertical-align:middle">Icons should not be cropped. Use unique shapes
where appropriate; remember that launcher icons should differentiate your application from
others. Additionally, do not use too glossy a finish unless the represented object has a
glossy material.</td>
</tr>
<tr>
<td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom_2.png"
alt="Side by side: overly thin vs. thicker, weightier icons"></td>
<td style="border:0; vertical-align:middle">Icons should not be thin. They should have a
similar weight to other icons. Overly thin icons will not stand out well on all
backgrounds.</td>
</tr>
<tr>
<td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom.png"
alt="Side by side: full-frame vs. subtly rounded and treated icons"></td>
<td style="border:0; vertical-align:middle">Icons should make use of the alpha channel, and
should not simply be full-frame images. Where appropriate, distinguish your icon with
subtle yet appealing visual treatment.</td>
</tr>
</tbody>
</table>
<h2 id="size">Size and Format</h2>
<h3 id="effects5">Effects</h3>
<p>Launcher icons are flat and the perspective is straight-on, rather than at an
angle. A drop shadow is used to create a sense of depth. Launcher icons can use
varying textures and lighting effects, but must be lit directly from above
(straight down).</p>
<p>In order to maintain consistency, all launcher icons should use the same
drop shadow effect, as shown in Figure 6.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_style.png"/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 6. </strong>Style, light and effects for launcher icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Lighting:</td><td>Top-lit, using appropriate lighting details<br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Drop shadow:</td><td><code>#000000</code>, 75% opacity<br>angle 90&deg;<br>distance 1px<br>size 3px<br><br></td></tr>
<tr><td><em>3.</em></td><td nowrap>Textures:</td><td>Tactile, appear to use real-world materials (monochromatic noise in example image)<br><br></td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dodonts5">Do's and don'ts</h3>
<p>Below are some "do and don't" examples to consider when creating icons for
your application. </p>
<p>Launcher icons should be 32-bit PNGs with an alpha channel for transparency. The finished
launcher icon dimensions corresponding to a given generalized screen density are shown in the
table below.</p>
<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
finished launcher icon dimensions for each generalized screen density.</p>
<table>
<tr>
<td style="border:0;width:50%">
<h4>Android Launcher icons are...</h4>
<ul>
<li>Modern, minimal, matte, tactile, and textured</li>
<li>Forward-facing and top-lit, whole, limited in color
palette</li>
</ul>
</td>
<td style="border:0;width:50%">
<h4>Android Launcher icons are not...</h4>
<ul>
<li>Antique, over-complicated, glossy, flat vector</li>
<li>Rotated, Cropped, Over-Saturated</li>
</ul>
</td>
</tr>
<tr>
<tbody>
<tr>
<th></th>
<th>
<code>ldpi</code> (120 dpi)<br>
<small style="font-weight: normal">(Low density screen)</small>
</th>
<th>
<code>mdpi</code> (160 dpi)<br>
<small style="font-weight: normal">(Medium density screen)</small>
</th>
<th>
<code>hdpi</code> (240 dpi)<br>
<small style="font-weight: normal">(High density screen)</small>
</th>
<th>
<code>xhdpi</code> (320 dpi)<br>
<small style="font-weight: normal">(Extra-high density screen)</small>
</th>
</tr>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
Launcher Icon Size
</th>
<td>
36 x 36 px
</td>
<td>
48 x 48 px
</td>
<td>
72 x 72 px
</td>
<td>
96 x 96 px
</td>
</tr>
</tbody>
</table>
<img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png"/>
<p class="img-caption">
<strong>Figure 7.</strong> Side-by-side examples of "do's and don'ts" for
Android launcher icons. </p>
<p>You can also include a few pixels of padding in launcher icons to maintain a
consistent visual weight with adjacent icons. For example, a 96 x 96 pixel <code>xhdpi</code>
launcher icon can contain a 88 x 88 pixel shape with 4 pixels on each side for padding.
This padding can also be used to make room for a subtle drop shadow, which can help ensure
that launcher icons are legible across on any background color.</p>
<h3 id="icons_in_market">Application Icons in Android Market</h3>
<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing your application on
Android Market</a>, you will also need to provide a 512 x 512 pixel, high-resolution application icon
in the <a href="http://market.android.com/publish">developer console</a> at upload time. This icon
will be used in various locations in Android Market and does not replace your launcher icon.</p>
<p>For tips and recommendations on creating high-resolution launcher icons that can easily be scaled
up to 512x512, see <a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">
Tips for Designers</a>.</p>
<h3 id="examples5">Example icons</h3>
<p>For information and specifications about high-resolution application icons in Android Market, see
the following article:</p>
<p>Shown below are examples of high-density launcher icons used by
Android applications. The icons are provided for your reference only &mdash;
please do not reuse these icons in your applications.</code>.</p>
<p style="margin-left:2em"><a href="http://market.android.com/support/bin/answer.py?answer=1078870">
Graphic Assets for your Application (Android Market Help) &raquo;</a>
<img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" />
<h2 id="icon1">Android 1.6 and earlier</h2>
<p>The following guidelines describe how to design launcher icons for Android
1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are
simplified 3D icons with a fixed perspective. The required perspective is shown
in Figure 8.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>The base of a launcher icon can face either the top view or the front
view.</li>
<li>The majority of a launcher icon’s surface should be created using the
launcher icon <a href="#palette1">color palette</a>. To add emphasis, use
one or more bright accent colors to highlight specific characteristics.</li>
<li>All launcher icons must be created with rounded corners to make them look
friendly and simple—as shown in Figure 8.</li>
<li>All dimensions specified are based on a 250x250 pixel artboard size
in a vector graphics editor like Adobe Illustrator, where the icon fits within
the artboard boundaries.</li>
<li><strong>Final art must be scaled down and exported as a transparent PNG file
using a raster image editor such as Adobe Photoshop. Do not include a background
color.</strong></li>
<li>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of
launcher icon corners and perspective angles" />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 8.</strong> Rounded corners and perspective angles for
launcher icons (90° is vertical).</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>92°</td></tr>
<tr><td><em>2.</em></td><td>92°</td></tr>
<tr><td><em>3.</em></td><td>173°</td></tr>
<tr><td><em>4.</em></td><td>171°</td></tr>
<tr><td><em>5.</em></td><td>49°</td></tr>
<tr><td><em>6.</em></td><td>171°</td></tr>
<tr><td><em>7.</em></td><td>64°</td></tr>
<tr><td><em>8.</em></td><td>97°</td></tr>
<tr><td><em>9.</em></td><td>75°</td></tr>
<tr><td><em>10.</em></td><td>93°</td></tr>
<tr><td><em>11.</em></td><td>169°</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>Launcher icons are simplified 3D icons using light and shadows for
definition. A light source is placed slightly to the left in front of the icon,
and therefore the shadow expands to the right and back.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of
light, effects, and shadows for launcher icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 9. </strong>Light, effects, and shadows for launcher icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr>
<tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67°</td></tr>
<tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr>
<tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr>
<tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="palette1">Launcher icon color palette</h4>
<table>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png"/></td>
<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for highlights on edges.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png"/></td>
<td class="image-caption-c">Light gradient<br><em>1:&nbsp;&nbsp;</em>r 0 | g 0 | b 0<br><em>2:&nbsp;&nbsp;</em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png"/></td>
<td class="image-caption-c">Medium gradient<br><em>1:&nbsp;&nbsp;</em>r 190 | g 190 | b 190<br><em>2:&nbsp;&nbsp;</em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png"/></td>
<td class="image-caption-c">Dark gradient<br><em>1:&nbsp;&nbsp;</em>r 100 | g 100 | b 100<br><em>2:&nbsp;&nbsp;</em>r 25 | g 25 | b 25<br>Used on details and parts in the shade of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png"/></td>
<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td>
</tr>
</table>
</td>
<td style="border:0">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Create the basic shapes with a tool like Adobe Illustrator, using the
angles described in <a href="#structure1">Launcher icon: structure</a>.
The shapes and effects must fit within a 250x250 pixel artboard.</li>
<li>Add depth to shapes by extruding them and create the rounded corners as
described for the launcher icon structure.</li>
<li>Add details and colors. Gradients should be treated as if there is a light
source placed slightly to the left in front of the icon.</li>
<li>Create the shadows with the correct angle and blur effect.</li>
<li>Import the icon into a tool like Adobe Photoshop and scale to fit an image
size of 48x48 px on a transparent background.</li>
<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>
<br><br>

524
docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd Normal file
View File

@@ -0,0 +1,524 @@
page.title=Launcher Icons (Archive)
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon5">Android 2.0</a>
<ol>
<li><a href="#style5">Style</a></li>
<li><a href="#size5">Size</a></li>
<li><a href="#materialscolors5">Materials and colors</a></li>
<li><a href="#effects5">Effects</a></li>
<li><a href="#dodonts5">Do's and don'ts</a></li>
<li><a href="#examples5">Example icons</a></li>
</ol>
</li>
<li><a href="#icon1">Android 1.6 and Earlier</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 class="warning">
<strong>Warning:</strong> This document describes obsolete guidelines for
creating launcher icons. Follow the <a href="icon_design_launcher.html">latest
launcher icon guidelines</a> instead.
</p>
<p>A Launcher icon is a graphic that represents your application on the device's
Home screen and in the Launcher window.</p>
<p>The user opens the Launcher by touching the icon at the bottom of the Home
screen. The Launcher opens and exposes the icons for all of the installed
applications. The user selects an application and opens it by touching the
Launcher icon or by means of any hardware navigation controls available, such as
a trackball or d-pad.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icons for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a> for
suggestions on how to work with multiple sets of icons.</p>
<h2 id="market">Application Icons in Android Market</h2>
<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing
your application on Android Market</a>, you will also need to provide a 512x512
pixel, high-resolution application icon in the <a
href="http://market.android.com/publish">developer console</a> at upload-time.
This icon will be used in various locations in Android Market and does
not replace your launcher icon.</p>
<p>For tips and recommendations on creating high-resolution launcher icons that
can easily be scaled up to 512x512, see
<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">
Tips for Designers</a>.</p>
<p>For information and specifications about high-resolution application
icons in Android Market, see the following article:</p>
<p style="margin-left:2em"><a
href="http://market.android.com/support/bin/answer.py?answer=1078870">
Graphic Assets for your Application (Android Market Help) &raquo;</a>
<h2 id="icon5">Android 2.0 and Later</h2>
<p>Starting with Android 2.0, launcher icons should be front-facing, instead of
at a three-quarter perspective. The following guidelines describe how to design
launcher icons for Android 2.0 (API Level 5) and later.</p>
<h3 id="style5">Style</h3>
<p>The launcher icons that you create should follow the general style principles
below. The guidelines aren't meant to restrict what you can do with your icons,
but rather they are meant to emphasize the common approaches that your icons can
share with others on the device. Figure 1, at right, provides examples. </p>
<div class="figure">
<img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png"
width="340">
<p class="img-caption">
<strong>Figure 1.</strong> Example launcher icons for Android 2.0 and
greater.
</p>
</div>
<p>Clean and contemporary:</p>
<ul>
<li>Launcher icons should be modern and sometimes quirky; they should not
appear aged or ragged. You should avoid overused symbolic metaphors whenever
possible.</li>
</ul>
<p>Simple and iconic:</p>
<ul>
<li>Android Launcher icons are caricatural in nature; your icons should be
highly simplified and exaggerated, so that they are appropriate for use at small
sizes. Your icons should not be overly complicated. </li>
<li>Try featuring a single part of an application as a symbolic
representation of the whole (for example, the Music icon features a speaker).
</li>
<li>Consider using natural outlines and shapes, both geometric and organic,
with a realistic (but never photorealistic) rendering. </li>
<li>Your icons <em>should not</em> present a cropped view of a larger
image.</li>
</ul>
<p>Tactile and textured:</p>
<ul>
<li>Icons should feature non-glossy, textured material. See
<a href="#materialscolors5">Materials and colors</a>, below, for more
information.</li>
</ul>
<p>Forward-facing and top-lit:</p>
<ul>
<li><em>New for Android 2.0 and later platforms</em>: Android Launcher
icons should be forward-facing, with very little perspective, and they
should be top-lit.</li>
</ul>
<p class="note"><strong>Note:</strong> Android applies separate text labels
using the application name when displaying launcher icons, so you should avoid
embedding text in your icon and instead focus on designing a distinct and
memorable icon.</p>
<h3 id="size5">Size and positioning</h3>
<p>Launcher icons should use a variety of shapes and forms that are scaled and
positioned inside the asset to create consistent visual weight with other
icons.</p>
<p>Figure 2 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em> to create a consistent visual weight and to allow for shadows. If
your icon is square or nearly square, it should be scaled even smaller.</p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 2 includes three different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
<li>The blue box is the recommended bounding box for the actual icon.
The icon box is sized smaller than the full asset box so that there is space to
include shadows and allow for special icon treatments.</li>
<li>The orange box is the recommended bounding box for the actual icon when
the content is square. The box for square icons is smaller than that for other
icons to establish a consistent visual weight across the two types.</li>
</ul>
<table>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for high-density (<code>hdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 72 x 72 px</li>
<li>Icon: 60 x 60 px</li>
<li>Square Icon: 56 x 56 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_hdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 48 x 48 px</li>
<li>Icon: 40 x 40 px</li>
<li>Square Icon: 38 x 38 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_mdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Launcher icon dimensions for low-density (<code>ldpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 36 x 36 px</li>
<li>Icon: 30 x 30 px</li>
<li>Square Icon: 28 x 28 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/launcher_size_ldpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 2.</strong>
Launcher icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
</tr>
</table>
<h3 id="materialscolors5">Materials and colors</h3>
<p>Launcher icons should make use of tactile, top-lit, textured materials. Even
if your icon is just a simple shape, you should try to render in a way that
makes it appear to be sculpted from some real-world material.</p>
<p>Android launcher icons usually consist of a smaller shape within a
larger base shape and combine one neutral and one primary color. Icons may
use a combination of neutral colors but should maintain a fairly high level of
contrast. Icons should not use more than one primary color per icon, if
possible.</p>
<p>Launcher icons should use a limited color palette that includes a range
of neutral and primary colors. The icons should not be over-saturated.</p>
<p>The recommended color palette to use for Launcher icons is shown in Figure 3.
You can use elements of the palette for both the base color and the highlight
color. You can use the colors of the palette in conjunction with a
white-to-black vertical linear gradient overlay. This creates the impression
that the icon is lit from above and keeps the color less saturated.</p>
<img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="530">
<p class="img-caption">
<strong>Figure 3.</strong> Recommended color palette for icons.</p>
<p>When you combine the materials in Figure 4 with a color highlight from the
recommended palette above, you can create materials combinations such as those
shown in Figure 5. To get you started, the
<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon Templates Pack</a>
includes a Photoshop file (<code>ic_launcher_template/example_materials.psd</code>)
that provides all of the default materials, colors, and gradients. </p>
<table>
<tbody>
<tr>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450">
<p class="img-caption">
<strong>Figure 4.</strong> Example materials that you can use to create
your icons.</p>
</td>
<td style="border:0;border-left:1px solid #ccc;margin-left:1em;padding-left:1em">
<img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450">
<p class="img-caption">
<strong>Figure 5.</strong> Examples of materials combined with base
and highlight colors from the recommended palette.</p>
</td>
</tr>
</tbody>
</table>
<h3 id="effects5">Effects</h3>
<p>Launcher icons are flat and the perspective is straight-on, rather than at an
angle. A drop shadow is used to create a sense of depth. Launcher icons can use
varying textures and lighting effects, but must be lit directly from above
(straight down).</p>
<p>In order to maintain consistency, all launcher icons should use the same
drop shadow effect, as shown in Figure 6.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_style.png"/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 6. </strong>Style, light and effects for launcher icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Lighting:</td><td>Top-lit, using appropriate lighting details<br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Drop shadow:</td><td><code>#000000</code>, 75% opacity<br>angle 90&deg;<br>distance 1px<br>size 3px<br><br></td></tr>
<tr><td><em>3.</em></td><td nowrap>Textures:</td><td>Tactile, appear to use real-world materials (monochromatic noise in example image)<br><br></td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dodonts5">Do's and don'ts</h3>
<p>Below are some "do and don't" examples to consider when creating icons for
your application. </p>
<table>
<tr>
<td style="border:0;width:50%">
<h4>Android Launcher icons are...</h4>
<ul>
<li>Modern, minimal, matte, tactile, and textured</li>
<li>Forward-facing and top-lit, whole, limited in color
palette</li>
</ul>
</td>
<td style="border:0;width:50%">
<h4>Android Launcher icons are not...</h4>
<ul>
<li>Antique, over-complicated, glossy, flat vector</li>
<li>Rotated, Cropped, Over-Saturated</li>
</ul>
</td>
</tr>
<tr>
</table>
<img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png"/>
<p class="img-caption">
<strong>Figure 7.</strong> Side-by-side examples of "do's and don'ts" for
Android launcher icons. </p>
<h3 id="examples5">Example icons</h3>
<p>Shown below are examples of high-density launcher icons used by
Android applications. The icons are provided for your reference only &mdash;
please do not reuse these icons in your applications.</code>.</p>
<img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" />
<h2 id="icon1">Android 1.6 and earlier</h2>
<p>The following guidelines describe how to design launcher icons for Android
1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are
simplified 3D icons with a fixed perspective. The required perspective is shown
in Figure 8.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>The base of a launcher icon can face either the top view or the front
view.</li>
<li>The majority of a launcher icon’s surface should be created using the
launcher icon <a href="#palette1">color palette</a>. To add emphasis, use
one or more bright accent colors to highlight specific characteristics.</li>
<li>All launcher icons must be created with rounded corners to make them look
friendly and simple—as shown in Figure 8.</li>
<li>All dimensions specified are based on a 250x250 pixel artboard size
in a vector graphics editor like Adobe Illustrator, where the icon fits within
the artboard boundaries.</li>
<li><strong>Final art must be scaled down and exported as a transparent PNG file
using a raster image editor such as Adobe Photoshop. Do not include a background
color.</strong></li>
<li>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of
launcher icon corners and perspective angles" />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 8.</strong> Rounded corners and perspective angles for
launcher icons (90° is vertical).</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>92°</td></tr>
<tr><td><em>2.</em></td><td>92°</td></tr>
<tr><td><em>3.</em></td><td>173°</td></tr>
<tr><td><em>4.</em></td><td>171°</td></tr>
<tr><td><em>5.</em></td><td>49°</td></tr>
<tr><td><em>6.</em></td><td>171°</td></tr>
<tr><td><em>7.</em></td><td>64°</td></tr>
<tr><td><em>8.</em></td><td>97°</td></tr>
<tr><td><em>9.</em></td><td>75°</td></tr>
<tr><td><em>10.</em></td><td>93°</td></tr>
<tr><td><em>11.</em></td><td>169°</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>Launcher icons are simplified 3D icons using light and shadows for
definition. A light source is placed slightly to the left in front of the icon,
and therefore the shadow expands to the right and back.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of
light, effects, and shadows for launcher icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 9. </strong>Light, effects, and shadows for launcher icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr>
<tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67°</td></tr>
<tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr>
<tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr>
<tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="palette1">Launcher icon color palette</h4>
<table>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png"/></td>
<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for highlights on edges.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png"/></td>
<td class="image-caption-c">Light gradient<br><em>1:&nbsp;&nbsp;</em>r 0 | g 0 | b 0<br><em>2:&nbsp;&nbsp;</em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png"/></td>
<td class="image-caption-c">Medium gradient<br><em>1:&nbsp;&nbsp;</em>r 190 | g 190 | b 190<br><em>2:&nbsp;&nbsp;</em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png"/></td>
<td class="image-caption-c">Dark gradient<br><em>1:&nbsp;&nbsp;</em>r 100 | g 100 | b 100<br><em>2:&nbsp;&nbsp;</em>r 25 | g 25 | b 25<br>Used on details and parts in the shade of the icon.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png"/></td>
<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td>
</tr>
</table>
</td>
<td style="border:0">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Create the basic shapes with a tool like Adobe Illustrator, using the
angles described in <a href="#structure1">Launcher icon: structure</a>.
The shapes and effects must fit within a 250x250 pixel artboard.</li>
<li>Add depth to shapes by extruding them and create the rounded corners as
described for the launcher icon structure.</li>
<li>Add details and colors. Gradients should be treated as if there is a light
source placed slightly to the left in front of the icon.</li>
<li>Create the shadows with the correct angle and blur effect.</li>
<li>Import the icon into a tool like Adobe Photoshop and scale to fit an image
size of 48x48 px on a transparent background.</li>
<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>

31
docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
View File

@@ -9,7 +9,8 @@ parent.link=icon_design.html
<h2>In this document</h2>
<ol>
<li><a href="#icon9">Android 2.3 and Later</a>
<li><a href="#icon11">Android 3.0 and Later</a>
<li><a href="#icon9">Android 2.3</a>
<ol>
<li><a href="#size9">Size</a></li>
<li><a href="#style9">Style, colors, and effects</a></li>
@@ -37,11 +38,13 @@ when they press the Menu button. They are drawn in a flat-front perspective and
in greyscale. Elements in a menu icon must not be visualized in 3D or
perspective.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a>
<p>As described in <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a>, you should create separate icons for all generalized screen densities, including low-,
medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
across the range of devices on which your application can be installed. See <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
@@ -52,6 +55,16 @@ href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Ic
Templates Pack</a>.</p>
<h2 id="icon11">Android 3.0 and Later</h2>
<p>As of Android 3.0, the options menu has been superseded by the <a
href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>. Please refer to the <a
href="icon_design_action_bar.html">Action Bar Icon Design Guidelines</a> for recommendations on
creating icons for action items.</p>
<h2 id="icon9">Android 2.3</h2>
<p class="caution"><strong>Caution:</strong> The style and content sizing of
menu icons have changed in Android 2.3 compared to
<a href="#icon1">previous versions</a>:
@@ -67,12 +80,8 @@ asset. Final asset sizes have not changed.
</p>
<h2 id="icon9">Android 2.3 and Later</h2>
<p>The following guidelines describe how to design menu icons for Android
2.3 (API Level 9) and later.</p>
2.3 (API Levels 9 and 10).</p>
<h3 id="size9">Size and positioning</h3>

236
docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd
View File

@@ -9,11 +9,20 @@ parent.link=icon_design.html
<h2>In this document</h2>
<ol>
<li><a href="#icon9">Android 2.3 and Later</a>
<li><a href="#icon11">Android 3.0 and Later</a>
<ol>
<li><a href="#overview11">Overview of changes</a></li>
<li><a href="#size11">Size and format</a></li>
<li><a href="#style11">Style, colors, and effects</a></li>
<li><a href="#dimming11">Automatic dimming</a></li>
<li><a href="#examples11">Example icons</a></li>
</ol>
</li>
<li><a href="#icon9">Android 2.3</a>
<ol>
<li><a href="#size9">Size</a></li>
<li><a href="#style9">Style, color, and effects</a></li>
<li><a href="#dodonts9">Do's and don'ts</a></li>
<li><a href="#dosdonts9">Do's and don'ts</a></li>
<li><a href="#examples9">Example icons</a></li>
</ol>
</li>
@@ -35,54 +44,217 @@ Screens</a></li>
<p>Status bar icons are used to represent notifications from your application in
the status bar.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a> for
suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>As described in <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a>, you should create separate icons for all generalized screen densities, including low-,
medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
across the range of devices on which your application can be installed. See <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<p class="warning"><strong>Warning:</strong>
<div class="warning">
The style and dimensions of status bar icons have changed drastically in
Android 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To
provide support for all Android versions</strong>, developers should:
<br>
1. Place status bar icons for Android 2.3 and higher in the
<code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>, and <code>drawable-ldpi-v9</code> directories.
<br>
2. Place status bar icons for previous versions in
<code>drawable-hdpi</code>, <code>drawable-mdpi</code>, and <code>drawable-ldpi</code> directories.
<p><strong>Warning:</strong>The style and dimensions of status bar icons have changed dramatically
in Android 3.0 and 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To
provide support for all Android versions</strong>, developers should:</p>
<ol>
<li>Place status bar icons for Android 3.0 and later in the
<code>drawable-xhdpi-v11</code>, <code>drawable-hdpi-v11</code>,<code>drawable-mdpi-v11</code>,
and <code>drawable-ldpi-v11</code> directories.</li>
<li>Place status bar icons for Android 2.3 in the
<code>drawable-xhdpi-v9</code>, <code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>,
and <code>drawable-ldpi-v9</code> directories.</li>
<li>Place status bar icons for previous versions in
<code>drawable-xhdpi</code>, <code>drawable-hdpi</code>, <code>drawable-mdpi</code>,
and <code>drawable-ldpi</code> directories.</li>
</ol>
</div>
<h2 id="icon11">Android 3.0 and Later</h2>
<p>The following guidelines describe how to design status bar icons for Android
3.0 (API Level 11) and later.</p>
<h3 id="overview11">Overview of changes</h3>
<p>The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons
used in Android 3.0 and later are easier to create, and they allow for more flexible presentation
in a variety of situations:</p>
<ul>
<li>Status bar icons are composed simply of <strong>white pixels on a transparent
backdrop</strong>, with alpha blending used for smooth edges and internal texture where
appropriate.</li>
<li>Icons are square icon contents should <strong>fill the available space</strong>, although a
small amount of internal padding can help maintain balance across status bar icons. See
<a href="#size11">Size and format</a> below for details.</li>
</ul>
<p>These larger and brighter icons, while highly legible, are too intense for use on dark phone
status bars. These icons would be too distracting if used directly in the status bar. Therefore:
</p>
<ul>
<li><strong>The system automatically resizes and dims</strong> these icons in such situations and
developers do not need to supply a separate icon for this purpose. See
<a href="#dimming11">Automatic dimming</a> below for more on this behavior.</li>
</ul>
<h3 id="size11">Size and format</h2>
<p>Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished
status bar icon dimensions corresponding to a given generalized screen density are shown in the
table below.</p>
<p class="note"><strong>Note:</strong> The system will shrink and dim status bar icons to minimize
distractions, allowing users to focus on the foreground activity.</p>
<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
finished icon dimensions for each generalized screen density.</p>
<table>
<tbody>
<tr>
<th></th>
<th>
<code>ldpi</code> (120 dpi)<br>
<small style="font-weight: normal">(Low density screen)</small>
</th>
<th>
<code>mdpi</code> (160 dpi)<br>
<small style="font-weight: normal">(Medium density screen)</small>
</th>
<th>
<code>hdpi</code> (240 dpi)<br>
<small style="font-weight: normal">(High density screen)</small>
</th>
<th>
<code>xhdpi</code> (320 dpi)<br>
<small style="font-weight: normal">(Extra-high density screen)</small>
</th>
</tr>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
Status Bar Icon Size<br><small>(Android 3.0 and Later)</small>
</th>
<td>
18 x 18 px
</td>
<td>
24 x 24 px
</td>
<td>
36 x 36 px
</td>
<td>
48 x 48 px
</td>
</tr>
</tbody>
</table>
<p>You can also include a few pixels of padding in status bar icons to maintain a
consistent visual weight with adjacent icons. For example, a 48 x 48 pixel <code>xhdpi</code>
status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.</p>
<h3 id="style11">Style, colors, and effects</h3>
<p>Status bar icons are flat, pictured face on, and must be white on a transparent background.</p>
<p>In order to maintain consistency across all status bar notifications, status bar icons should
use the styling shown in Figure 1.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/status_bar_honeycomb_style.png"
alt="A view of effects for status bar icons.">
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 1. </strong>Style for status bar icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code><br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
the outer shape and consist purely of transparent pixels.</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dimming11">Automatic dimming</h3>
<p>The system may dim and shrink status bar icons to allow users to focus on the foreground
activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices
reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at
full intensity in the expanded notification panel. An example of what this looks like is shown below
in Figure 2.</p>
<img src="{@docRoot}images/icon_design/status_bar_honeycomb_dimming.png"
alt="Automatic shrinking and dimming behavior in Android 3.0 and later">
<p class="img-caption">
<strong>Figure 2.</strong> Automatic shrinking and dimming behavior in Android 3.0 and later.
</p>
<h3 id="examples11">Example icons</h3>
<h2 id="icon9">Android 2.3 and Later</h2>
<p>Shown below are example extra-high-density status bar icons that are used throughout Android
system applications.</p>
<p class="warning"><strong>Warning:</strong> Because resources can change between platform versions,
you should not reference built-in icons using the Android platform resource IDs (i.e. status bar
icons under <code>android.R.drawable</code>). If you want to use any icons or other internal
drawable resources, you should store a local copy of those icons or drawables in your application
resources, then reference the local copy from your application code. In that way, you can maintain
control over the appearance of your icons, even if the system's copy changes. Note that the grid
below is not intended to be complete.</p>
<img src="{@docRoot}images/icon_design/status_bar_honeycomb_examples.png" />
<h2 id="icon9">Android 2.3</h2>
<p>The following guidelines describe how to design status bar icons for Android
2.3 (API Level 9) and later.</p>
2.3 (API Levels 9 and 10).</p>
<h3 id="size9">Size and positioning</h3>
<p>Status bar icons should use simple shapes and forms and those must be
scaled and positioned inside the final asset.</p>
<p>Figure 1 illustrates various ways of positioning the icon inside the
<p>Figure 3 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em>. <strong>Status bar icons may vary in width, but only
minimally.</strong></p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 1 includes two different guide rectangles:</p>
Figure 3 includes two different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
@@ -144,7 +316,7 @@ varying icon shapes while maintaining a consistent visual weight.</li>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 1.</strong>
<p class="table-caption"><strong>Figure 3.</strong>
Status bar icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
@@ -167,7 +339,7 @@ varying icon shapes while maintaining a consistent visual weight.</li>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Style and effects for status icons.</p>
<p><strong>Figure 4. </strong>Style and effects for status icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
@@ -223,7 +395,7 @@ be complete.</p>
<ul>
<li>Rounded corners must always be applied to the base shape and to the details
of a status bar icon shown Figure 3.</li>
of a status bar icon shown Figure 5.</li>
<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
pixel safeframe.</li>
@@ -245,7 +417,7 @@ status bar icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 3. </strong>Safeframe and corner-rounding for status bar
<p><strong>Figure 5. </strong>Safeframe and corner-rounding for status bar
icons. Icon size is 25x25.</p>
</div>
</td>
@@ -265,7 +437,7 @@ face-on to enhance clarity at small sizes.</p>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 4. </strong>Light, effects, and shadows for status bar icons.</p>
<p><strong>Figure 6. </strong>Light, effects, and shadows for status bar icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
@@ -320,8 +492,8 @@ face-on to enhance clarity at small sizes.</p>
<li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px
image on a transparent background. Mind the safeframe, and keep the upper and
lower 2 pixels free.</li>
<li>Add rounded corners as specified in Figure 3.</li>
<li>Add light, effects, and shadows as specified in Figure 4.</li>
<li>Add rounded corners as specified in Figure 5.</li>
<li>Add light, effects, and shadows as specified in Figure 6.</li>
<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
</ol>

6
docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
View File

@@ -10,7 +10,7 @@ parent.link=icon_design.html
<ol>
<li><a href="#tabstates">Providing Icons for Two Tab States</a>
<li><a href="#icon5">Android 2.0 and Later</a>
<li><a href="#icon5">Android 2.0 through Android 2.3</a>
<ol>
<li><a href="#size5">Size</a></li>
<li><a href="#style5">Style, colors, and effects</a></li>
@@ -125,10 +125,10 @@ for <code>ic_tab_friends.xml</code>:</p>
<h2 id="icon5">Android 2.0 and Later</h2>
<h2 id="icon5">Android 2.0 through Android 2.3</h2>
<p>The following guidelines describe how to design tab icons for Android
2.0 (API Level 5) and later.</p>
2.0 through Android 2.3 (API Levels 5 through 10).</p>
<h3 id="size5">Size and positioning</h3>

6
docs/html/guide/practices/ui_guidelines/index.jd
View File

@@ -12,8 +12,8 @@ these guidelines as we release them.</p>
<dl>
<dt><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon
Design Guidelines</a> and <a
href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon Templates Pack
&raquo; </a></dt>
href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon Templates Pack
&raquo; </a> <span class="new">updated</span></dt>
<dd>Your applications need a wide variety of icons, from a launcher icon to
icons in menus, dialogs, tabs, the status bar, and lists. The Icon Guidelines
describe each kind of icon in detail, with specifications for the size, color,
@@ -22,7 +22,7 @@ The Icon Templates Pack is an archive of Photoshop and Illustrator templates and
filters that make it much simpler to create conforming icons.</dd>
</dl>
<dl>
<dt><a href="{@docRoot}guide/practices/ui_guidelines/widget_design.html">Widget Design Guidelines</a> </dt>
<dt><a href="{@docRoot}guide/practices/ui_guidelines/widget_design.html">Widget Design Guidelines</a> <span class="new">updated</span></dt>
<dd>A widget displays an application's most important or timely information
at a glance, on a user's Home screen. These design guidelines describe how to
design widgets that fit with others on the Home screen. They include links to

BIN
docs/html/images/icon_design/action_bar_examples.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
docs/html/images/icon_design/action_bar_holo_dark_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/html/images/icon_design/action_bar_holo_light_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/html/images/icon_design/launcher_dodont_clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/html/images/icon_design/launcher_dodont_custom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/html/images/icon_design/launcher_dodont_custom_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/html/images/icon_design/launcher_dodont_settings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/html/images/icon_design/launcher_examples.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
docs/html/images/icon_design/status_bar_honeycomb_dimming.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/html/images/icon_design/status_bar_honeycomb_examples.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
docs/html/images/icon_design/status_bar_honeycomb_style.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/html/shareables/icon_templates-v4.0.zip Normal file
View File

Binary file not shown.