Update icon guidelines for Gingerbread. Also add new, revamped icon templates pack.
Change-Id: Ie02e5e5cade3837e863063bcec8fa5c20a83b1ba
diff --git a/docs/html/guide/guide_toc.cs b/docs/html/guide/guide_toc.cs
index 545807e..52a7421 100644
--- a/docs/html/guide/guide_toc.cs
+++ b/docs/html/guide/guide_toc.cs
@@ -484,9 +484,31 @@
<span class="en">UI Guidelines</span>
</a></div>
<ul>
- <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">
- <span class="en">Icon Design</span>
- </a></li>
+ <li class="toggle-list">
+ <div><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">
+ <span class="en">Icon Design</span>
+ </a></div>
+ <ul>
+ <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_launcher.html">
+ <span class="en">Launcher Icons</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_status_bar.html">
+ <span class="en">Status Bar Icons</span>
+ </a></li>
+ <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_tab.html">
+ <span class="en">Tab Icons</span>
+ </a></li>
+ <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_dialog.html">
+ <span class="en">Dialog Icons</span>
+ </a></li>
+ <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_list.html">
+ <span class="en">List View Icons</span>
+ </a></li>
+ </ul>
+ </li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/widget_design.html">
<span class="en">App Widget Design</span>
</a></li>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design.jd b/docs/html/guide/practices/ui_guidelines/icon_design.jd
index 389d5fa..d3b702d 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd
@@ -1,4 +1,6 @@
-page.title=Icon Design Guidelines, Android 2.0
+page.title=Icon Design Guidelines
+parent.title=UI Guidelines
+parent.link=index.html
@jd:body
<div id="qv-wrapper">
@@ -15,37 +17,27 @@
<h2>In this document</h2>
<ol>
-<li><a href="#launcherstructure">Launcher icon</a></li>
-<li><a href="#menustructure">Menu icon</a></li>
-<li><a href="#statusbarstructure">Status bar icon</a></li>
-<li><a href="#tabstructure">Tab icon</a></li>
-<li><a href="#dialogstructure">Dialog icon</a></li>
-<li><a href="#listviewstructure">List view icon</a></li>
-
-<li style="margin-top:3px;"><a href="#design_tips">Tips for Designers</a></li>
<li><a href="#templatespack">Using the Icon Templates Pack</a></li>
-
-<li><a href="#iconappendix">Icon appendix</a>
- <ol>
- <li><a href="#launcherapx">Standard Launcher icons</a></li>
- <li><a href="#menuapx">Standard Menu icons</a></li>
- <li><a href="#statusbarapx">Standard Status bar icons</a></li>
- </ol>
-</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>Older versions</h2>
+<h2>Topics</h2>
<ol>
-<li style="margin-top:4px;"><a
-href="{@docRoot}guide/practices/ui_guidelines/icon_design_1.html">Icon Design
-Guidelines, Android 1.0</a></li>
+<li><a href="icon_design_launcher.html">Launcher Icons</a></li>
+<li><a href="icon_design_menu.html">Menu Icons</a></li>
+<li><a href="icon_design_status_bar.html">Status Bar Icons</a></li>
+<li><a href="icon_design_tab.html">Tab Icons</a></li>
+<li><a href="icon_design_dialog.html">Dialog Icons</a></li>
+<li><a href="icon_design_list.html">List View Icons</a></li>
</ol>
<h2>Downloads</h2>
<ol>
+<li><a href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon
+Templates Pack, v2.3 »</a></li>
<li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon
Templates Pack, v2.0 »</a></li>
<li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon
@@ -72,9 +64,62 @@
Android 2.x framework. Following these guidelines will help you to create a
polished and unified experience for the user.</p>
+<p>The following documents discuss detailed guidelines for the common types of
+icons used throughout Android applications:</p>
+
+<dl>
+ <dt><strong><a href="icon_design_launcher.html">Launcher Icons</a></strong></dt>
+ <dd>A Launcher icon is a graphic that represents your application on the
+ device's Home screen and in the Launcher window.</dd>
+ <dt><strong><a href="icon_design_menu.html">Menu Icons</a></strong></dt>
+ <dd>Menu icons are graphical elements placed in the options menu shown to
+ users when they press the Menu button.</dd>
+ <dt><strong><a href="icon_design_status_bar.html">Status Bar Icons</a></strong></dt>
+ <dd>Status bar icons are used to represent notifications from your
+ application in the status bar.</dd>
+ <dt><strong><a href="icon_design_tab.html">Tab Icons</a></strong></dt>
+ <dd>Tab icons are graphical elements used to represent individual tabs in a
+ multi-tab interface.</dd>
+ <dt><strong><a href="icon_design_dialog.html">Dialog Icons</a></strong></dt>
+ <dd>Dialog icons are shown in pop-up dialog boxes that prompt the user for
+ interaction.</dd>
+ <dt><strong><a href="icon_design_list.html">List View Icons</a></strong></dt>
+ <dd>List view icons are used with {@link android.widget.ListView} to
+ graphically represent list items. An example is the Settings application.</dd>
+</dl>
+
<p>To get started creating your icons more quickly, you can download
-the Android Icon Templates Pack. For more information, see
-<a href="#templatespack">Using the Android Icon Template Pack</a>.</p>
+the Android Icon Templates Pack.</p>
+
+
+
+
+
+<h2 id="templatespack">Using the Android Icon Templates Pack</h2>
+
+<p>The Android Icon Templates Pack is a collection of template designs,
+textures, and layer styles that make it easier for you to create icons that
+conform to the guidelines given in this document. We recommend downloading the
+template pack archive before you start designing your icons.</p>
+
+<p>The icon templates are provided in the Adobe Photoshop file format (.psd),
+which preserves the layers and design treatments we used when creating the
+standard icons for the Android platform. You can load the template files into
+any compatible image-editing program, although your ability to work directly
+with the layers and treatments may vary based on the program you are using.</p>
+
+<p>You can obtain the latest Icon Templates Pack archive using the link below:
+</p>
+
+<p style="margin-left:2em"><a
+href="{@docRoot}shareables/icon_templates-v2.3.zip">Download the Icon Templates
+Pack for Android 2.3 »</a>
+
+<p>For previous versions of the Icon Templates Pack, see the <em>Downloads</em>
+section in the box at the top-right corner of this page.</p>
+
+
+
<h2 id="icon-sets">Providing Density-Specific Icon Sets</h2>
@@ -89,7 +134,7 @@
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, below, then
+each of the three generalized screen densities listed in Table 1. Then,
store them in density-specific resource directories in your application. When
your application runs, the Android platform will check the characteristics of
the device screen and load icons from the appropriate density-specific
@@ -98,59 +143,27 @@
href="{@docRoot}guide/practices/screens_support.html#qualifiers">Resource
directory qualifiers for screen size and density</a>. </p>
-<p>The baseline screen density for Android devices is medium
-(<code>mdpi</code>). For this reason, a recommended approach to creating icon
-sets for multiple screen densities is to:</p>
-
-<ol>
-<li>Design the icons for the baseline density first (see Table 1 for the actual
-pixel dimensions at which to design the icons). </li>
-<li>Place the icons in the application's default drawable resources, then run
-the application on an Android Virtual Device (AVD) or an HVGA device such as the
-T-Mobile G1. </li>
-<li>Test and adjust your baseline icons as needed.</li>
-<li>When you are satisfied with the icons you've developed at the baseline
-density, create scaled copies for the other densities.
-
-<ul>
-<li>Scale the baseline icons up 150% to create the high-density assets.</li>
-<li>Scale the baseline icons down 75% to create the low-density assets.</li>
-</ul></li>
-
-<li>Place the icons in density-specific resource directories in your
-application. For example:
-<ul>
-<li>Medium-density assets go in a <code>res/drawable-mdpi/</code>
-directory (or in the default <code>res/drawable/</code> directory),</li>
-<li>High-density assets go in a <code>res/drawable-hdpi/</code> directory,
-and</li>
-<li>Low-density assets go in a <code>res/drawable-ldpi/</code>
-directory.</li>
-</ul></li>
-<li>Test and adjust the high- and low-density icons if needed</li>
-</ol>
-
<p>For tips on how to create and manage icon sets for multiple densities, see
-<a href="#design_tips">Tips for Designers</a>.</p>
+<a href="#design-tips">Tips for Designers</a>.</p>
-<p class="caption" id="screens-table"><strong>Table 1.</strong> Summary of
+<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 style="margin-top:2em;">
+ <table>
<tbody>
<tr>
<th>Icon Type</th><th colspan="3">Standard Asset Sizes (in Pixels), for
Generalized Screen Densities</th></tr>
<tr>
- <td></td>
+ <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">
+ <th style="background-color:#f3f3f3;font-weight:normal">
<nobr>High density screen <em>(hdpi)</em><nobr>
</th>
</tr>
@@ -159,14 +172,14 @@
<th style="background-color:#f3f3f3;font-weight:normal">
Launcher
</th>
- <td style="font-size:.9em;">
+ <td>
36 x 36 px
</td>
- <td style="font-size:.9em;">
+ <td>
48 x 48 px
</td>
- <td style="font-size:.9em;">
+ <td>
72 x 72 px
</td>
</tr>
@@ -175,1057 +188,113 @@
<th style="background-color:#f3f3f3;font-weight:normal">
Menu
</th>
- <td style="font-size:.9em;">
+ <td>
36 x 36 px
</td>
- <td style="font-size:.9em;">
+ <td>
48 x 48 px
</td>
- <td style="font-size:.9em;">
+ <td>
72 x 72 px
</td>
</tr>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
- Status Bar
+ Status Bar (Android 2.3 and later)
</th>
- <td style="font-size:.9em;">
- 24 x 24 px
+ <td>
+ 12w x 19h px<br>
+ (preferred, width may vary)
</td>
- <td style="font-size:.9em;">
- 32 x 32 px
+ <td>
+ 16w x 25h px<br>
+ (preferred, width may vary)
</td>
- <td style="font-size:.9em;">
- 48 x 48 px
+ <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 style="font-size:.9em;">
+ <td>
24 x 24 px
</td>
- <td style="font-size:.9em;">
+ <td>
32 x 32 px
</td>
- <td style="font-size:.9em;">
+ <td>
48 x 48 px
</td>
</tr>
+
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
Dialog
</th>
- <td style="font-size:.9em;">
+ <td>
24 x 24 px
</td>
- <td style="font-size:.9em;">
+ <td>
32 x 32 px
</td>
- <td style="font-size:.9em;">
+ <td>
48 x 48 px
</td>
</tr>
+
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
List View
</th>
- <td style="font-size:.9em;">
+ <td>
24 x 24 px
</td>
- <td style="font-size:.9em;">
+ <td>
32 x 32 px
</td>
- <td style="font-size:.9em;">
+ <td>
48 x 48 px
</td>
</tr>
</tbody>
</table>
-<h2 id="launcherstructure">Launcher Icon</h2>
-<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, which are arranged in a grid. 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>The user can also drag an icon out of the Launcher window and onto the Home
-screen itself, for more convenient access to the application. In this case, the
-system displays your application's Launcher icon against the Home screen
-wallpaper, rendering it at the same dimensions as it is rendered inside the
-Launcher.</p>
-
-<p>The system manages the scaling of all Launcher icons so that they rendered at
-a uniform height and width. The actual pixel dimensions of the rendered Launcher
-icons on any given device varies, based on the size and pixel-density
-characteristics of the device's screen. To ensure the best possible rendering
-for your icons, supply versions of the icons that are designed for low, medium,
-and high density screens. For information, see <a
-href="#icon_sets">Providing Density-Specific Icon Sets</a>, above, or <a
-href="#design_tips">Tips for Designers</a>, below.</p>
-
-<h3 id="style">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" style="padding:3em">
- <img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png"
- width="340">
- <p class="caption" style="margin:0;padding:0;margin-left:36px;">
- <strong>Figure 1.</strong> Illustration of Launcher icon style.</p>
-</div>
-
-<p>Clean and contemporary:</p>
-
-<ul>
- <li>Launcher icons should be current and sometimes quirky, but 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="#materials-colors">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>
-
-Additionally, note all icons will have separate text labels, so rather than
-working to include embedded text in the design of of your icons, focus your
-efforts on the icon's visual distinctiveness and memorability instead.</p>
-
-<p>To look at more examples of the Launcher icons used by built-in Android
-applications, see <a href="#launcherapx">Standard Launcher Icons</a> in the
-Icons Appendix of this document. </p>
-
-
-
-<h3 id="dodonts">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>
-
-<div style="margin-left:2em">
-<img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png" alt="Side-by-side examples
-of good/bad icon design." />
-<p class="caption" style="margin-top:.5em;">
-<strong>Figure 2.</strong> Side-by-side examples of "do's and don'ts" for
-Android launcher icons. </p>
-</div>
-
-<h3 id="materials-colors">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>The Launcher icons for the platform's default applications use the set of
-materials shown in Figure 3, below. Your icons can use these materials or you
-can create new materials.</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 4.
-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>
-
-
-
-<div style="margin:2em">
-<img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450" style="padding-top:2px;">
-<p class="caption" style="margin-top:.5em;">
-<strong>Figure 3.</strong> Example materials that you can use to create
-your icons.</p>
-</div>
-
-<div style="margin:2em">
-<img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450">
-<p class="caption" xstyle="margin-top:.5em;">
-<strong>Figure 4.</strong> Examples of materials combined with base
-and highlight colors from the recommended palette.</p>
-</div>
-
-
-<p>When you combine the materials above with a color highlight from the
-recommended pallete, you can create materials combinations such as those shown
-in Figure 5. To get you started, the <a href="#templatespack">icons pack</a>
-includes a Photoshop template file (<code>Launcher-icon-template.psd</code>)
-that provides all of the default materials, colors, and gradients. </p>
-
-<div style="margin:2em">
-<img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="450" style="padding-top:2px;">
-<p class="caption" style="margin-top:.5em;">
-<strong>Figure 5.</strong> Recommended color palette for icons.</p>
-</div>
-
-
-<h3 id="size">Size and positioning</h3>
-
-<p>Launcher icons should use a variety of shapes and forms and those must be
-scaled and positioned to create consistent visual weight.</p>
-
-<p>Launcher icons should use a variety of shapes and forms and those must be
-scaled and positioned inside the asset to create consistent visual weight with
-other </p>
-
-<p>Figure 6 illustrates various ways of positioning the icon inside the asset.
-As detailed in the table below, 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 the inclusion of shadows. If your icon is square or nearly square, it
-should be scaled even smaller.</p>
-
-
-<ul>
-<li>The bounding box for the full asset is shown in red.</li>
-<li>The recommended bounding box for the actual icon itself is shown in blue.
-The icon box is sized smaller than the full asset box so that there is space to
-include shadows and special icon treatments. </li>
-<li>The recommended bounding box for an icon that is square is shown in orange.
-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 style="margin:2.5em 0 1em 0;">
-<tr>
-
-<td style="border:0;padding-left:72;">
-<ol class="nolist">
- <li>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/IconGraphic_OpticalSize_l.png"
- style="padding:0;margin:0;" width="450">
-</td>
-</tr>
-<tr>
-<td style="border:0;">
- <ol class="nolist">
- <li>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;padding-left:72;">
- <img src="{@docRoot}images/icon_design/IconGraphic_OpticalSize_s.png"
- style="padding:0;margin:0;" width="450">
-</td>
-</tr>
-<tr>
-<td style="border:0;">
- <ol class="nolist">
- <li>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;padding-left:72;">
- <img src="{@docRoot}images/icon_design/IconGraphic_OpticalSize_ldpi.png"
- style="padding:0;margin:0;" width="450">
-
- <p class="caption" style="margin:0;padding:0;margin-top:1.5em;"><strong>Figure
- 6.</strong> Icon sizing and positioning inside the bounds of the
- icon asset.</p>
-</td>
-</tr>
-
-</table>
-
-
-
-<h3>Using the Launcher Icon Template</h3>
-
-<p>Included in the Android Icon Templates Pack 2.0 is a template containing
-palettes for default icon materials and colors. The template is provided in .psd
-format for Adobe Photoshop or similar raster image editor. </p>
-
-<p>To get started, first <a
-href="{@docRoot}shareables/icon_templates-v2.0.zip">download the Android Icon
-Templates Pack 2.0 »</a>. </p>
-
-<p>Once you've downloaded the pack, unzip it and open the file
-<code>Launcher-icon-template.psd</code> in Adobe Photoshop or similar raster
-image editing program. Notice the palettes for materials and colors. You can
-use as the template as a starting point for creating your Launcher icons. </p>
-
-<p>After you create your icon, you can add a shadow effect according to the
-specification below, as appropriate for the size of image you are creating. </p>
-
-
-<table style="margin:2.5em 0 1em 0;">
-<tr>
-
-<td style="border:0;padding-left:72;">
- <img src="{@docRoot}images/icon_design/IconGraphic_Shadow_WVGA.png"
- style="padding:0;margin:0;" width="450">
-</td>
-<td style="border:0;">
-<p style="padding-top:.5em;">Shadow for WVGA (high density) sreens:</p>
- <ol class="nolist">
- <li>Effect: Drop Shadow</li>
- <li>Color: #000000</li>
- <li>Blend Mode: Multiply</li>
- <li>Opacity: 75%</li>
- <li>Angle: 90°</li>
- <li>Distance: 2px</li>
- <li>Spread: 0% </li>
- <li>Size: 5px </li>
- </ol>
-</li>
-</ol>
-</td>
-</tr>
-<tr>
-<td style="border:0;padding-left:72;">
- <img src="{@docRoot}images/icon_design/IconGraphic_Shadow_HVGA.png"
- style="padding:0;margin:0;" width="450">
-</td>
-
-<td style="border:0;">
-<p style="padding-top:.5em;">Shadow for HVGA (medium density) sreens:</p>
- <ol class="nolist">
- <li>Effect: Drop Shadow</li>
- <li>Color: #000000</li>
- <li>Blend Mode: Multiply</li>
- <li>Opacity: 75%</li>
- <li>Angle: 90°</li>
- <li>Distance: 1px</li>
- <li>Spread: 0% </li>
- <li>Size: 3px </li>
- </ol>
-</li>
-</ol>
-</td>
-</tr>
-</table>
-
-<p>When the shadow is added and the icon is complete, export it as a PNG file
-with transparency enabled, ensuring that you size the icon at 72 x 72px for
-high-density screens and 48 x 48px for medium density screens. For more
-information about why you should provide different Launcher assets for high-,
-medium, and low-density screens, see <a
-href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
-Screens</a>.</p>
-
-
-
-<h2 id="menustructure">Menu icon</h2>
-
-<p>Menu icons are graphical elements placed in the pop-up menu shown to users
-when they press the Menu button. They are drawn in a flat-front perspective.
-Elements in a menu icon must not be visualized in 3D or perspective.</p>
-
-<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
-Sets</a>, above, you should create separate icon sets for low-, normal, 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="#screens-table">Table 1</a> for a listing of the recommended finished icon
-sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
-for suggestions on how to work with multiple sets of icons.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>In order to maintain consistency, all menu icons must use the same
-primary palette and the same effects. For more information, see the
-menu icon <a href="#menupalette">color palette</a>. </li>
-
-<li>Menu icons should include rounded corners, but only when logically
-appropriate. For example, in Figure 7 the logical place for rounded corners is
-the roof and not the rest of the building.</span></li>
-
-<li>All dimensions specified on this page are based on a 48x48 pixel artboard
-size with a 6 pixel safeframe.</li>
-
-<li>The menu icon effect (the outer glow) described in <a
-href="#menulight">Light, effects, and shadows</a> can overlap the 6px safeframe,
-but only when necessary. The base shape must always stay inside the
-safeframe.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating menu icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu
-icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 7. </strong>Safeframe and corner-rounding for menu
-icons. Icon size is 48x48.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="menulight">Light, effects, and shadows</h4>
-
-<p>Menu icons are flat and pictured face on. A slight deboss and some other
-effects, which are shown below, are used to create depth.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/menu_light.png" alt="A view of light, effects, and shadows for menu icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 8. </strong>Light, effects, and shadows for menu icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr>
- <tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for outer glow and bevel highlight.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, medium gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for inner shadow and bevel shadow.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 48x48 px on a transparent background. Mind the safeframe.</li>
-<li>Add the effects seen as described in Figure 8.</li>
-<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-<h4 id="dodonts_menu">"Do's and don'ts"</h4>
-
-<p>Below are some "do and don't" examples to consider when creating menu icons for
-your application. </p>
-
-
-<img src="{@docRoot}images/icon_design/do_dont_menuicons.png" style="padding:0;margin:0;padding-right:30%" width="400">
-
-
-<h2 id="statusbarstructure">Status bar icon</h2>
-
-<p>Status bar icons are used to represent notifications from your application in
-the status bar. Graphically, they are very similar to menu icons, but are
-smaller and higher in contrast.</p>
-
-<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
-Sets</a>, above, you should create separate icon sets for low-, normal, 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="#screens-table">Table 1</a> for a listing of the recommended finished icon
-sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
-for suggestions on how to work with multiple sets of icons.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>Rounded corners must always be applied to the base shape and to the details
-of a status bar icon shown Figure 9.</li>
-
-<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
-pixel safeframe.</li>
-
-<li>Status bar icons can overlap the safeframe to the left and right when
-necessary, but must not overlap the safeframe at the top and bottom.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating status bar icons using Adobe Photoshop are available
-in the Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of
-status bar icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 9. </strong>Safeframe and corner-rounding for status bar
-icons. Icon size is 25x25.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="statusbarlight">Light, effects, and shadows</h4>
-
-<p>Status bar icons are slightly debossed, high in contrast, and pictured
-face-on to enhance clarity at small sizes.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/statusbar_light.png" alt="A view of
-light, effects, and shadows for status bar icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 10. </strong>Light, effects, and shadows for status bar icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
- <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr>
- <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr>
- <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png" alt="Color palette, grey gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<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 9.</li>
-<li>Add light, effects, and shadows as specified in Figure 10.</li>
-<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h4 id="dodonts_status">"Do's and don'ts"</h4>
-
-<p>Below are some "do and don't" examples to consider when creating status bar icons for
-your application. </p>
-
-
-<img src="{@docRoot}images/icon_design/do_dont_statusicons.png" style="padding:0;margin:0;padding-right:30%" width="400">
-
-
-
-<h2 id="tabstructure">Tab icon</h2>
-
-<p>Tab icons are graphical elements used to represent individual tabs in a
-multi-tab interface. Each tab icon has two states: unselected and selected.</p>
-
-<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
-Sets</a>, above, you should create separate icon sets for low-, normal, 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="#screens-table">Table 1</a> for a listing of the recommended finished icon
-sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
-for suggestions on how to work with multiple sets of icons.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>Unselected tab icons have the same fill gradient and effects as menu icons,
-but with no outer glow.</li>
-
-<li>Selected tab icons look just like unselected tab icons, but with a fainter
-inner shadow, and have the same front part gradient as dialog icons.</li>
-
-<li>Tab icons have a 1 px safeframe which should only be overlapped for the edge
-of the anti-alias of a round shape.</li>
-
-<li>All dimensions specified on this page are based on a 32x32 px artboard size.
-Keep 1 px of padding around the bounding box inside the Photoshop template.</li>
-
-<li><strong>Final art must be exported as a 32x32 px transparent PNG
-file.</strong></li>
-
-<li>Templates for creating tab icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of
-unselected tab icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 11. </strong>Safeframe and fill gradient for unselected tab
-icons. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of
-selected tab icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 12. </strong>Safeframe and fill gradient for tab icons in
-selected state. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-<h3 id="unselectedtabdetails">Unselected tab icon</h3>
-
-<h4 id="unselectedtablight">Light, effects, and shadows</h4>
-
-<p>Unselected tab icons look just like the selected tab icons, but with a
-fainter inner shadow, and the same front part gradient as the dialog icons.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view
-of light, effects, and shadows for unselected tab icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 13. </strong>Light, effects, and shadows for unselected
-tab icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 10 % opacity | angle 90° distance 2px | size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape to a tool like Adobe Photoshop and scale to fit an image of
-32x32 px on a transparent background.</li>
-<li>Add the effects seen in Figure 13 for the unselected state filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-<h3 id="selectedtabdetails">Selected tab icon</h3>
-
-<p>The selected tab icons have the same fill gradient and effects as the menu
-icon, but with no outer glow.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of
-light, effects, and shadows for selected tab icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 14. </strong>Light, effects, and shadows for selected tab
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shape using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
-px artboard with a transparent background. </li>
-<li>Add the effects seen in Figure 14 for the selected state filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="dialogstructure">Dialog icon</h2>
-
-<p>Dialog icons are shown in pop-up dialog boxes that prompt the user for
-interaction. They use a light gradient and inner
-shadow in order to stand out against a dark background.</p>
-
-<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
-Sets</a>, above, you should create separate icon sets for low-, normal, 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="#screens-table">Table 1</a> for a listing of the recommended finished icon
-sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
-for suggestions on how to work with multiple sets of icons.</p>
-<h4>Structure</h4>
-
-<ul>
-<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the
-safeframe, but the anti-alias of a round shape can overlap the safeframe. <span
-class="body-copy"></li>
-
-<li>All dimensions specified on this page are based on a 32x32 pixel artboard size
-in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the
-Photoshop template.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating dialog icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog
-icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 15. </strong>Safeframe and fill gradient for dialog icons.
-Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="dialoglight">Light, effects, and shadows</h4>
-
-<p>Dialog icons are flat and pictured face-on. In order to stand out against a
-dark background, they are built up using a light gradient and inner shadow.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light,
-effects, and shadows for dialog icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 16. </strong>Light, effects, and shadows for dialog
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 32x32 px on a transparent background. </li>
-<li>Add the effects seen in Figure 16 for the proper filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="listviewstructure">List view icon</h2>
-
-<p>List view icons look a lot like dialog icons, but they use an inner shadow
-effect where the light source is above the object. They are also designed to be
-used only in a {@link android.widget.ListView}. Examples include the Android
-Market application home screen and the driving directions screen in the Maps
-application.</p>
-
-<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
-Sets</a>, above, you should create separate icon sets for low-, normal, 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="#screens-table">Table 1</a> for a listing of the recommended finished icon
-sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
-for suggestions on how to work with multiple sets of icons.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>A list view icon normally has a 1 px safeframe, but it is OK to use the
-safeframe area for the edge of the anti-alias of a round shape. </li>
-
-<li>All dimensions specified are based on a 32x32 pixel artboard size in
-Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
- </li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating list view icons in Adobe Photoshop are available in
-the Icon Templates Pack. </li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list
-view icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 17. </strong>Safeframe and fill gradient for list view
-icons. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-<h4 id="listviewlight">Light, effects, and shadows</h4>
-
-<p>List view icons are flat and pictured face-on with an inner shadow. Built up
-by a light gradient and inner shadow, they stand out well on a dark
-background.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view
-of light, effects, and shadows for list view icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 18. </strong>Light, effects, and shadows for list view
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr>
- <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr>
- <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Add the effects seen in Figure 18 for the proper filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 32x32 px on a transparent background. </li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-<h2 id="design_tips">Tips for Designers</h2>
+<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
-Photoshop or similar raster image-editing program.</p>
+Adobe Photoshop or a similar raster and vector image-editing program.</p>
-<h4>Use common naming conventions for icon assets</h4>
+<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
@@ -1254,7 +323,7 @@
</tr>
<tr>
<td>Status bar icons</td>
-<td><code>ic_stat_sys</code> or <code>ic_stat_notify</code></td>
+<td><code>ic_stat_notify</code></td>
<td><code>ic_stat_notify_msg.png</code></td>
</tr>
<tr>
@@ -1273,12 +342,12 @@
doing so is for your convenience only.</p>
-<h4>Set up a working space that organizes files for multiple densities</h4>
+<h3>Set up a working space that organizes files for multiple densities</h3>
-<p>Developing multiple sets of assets for different screen densities means
-creating multiple copies of files. 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>
+<p>Supporting multiple screen densities means you must create multiple versions
+of the same icon. To help keep the multiple copies of files safe and easier to
+find, we recommend creating a directory structure in your working space that
+organizes asset files per resolution. For example:</p>
<pre>assets/...
ldpi/...
@@ -1314,148 +383,57 @@
<em>finished_asset</em>.png</pre>
-<h4>Create medium-density assets first</h4>
-<p>Since medium density is the baseline for Android, begin your designing work
-by creating the <code>mdpi</code> assets. See <a href="#screens-table">Table
-1</a>, above, for the actual pixel dimensions of various icon types. When
-possible, use vector art or paths within Photoshop layers so that it will be
-easier to scale the assets up or down later.</p>
+<h3>Use vector shapes where possible</h3>
-<p>For each discreet asset, or set of like assets that share the same bounding
-box dimensions, create a working Photoshop file and save it in the
-<code>_pre_production</code> directory. For example:
-<code>ic_tabs_phone_mdpi.psd</code>. This will make it easier to locate and edit
-individual assets if changes are required. It's also helpful to use a
-density-specific suffix in the filename for the working file, to avoid confusion
-when editing the files. For example: <code>_mdpi.psd</code>.</p>
+<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>From the <code>mdpi</code> working files, save individual flattened assets to
-the corresponding density-specific resource directory (in this case,
-<code>mdpi/</code>) in your working space.</p>
+<p>Using vectors also makes it easy to align edges and corners to pixel
+boundaries at smaller resolutions.</li>
-<h4>Create high- and low-density assets from the medium-density sources</h4>
-<p>When you are finished working with your medium-density assets, copy the
-working files from the your workspace's <code>mdpi/_pre_production</code>
-directory to the corresponding locations in the <code>ldpi</code> and
-<code>hdpi</code> directories. If any of the working files use a
-density-specific suffix, rename the suffix to match the intended density.</p>
+<h3>Start with large artboards</h3>
-<p>Next, open each working file in the high- and low-density directories and
-scale the image up or down to match the intended density. To create an
-<code>hdpi</code> asset, scale the image by 150%. To create an <code>ldpi</code>
-asset, scale the image down by 75%. To scale the images, follow these steps:</p>
+<p>Because you will need to create assets for different screen densities, as
+shown in <a href="#screens-table">Table 1</a>, it is best to start your icon
+designs on large artboards with dimensions that are multiples of the target icon
+sizes. For example, <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html">launcher
+icons</a> are 72, 48, or 36 pixels wide, depending on screen density. If you
+initially draw launcher icons on an 864x864 artboard, it will be easier and
+cleaner to tweak the icons when you scale the artboard down to the target
+sizes for final asset creation.</p>
-<ol>
-<li>Open the working file in Photoshop or similar program.</li>
-<li>Under the <strong>Image</strong> menu, choose <strong>Image Size</strong>.</li>
-<li>On the Image Size panel, change the Width pop up menu to "percent."</li>
-<li>Change the Width value to "150" for <code>hdpi</code> assets and "75" for <code>ldpi</code> assets.</li>
-<li>Select the Scale Styles checkbox.</li>
-<li>Select the Constrain Proportions checkbox.</li>
-<li>Select the Resample Image checkbox and set the pop up menu to "Bicubic (Best for smooth gradients)."</li>
-<li>Click <strong>OK</strong>.</li>
-</ol>
+<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>
-<p>After you scale each image, save it to the target density-specific resource
-directory.</p>
+
-<p>If you are scaling a nine-patch image, see the section below for notes on how
-to handle the tick marks at the edge of the image. </p>
-
-
-<h4>After scaling, redraw bitmap layers as needed</h4>
+<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 may need to be redrawn manually to accommodate the higher
-density. For example if a 60x60 circle was painted as a bitmap for
+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>
-<h4>When scaling a nine-patch image, crop tick marks before scaling and replace
-them after</h4>
-<p>Nine-patch images include tick marks at the outer edge of the image. When you
-scale a nine-patch image, the tick marks are also scaled, which produces an
-inaccurate result. The recommended way to handle the scaling of nine-patch
-images is to remove the tick marks from the source image before scaling and then
-manually replace the tick marks at the proper size after scaling.</p>
+<h3>When saving image assets, remove unnecessary metadata</h3>
-<p>To more easily determine the tick marks after the working file has been
-scaled to a new resolution, first create a temporary duplicate flattened image
-which includes the tick marks: </p>
-
-<ol>
-<li>Under the <strong>Select</strong> menu choose <strong>All</strong>.</li>
-<li>Under the <strong>Edit</strong> menu choose
-<strong>Copy Merged</strong>.</li>
-<li>Under the <strong>File</strong> menu choose <strong>New</strong> and then
-click <strong>OK</strong> on the new panel.</li>
-<li>Under the <strong>Edit</strong> choose <strong>Paste</strong>.</li>
-</ol>
-
-<p>After creating the temporary copy, go back to the working file and crop
-the tick marks out of the working file before scaling the image:</p>
-<ol>
-<li>Under the <strong>Image</strong> menu, choose the
-<strong>Canvas Size</strong> command.</li>
-<li>On the Canvas Size panel, subtract 2 pixels from the Width and
-Height values.</li>
-<li>Set the Anchor to "Center."</li>
-<li>Click <strong>OK</strong></li>
-</ol>
-
-<p>Scale the working file to the target density. With the working file scaled
-and the canvas enlarged so that the tick marks can be repainted:</p>
-
-<ol>
-<li>Under the <strong>Image</strong> menu, choose the
-<strong>Canvas Size</strong> command.</li>
-<li>On the <strong>Canvas Size</strong> panel, add 2 pixels to the Width
-and Height values.</li>
-<li>Set the Anchor to "Center."</li>
-<li>Click <strong>OK</strong>.</li>
-</ol>
-
-<p>To determine tick marks, go back to duplicate flattened image and scale it to
-the target resolution. </p>
-
-<p>Copy the scaled duplicate flattened image into a new layer in the working
-file to use as reference. Create a new layer in which to paint new tick marks at
-the single pixel outer edge of the image. Note tickmarks must be 100% opaque
-black, without transparency, and all other areas of the tick mark region must be
-100% transparent, otherwise the system will not interpret the nine-patch image
-correctly. </p>
-
-<p>Using the scaled duplicate flattened image as reference paint new tick marks
-in the new layer that align with the reference layer. Note round up pixels for
-tick marks. Any pixels that are partially opaque in the reference layer should
-be fully opaqe in the new layer.</p>
-
-
-<h4>Adjust stroke and drop shadow after scaling an image</h4>
-
-<p>While it is desirable to scale layer styles for the most part (such as for
-Gradient Overlay or Inner Glow), you may need to manually reset the Stroke and
-Drop Shadow in the scaled image to 1 px before saving, especially when scaling
-to <code>hdpi</code>.
-
-<h4>Save nine-patch images with the appropriate filename suffix</h4>
-
-<p>If an asset is a nine-patch asset (with tick marks), be sure to save the asset
-in PNG format with a filename that includes the <code>.9.png</code> suffix. If
-the filename does not use the suffix, the system won't recognize the image as a
-nine-patch asset and won't resize it as intended. </p>
-
-
-<h4>When saving image assets, remove the Photoshop header</h4>
-
-<p>To help keep each image asset as small as possible, make sure to remove the
-Photoshop headers from the file. To remove the Photoshop header, follow these
-steps: </p>
+<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 &
@@ -1466,250 +444,24 @@
<li>Select <strong>Save</strong>.</li>
</ol>
-<h4>Make sure that corresponding assets for different densities use the same
-filenames</h4>
+<p>It is also useful to use PNG file size optimization tools such as <a
+href="http://optipng.sourceforge.net/">OptiPNG</a> or <a
+href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a>.
-<p>Corresponding icon asset files for each density must use the same filename,
-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.
-For more information about density-specific resources and how the system uses
-them to meet the needs of different devices, see <a
+
+
+<h3>Make sure that corresponding assets for different densities use the same
+filenames</h3>
+
+<p>Corresponding icon asset files for each density <strong>must use the same
+filename</strong>, but be stored in density-specific resource directories. This
+allows the system to look up and load the proper resource according to the
+screen characteristics of the device. For this reason, make sure that the set of
+assets in each directory is consistent and that the files do not use
+density-specific suffixes.</p>
+
+<p>For more information about density-specific resources
+and how the system uses them to meet the needs of different devices, see <a
href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a>.</p>
-<h2 id="templatespack">Using the Android Icon Templates Pack</h2>
-
-<p>The Android Icon Templates Pack is a collection of template designs, filters,
-and settings that make it easier for you to create icons that conform to the
-general specifications given in this document. We recommend downloading the
-template pack archive before you get started with your icon design.</p>
-
-<p>The icon templates are provided in Adobe Photoshop and Adobe Illustrator file
-formats, 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 Icon Templates Pack archive using the link below: </p>
-
-<p style="margin-left:2em"><a
-href="{@docRoot}shareables/icon_templates-v2.0.zip">Download the Icon Templates
-Pack »</a>
-
-
-<h2 id="iconappendix">Icon appendix</p>
-
-<h3 id="launcherapx">Standard launcher icons</h3>
-
-<p>Shown below are examples of launcher icons used by Android applications. The
-icons are provided for your reference only — please do not reuse these
-icons in your applications.</code>.
-
-<img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" style="margin-top:2em;" />
-
-
-<h3 id="menuapx">Standard menu icons</h3>
-
-<p>Shown below are standard menu icons that are used in the Android
-system. Because these resources can change between platform versions, you
-should not reference the system's copy of the resources. If you want
-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 list below is not intended to be complete.</p>
-
-
-<table class="image-caption">
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_add.png" title="ic_menu_add" alt="Android asset" />
- <div class="caption">Add</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_call.png" title="ic_menu_call" alt="Android asset" />
- <div class="caption">Call</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_camera.png" title="ic_menu_camera" alt="Android asset" />
- <div class="caption">Camera</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_close_clear_cancel.png" title="ic_menu_close_clear_cancel" alt="Android asset" />
- <div class="caption">Clear / Close / Cancel / Discard </div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_compass.png" title="ic_menu_compass" alt="Android asset" />
- <div class="caption">Compass</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_delete.png" title="ic_menu_delete" alt="Android asset" />
- <div class="caption">Delete</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_directions.png" title="ic_menu_directions" alt="Android asset" />
- <div class="caption">Directions</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_edit.png" title="ic_menu_edit" alt="Android asset" />
- <div class="caption">Edit</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_gallery.png" title="ic_menu_gallery" alt="Android asset" />
- <div class="caption">Gallery</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_help.png" title="ic_menu_help" alt="Android asset" />
- <div class="caption">Help</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_info_details.png" title="ic_menu_info_details" alt="Android asset" />
- <div class="caption">Info / details</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_mapmode.png" title="ic_menu_mapmode" alt="Android asset" />
- <div class="caption">Map mode</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_mylocation.png" title="ic_menu_mylocation" alt="Android asset" />
- <div class="caption">My Location</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_more.png" title="ic_menu_more" alt="Android asset" />
- <div class="caption">More</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_preferences.png" title="ic_menu_preferences" alt="Android asset" />
- <div class="caption">Preferences</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_rotate.png" title="ic_menu_rotate" alt="Android asset" />
- <div class="caption">Rotate</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_save.png" title="ic_menu_save" alt="Android asset" />
- <div class="caption">Save</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_send.png" title="ic_menu_send" alt="Android asset" />
- <div class="caption">Send</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_search.png" title="ic_menu_search" alt="Android asset" />
- <div class="caption">Search</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_share.png" title="ic_menu_share" alt="Android asset" />
- <div class="caption">Share</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_upload.png" title="ic_menu_upload" alt="Android asset" />
- <div class="caption">Upload</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_view.png" title="ic_menu_view" alt="Android asset" />
- <div class="caption">View</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_zoom.png" title="ic_menu_zoom" alt="Android asset" />
- <div class="caption">Zoom</div></td>
-
-</tr>
-</table>
-
-
-<h3 id="statusbarapx">Standard status bar icons</h3>
-
-<p>Shown below are standard status bar icons that are used in the Android
-platform. Because these resources can change between platform versions, you
-should not reference the system's copy of the resources. If you want
-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 list below is not intended to be complete.</p>
-
-
-<table class="image-caption">
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_data_bluetooth.png" title="stat_sys_data_bluetooth" alt="Android asset" />
- <div class="caption">Bluetooth</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_email_generic.png" title="stat_notify_email_generic" alt="Android asset" />
- <div class="caption">Email</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_chat.png" title="stat_notify_chat" alt="Android asset" />
- <div class="caption">IM</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_voicemail.png" title="stat_notify_voicemail" alt="Android asset" />
- <div class="caption">Voicemail</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_warning.png" title="stat_sys_warning" alt="Android asset" />
- <div class="caption">Warning</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call.png" title="stat_sys_phone_call" alt="Android asset" />
- <div class="caption">Call</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call_forward.png" title="stat_sys_phone_call_forward" alt="Android asset" />
- <div class="caption">Call forward</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call_on_hold.png" title="stat_sys_phone_call_on_hold" alt="Android asset" />
- <div class="caption">Call on hold</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_missed_call.png" title="stat_notify_missed_call" alt="Android asset" />
- <div class="caption">Missed call</div></td>
-
-</tr>
-</table>
-
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.html b/docs/html/guide/practices/ui_guidelines/icon_design_1.html
new file mode 100644
index 0000000..183facf
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+<meta http-equiv="refresh" content="0;url=icon_design.html">
+<title>Redirecting...</title>
+</head>
+<body>
+<a href="icon_design.html">click here</a> if you are not redirected.
+</body>
+</html>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd b/docs/html/guide/practices/ui_guidelines/icon_design_1.jd
deleted file mode 100644
index 995cfea..0000000
--- a/docs/html/guide/practices/ui_guidelines/icon_design_1.jd
+++ /dev/null
@@ -1,1205 +0,0 @@
-page.title=Icon Design Guidelines, Android 1.0
-@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 specification in this document.</li>
-<li>A set of standard icons is provided by the Android platform. Your
-application can use the standard icons by referencing them as resources.</li>
-</ul>
-
-<h2>In this document</h2>
-
-<ol>
-<li><a href="#launcherstructure">Launcher icon</a></li>
-<li><a href="#menustructure">Menu icon</a></li>
-<li><a href="#statusbarstructure">Status bar icon</a></li>
-<li><a href="#tabstructure">Tab icon</a></li>
-<li><a href="#dialogstructure">Dialog icon</a></li>
-<li><a href="#listviewstructure">List view icon</a></li>
-
-<li style="margin-top:4px;"><a href="#dodonts">General guidelines</a></li>
-<li><a href="#templatespack">Using the Icon Templates Pack</a></li>
-<li><a href="#iconappendix">Icon appendix</a>
- <ol>
- <li><a href="#launcherapx">Launcher icons</a></li>
- <li><a href="#menuapx">Menu icons</a></li>
- <li><a href="#statusbarapx">Status bar icons</a></li>
- </ol>
-</li>
-
-</ol>
-
-<h2>Downloads</h2>
-
-<ol>
-<li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon
-Templates Pack, v1.0 »</a></li>
-</ol>
-
-<h2>See also</h2>
-
-<ol>
-<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a></li>
-</ol>
-
-
-<h2>Newer versions</h2>
-
-<ol>
-<li style="margin-top:4px;"><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon Design Guidelines, Android 2.0</a></li>
-<li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon
-Templates Pack, v2.0 »</a></li>
-</ol>
-
-</div>
-</div>
-
-<p>Creating a unified look and feel throughout a user interface adds value to
-your product. Streamlining the graphic style will also make the UI seem more
-professional to the user.</p>
-
-<p>This document shows you how to create icons for various parts
-of your application’s user interface that fit the style set by the Android UI
-team. Following these guidelines will help you to create a polished and unified
-experience for the user.</p>
-
-<p>To get started creating conforming icons more quickly, you can download
-the Android Icon Templates Pack. For more information, see
-<a href="#templatespack">Using the Android Icon Template Pack</a>.</p>
-
-<h2 id="launcherstructure">Launcher icon</h2>
-
-<p>A launcher icon is the graphic that represents your application on an Android
-device’s Home screen. It is a simplified 3D icon with a fixed perspective. The
-required perspective is shown in Figure 1.</p>
-
-<h4 id="launcherstructure">Structure</h4>
-
-<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="#launcherpalette">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 2.</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 48x48 px
-PNG file using a raster image editor such as Adobe Photoshop.</strong></li>
-
-<li>Templates for creating launcher icons in Adobe Illustrator and Photoshop are
-available in the Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <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 1.</strong> Perspective angles for launcher icons (90° is
-vertical).</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><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>
- <div class="caption grad-rule-top">
- <p><strong>Figure 2.</strong> Rounded corners for launcher icons.</p>
- </div>
-</td>
-</tr>
-</table>
-
-<h4 id="launcherlight">Light, effects, and shadows</h4>
-
-<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 3. </strong>Light, effects, and shadows for launcher icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><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 style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="launcherpalette">Launcher icon color palette</h4>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">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" alt="Color palette, light gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Light gradient<br><em>1: </em>r 0 | g 0 | b 0<br><em>2: </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" alt="Color palette, medium gradien" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Medium gradient<br><em>1: </em>r 190 | g 190 | b 190<br><em>2: </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" alt="Color palette, dark gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Dark gradient<br><em>1: </em>r 100 | g 100 | b 100<br><em>2: </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" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="launchersteps">Step by step</h4>
-
-<ol>
- <li>Create the basic shapes with a tool like Adobe Illustrator, using the
-angles described in <a href="#launcherstructure">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>
-
-<h2 id="menustructure">Menu icon</h2>
-
-<p>Menu icons are graphical elements placed in the pop-up menu shown to users
-when they press the Menu button. They are drawn in a flat-front perspective.
-Elements in a menu icon must not be visualized in 3D or perspective.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>In order to maintain consistency, all menu icons must use the same
-primary palette and the same effects. For more information, see the
-menu icon <a href="#menupalette">color palette</a>. </li>
-
-<li>Menu icons should include rounded corners, but only when logically
-appropriate. For example, in Figure 3 the logical place for rounded corners is
-the roof and not the rest of the building.</span></li>
-
-<li>All dimensions specified on this page are based on a 48x48 pixel artboard
-size with a 6 pixel safeframe.</li>
-
-<li>The menu icon effect (the outer glow) described in <a
-href="#menulight">Light, effects, and shadows</a> can overlap the 6px safeframe,
-but only when necessary. The base shape must always stay inside the
-safeframe.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating menu icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu
-icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 4. </strong>Safeframe and corner-rounding for menu
-icons. Icon size is 48x48.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="menulight">Light, effects, and shadows</h4>
-
-<p>Menu icons are flat and pictured face on. A slight deboss and some other
-effects, which are shown below, are used to create depth.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/menu_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 5. </strong>Light, effects, and shadows for launcher icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr>
- <tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for outer glow and bevel highlight.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, medium gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for inner shadow and bevel shadow.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 48x48 px on a transparent background. Mind the safeframe.</li>
-<li>Add the effects seen as described in Figure 5.</li>
-<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="statusbarstructure">Status bar icon</h2>
-
-<p>Status bar icons are used to represent notifications from your application in
-the status bar. Graphically, they are very similar to menu icons, but are
-smaller and higher in contrast.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>Rounded corners must always be applied to the base shape and to the details
-of a status bar icon shown Figure 7.</li>
-
-<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
-pixel safeframe.</li>
-
-<li>Status bar icons can overlap the safeframe to the left and right when
-necessary, but must not overlap the safeframe at the top and bottom.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating status bar icons using Adobe Photoshop are available
-in the Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of
-status bar icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 6. </strong>Safeframe and corner-rounding for status bar
-icons. Icon size is 25x25.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="statusbarlight">Light, effects, and shadows</h4>
-
-<p>Status bar icons are slightly debossed, high in contrast, and pictured
-face-on to enhance clarity at small sizes.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/statusbar_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 7. </strong>Light, effects, and shadows for launcher icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
- <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr>
- <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr>
- <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png" alt="Color palette, grey gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<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 6.</li>
-<li>Add light, effects, and shadows as specified in Figure 7.</li>
-<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="tabstructure">Tab icon</h2>
-
-<p>Tab icons are graphical elements used to represent individual tabs in a
-multi-tab interface. Each tab icon has two states: unselected and selected.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>Unselected tab icons have the same fill gradient and effects as menu icons,
-but with no outer glow.</li>
-
-<li>Selected tab icons look just like unselected tab icons, but with a fainter
-inner shadow, and have the same front part gradient as dialog icons.</li>
-
-<li>Tab icons have a 1 px safeframe which should only be overlapped for the edge
-of the anti-alias of a round shape.</li>
-
-<li>All dimensions specified on this page are based on a 32x32 px artboard size.
-Keep 1 px of padding around the bounding box inside the Photoshop template.</li>
-
-<li><strong>Final art must be exported as a 32x32 px transparent PNG
-file.</strong></li>
-
-<li>Templates for creating tab icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of
-unselected tab icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 8. </strong>Safeframe and fill gradient for unselected tab
-icons. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of
-selected tab icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 9. </strong>Safeframe and fill gradient for tab icons in
-selected state. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-<h3 id="unselectedtabdetails">Unselected tab icon</h3>
-
-<h4 id="unselectedtablight">Light, effects, and shadows</h4>
-
-<p>Unselected tab icons look just like the selected tab icons, but with a
-fainter inner shadow, and the same front part gradient as the dialog icons.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view
-of light, effects, and shadows for unselected tab icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 10. </strong>Light, effects, and shadows for unselected
-tab icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 10 % opacity | angle 90° distance 2px | size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape to a tool like Adobe Photoshop and scale to fit an image of
-32x32 px on a transparent background.</li>
-<li>Add the effects seen in Figure 10 for the unselected state filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-<h3 id="selectedtabdetails">Selected tab icon</h3>
-
-<p>The selected tab icons have the same fill gradient and effects as the menu
-icon, but with no outer glow.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of
-light, effects, and shadows for selected tab icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 11. </strong>Light, effects, and shadows for selected tab
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr>
- <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menupalette">Color palette</h4>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td>
-<td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td>
-</tr>
-
-</table>
-
-</td>
-
-<td style="border:0;width:350px">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shape using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
-px artboard with a transparent background. </li>
-<li>Add the effects seen in Figure 11 for the selected state filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="dialogstructure">Dialog icon</h2>
-
-<p>Dialog icons are shown in pop-up dialog boxes that prompt the user for
-interaction. They use a light gradient and inner
-shadow in order to stand out against a dark background.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the
-safeframe, but the anti-alias of a round shape can overlap the safeframe. <span
-class="body-copy"></li>
-
-<li>All dimensions specified on this page are based on a 32x32 pixel artboard size
-in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the
-Photoshop template.</li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating dialog icons in Adobe Photoshop are available in the
-Icon Templates Pack.</li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog
-icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 12. </strong>Safeframe and fill gradient for dialog icons.
-Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-
-<h4 id="dialoglight">Light, effects, and shadows</h4>
-
-<p>Dialog icons are flat and pictured face-on. In order to stand out against a
-dark background, they are built up using a light gradient and inner shadow.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light,
-effects, and shadows for dialog icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 13. </strong>Light, effects, and shadows for dialog
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
- <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 32x32 px on a transparent background. </li>
-<li>Add the effects seen in Figure 13 for the proper filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="listviewstructure">List view icon</h2>
-
-<p>List view icons look a lot like dialog icons, but they use an inner shadow
-effect where the light source is above the object. They are also designed to be
-used only in a list view. Examples include the Android Market application home
-screen and the driving directions screen in the Maps application.</p>
-
-<h4>Structure</h4>
-
-<ul>
-<li>A list view icon normally has a 1 px safeframe, but it is OK to use the
-safeframe area for the edge of the anti-alias of a round shape. </li>
-
-<li>All dimensions specified are based on a 32x32 pixel artboard size in
-Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
- </li>
-
-<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
-
-<li>Templates for creating list view icons in Adobe Photoshop are available in
-the Icon Templates Pack. </li>
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i" style="padding-right:0">
- <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list
-view icon structure." />
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 14. </strong>Safeframe and fill gradient for list view
-icons. Icon size is 32x32.</p>
- </div>
-</td>
-</tr>
-</table>
-
-<h4 id="listviewlight">Light, effects, and shadows</h4>
-
-<p>List view icons are flat and pictured face-on with an inner shadow. Built up
-by a light gradient and inner shadow, they stand out well on a dark
-background.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
- <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view
-of light, effects, and shadows for list view icons."/>
-</td>
-<td class="image-caption-c">
- <div class="caption grad-rule-top">
- <p><strong>Figure 15. </strong>Light, effects, and shadows for list view
-icons.</p>
- <div class="image-caption-nested">
- <table style="margin-top:0;">
- <tr><td style="padding-right:1em"><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr>
- <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr>
- <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr>
- </table>
- </div>
- </div>
-</td>
-</tr>
-</table>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4 id="menusteps">Step by step</h4>
-
-<ol>
-<li>Add the effects seen in Figure 15 for the proper filter.</li>
-<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
-<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
-<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
-of 32x32 px on a transparent background. </li>
-</ol>
-
-</td>
-</tr>
-</table>
-
-
-<h2 id="dodonts">General guidelines</h2>
-
-<p>Below are some "do and don't" guidelines to consider when creating icons for
-your application. By following the guidelines, you can ensure that your icons
-will work well with other parts of the Android platform UI and will meet the
-expectations of your application's users. </p>
-
-<table style="margin:0px;padding:0px;">
-<tr>
-<td style="border:0;width:350px;">
-
-<h4>Do...</h4>
-
-<ul>
-<li>Use a normal perspective. The depth of an object should be realistic.</li>
-<li>Keep it simple! By overdoing an icon, it loses it purpose and
-readability.</li>
-<li>Use colors only when necessary. Mind that the base of a launcher icon should
-be grey and feel solid. </li>
-<li>Use the correct angles for the specific icon types.</li>
-</ul>
-</td>
-<td style="border:0;width:350px;">
-
-<h4>Don’t...</h4>
-
-<ul>
-<li>Use open elements like text alone as icons. Instead place those elements on
-a base shape.</li>
-<li>Use colors for your status bar notifications. Those are reserved for
-specific phone-only functions.</li>
-</ul>
-</td>
-</tr>
-<tr>
-<td colspan="2" style="border:0;">
-<img src="{@docRoot}images/icon_design/do_dont.png" alt="Side-by-side examples
-of good/bad icon design."/>
-</td>
-</table>
-
-<h2 id="templatespack">Using the Android Icon Templates Pack</h2>
-
-<p>The Android Icon Templates Pack is a collection of template designs, filters,
-and settings that make it easier for you to create icons that conform to the
-general specifications given in this document. We recommend downloading the
-template pack archive before you get started with your icon design.</p>
-
-<p>The icon templates are provided in Adobe Photoshop and Adobe Illustrator file
-formats, 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 Icon Templates Pack archive using the link below: </p>
-
-<p style="margin-left:2em"><a
-href="{@docRoot}shareables/icon_templates-v1.0.zip">Download the Icon Templates
-Pack »</a>
-
-
-<h2 id="iconappendix">Icon appendix</p>
-
-<h3 id="launcherapx">Standard launcher icons</h3>
-
-<p>Shown below are examples of launcher icons used by Android applications. The
-icons are provided for your reference only — please do not reuse these
-icons in your applications.</code>.
-
-<table class="image-caption">
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_alarmclock.png" alt="Android asset" />
- <div class="caption">Alarm Clock</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_browser.png" alt="Android asset" />
- <div class="caption">Browser</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_calculator.png" alt="Android asset" />
- <div class="caption">Calculator</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_calendar.png" alt="Android asset" />
- <div class="caption">Calendar</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_video_camera.png" alt="Android asset" />
- <div class="caption">Camcorder</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_camera.png" alt="Android asset" />
- <div class="caption">Camera</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_contacts.png" alt="Android asset" />
- <div class="caption">Contacts</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_phone_dialer.png" alt="Android asset" />
- <div class="caption">Dialer</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_email_generic.png" alt="Android asset" />
- <div class="caption">Email</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_gallery.png" alt="Android asset" />
- <div class="caption">Gallery</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_generic_application.png" alt="Android asset" />
- <div class="caption">Generic application</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_email.png" alt="Android asset" />
- <div class="caption">Gmail</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_google_talk.png" alt="Android asset" />
- <div class="caption">Google Talk</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_IM.png" alt="Android asset" />
- <div class="caption">IM</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_maps.png" alt="Android asset" />
- <div class="caption">Maps</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_marketplace.png" alt="Android asset" />
- <div class="caption">Market </div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_sms_mms.png" alt="Android asset" />
- <div class="caption">Messaging </div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_musicplayer_2.png" alt="Android asset" />
- <div class="caption">Music</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_settings.png" alt="Android asset" />
- <div class="caption">Settings</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_voicedial.png" alt="Android asset" />
- <div class="caption">Voice Dialer</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_voicesearch.png" alt="Android asset" />
- <div class="caption">Voice Search</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="/images/icon_design/ic_launcher_youtube.png" alt="Android asset" />
- <div class="caption">YouTube</div></td>
-</tr>
-</table>
-
-<h3 id="menuapx">Standard menu icons</h3>
-
-<p>Shown below are standard menu icons that are included in the Android platform
-(as of Android 1.5). You can reference any of these icon resources from your
-application as needed, but make sure that the action you assign to the icon is
-consistent with that listed. Note that this is not a complete list of icons and
-that the actual appearance of standard icons may change across platform
-versions.</p>
-
-<p>To reference one of the icons from your code, use
-<code>android.R.drawable.<icon_resource_identifier></code>. For example,
-you can call a menu item's {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) setIcon()}
-method and pass the resource name:</p>
-
-<p style="margin-left:2em"><code>.setIcon(android.R.drawable.ic_menu_more);</code>.
-
-<p>You could reference the same icon from a layout file using
-<code>android:icon="@android:drawable/ic_menu_more"></code>.</p>
-
-<p>To determine the resource ID for an icon listed below, hover over the icon or
-simply look at image filenames, which use the format
-"<icon_resource_identifier>.png".</p>
-
-<table class="image-caption">
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_add.png" title="ic_menu_add" alt="Android asset" />
- <div class="caption">Add</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_call.png" title="ic_menu_call" alt="Android asset" />
- <div class="caption">Call</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_camera.png" title="ic_menu_camera" alt="Android asset" />
- <div class="caption">Camera</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_close_clear_cancel.png" title="ic_menu_close_clear_cancel" alt="Android asset" />
- <div class="caption">Clear / Close / Cancel / Discard </div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_compass.png" title="ic_menu_compass" alt="Android asset" />
- <div class="caption">Compass</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_delete.png" title="ic_menu_delete" alt="Android asset" />
- <div class="caption">Delete</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_directions.png" title="ic_menu_directions" alt="Android asset" />
- <div class="caption">Directions</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_edit.png" title="ic_menu_edit" alt="Android asset" />
- <div class="caption">Edit</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_gallery.png" title="ic_menu_gallery" alt="Android asset" />
- <div class="caption">Gallery</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_help.png" title="ic_menu_help" alt="Android asset" />
- <div class="caption">Help</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_info_details.png" title="ic_menu_info_details" alt="Android asset" />
- <div class="caption">Info / details</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_mapmode.png" title="ic_menu_mapmode" alt="Android asset" />
- <div class="caption">Map mode</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_mylocation.png" title="ic_menu_mylocation" alt="Android asset" />
- <div class="caption">My Location</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_more.png" title="ic_menu_more" alt="Android asset" />
- <div class="caption">More</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_preferences.png" title="ic_menu_preferences" alt="Android asset" />
- <div class="caption">Preferences</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_rotate.png" title="ic_menu_rotate" alt="Android asset" />
- <div class="caption">Rotate</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_save.png" title="ic_menu_save" alt="Android asset" />
- <div class="caption">Save</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_send.png" title="ic_menu_send" alt="Android asset" />
- <div class="caption">Send</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_search.png" title="ic_menu_search" alt="Android asset" />
- <div class="caption">Search</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_share.png" title="ic_menu_share" alt="Android asset" />
- <div class="caption">Share</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_upload.png" title="ic_menu_upload" alt="Android asset" />
- <div class="caption">Upload</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_view.png" title="ic_menu_view" alt="Android asset" />
- <div class="caption">View</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/ic_menu_zoom.png" title="ic_menu_zoom" alt="Android asset" />
- <div class="caption">Zoom</div></td>
-
-</tr>
-</table>
-
-
-<h3 id="statusbarapx">Standard status bar icons</h3>
-
-<p>Shown below are standard status bar icons included in the Android platform
-(as of Android 1.5). You can reference any of these icon resources from your
-application as needed, but make sure that the meaning of the icon is consistent
-with the standard meaning listed. Note that this is not a complete list of icons
-and that the actual appearance of standard icons may change across platform
-versions.</p>
-
-<p>To reference one of the icons from your code, use
-<code>android.R.drawable.<icon_resource_identifier></code>. For example,
-you can construct a simple notification that references one of the icons like
-this: </p>
-
-<p style="margin-left:2em"><code>new Notification(R.drawable.stat_notify_calendar,
-"sample text", System.currentTimeMillis());</code></p>
-
-<p>To determine the resource ID for an icon listed below, hover over the icon
-or simply look at the image filename, which use the format
-"<icon_resource_identifier>.png".</p>
-
-
-<table class="image-caption">
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_data_bluetooth.png" title="stat_sys_data_bluetooth" alt="Android asset" />
- <div class="caption">Bluetooth</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_email_generic.png" title="stat_notify_email_generic" alt="Android asset" />
- <div class="caption">Email</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_chat.png" title="stat_notify_chat" alt="Android asset" />
- <div class="caption">IM</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_voicemail.png" title="stat_notify_voicemail" alt="Android asset" />
- <div class="caption">Voicemail</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_warning.png" title="stat_sys_warning" alt="Android asset" />
- <div class="caption">Warning</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call.png" title="stat_sys_phone_call" alt="Android asset" />
- <div class="caption">Call</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call_forward.png" title="stat_sys_phone_call_forward" alt="Android asset" />
- <div class="caption">Call forward</div></td>
-
-</tr>
-<tr>
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_sys_phone_call_on_hold.png" title="stat_sys_phone_call_on_hold" alt="Android asset" />
- <div class="caption">Call on hold</div></td>
-
-
-<td class="image-caption-i image-list">
- <img src="{@docRoot}images/icon_design/stat_notify_missed_call.png" title="stat_notify_missed_call" alt="Android asset" />
- <div class="caption">Missed call</div></td>
-
-</tr>
-</table>
-
-
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd b/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd
new file mode 100644
index 0000000..f78bd86
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd
@@ -0,0 +1,164 @@
+page.title=Dialog 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="#icon1">All Android Versions</a>
+ <ol>
+ <li><a href="#structure1">Structure</a></li>
+ <li><a href="#style1">Light, effects, and shadows</a></li>
+ </ol>
+</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>Dialog icons are shown in pop-up dialog boxes that prompt the user for
+interaction. They use a light gradient and inner
+shadow in order to stand out against a dark background.</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 Table 1 for a listing of the recommended finished icon sizes for each
+density. Also, 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 class="table-caption"><strong>Table 1.</strong> Summary of finished dialog
+icon dimensions for each of the three generalized screen densities.</p>
+
+ <table>
+ <tbody>
+ <tr>
+ <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>
+ <td>
+ 24 x 24 px
+ </td>
+ <td>
+ 32 x 32 px
+ </td>
+ <td>
+ 48 x 48 px
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+
+<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="icon1">All Android Versions</h2>
+
+<p>The following guidelines describe how to design dialog icons for all versions
+of the Android platform.</p>
+
+<h3 id="structure1">Structure</h3>
+
+<ul>
+<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the
+safeframe, but the anti-alias of a round shape can overlap the safeframe.</li>
+
+<li>All dimensions specified on this page are based on a 32x32 pixel artboard size
+in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the
+Photoshop template.</li>
+
+
+</ul>
+
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog
+icon structure." />
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 1. </strong>Safeframe and fill gradient for dialog icons.
+Icon size is 32x32.</p>
+ </div>
+</td>
+</tr>
+</table>
+
+
+<h3 id="style1">Light, effects, and shadows</h3>
+
+<p>Dialog icons are flat and pictured face-on. In order to stand out against a
+dark background, they are built up using a light gradient and inner shadow.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light,
+effects, and shadows for dialog icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 2. </strong>Light, effects, and shadows for dialog
+icons.</p>
+ <div class="image-caption-nested">
+ <table>
+ <tr><td><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
+ <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+
+<table>
+<tr>
+<td style="border:0;">
+
+<h4 id="steps1">Step by step</h4>
+
+<ol>
+<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
+<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 32x32 px on a transparent background. </li>
+<li>Add the effects seen in Figure 2 for the proper filter.</li>
+<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
new file mode 100644
index 0000000..cb04b55
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
@@ -0,0 +1,520 @@
+page.title=Launcher 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="#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>
+</ol>
+
+<h2>See also</h2>
+
+<ol>
+<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a></li>
+</ol>
+
+</div>
+</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>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) »</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°<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 —
+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: </em>r 0 | g 0 | b 0<br><em>2: </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: </em>r 190 | g 190 | b 190<br><em>2: </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: </em>r 100 | g 100 | b 100<br><em>2: </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>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_list.jd b/docs/html/guide/practices/ui_guidelines/icon_design_list.jd
new file mode 100644
index 0000000..7bf34cc
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_list.jd
@@ -0,0 +1,163 @@
+page.title=List View 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="#icon1">All Android Versions</a>
+ <ol>
+ <li><a href="#structure1">Structure</a></li>
+ <li><a href="#style1">Light, effects, and shadows</a></li>
+ </ol>
+</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>List view icons look a lot like dialog icons, but they use an inner shadow
+effect where the light source is above the object. They are also designed to be
+used only in a {@link android.widget.ListView}. Examples include the Settings
+application.</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 Table 1 for a listing of the recommended finished icon sizes for each
+density. Also, 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 class="table-caption"><strong>Table 1.</strong> Summary of finished list view
+icon dimensions for each of the three generalized screen densities.</p>
+
+ <table>
+ <tbody>
+ <tr>
+ <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>
+ <td>
+ 24 x 24 px
+ </td>
+ <td>
+ 32 x 32 px
+ </td>
+ <td>
+ 48 x 48 px
+ </td>
+ </tr>
+
+ </tbody>
+ </table>
+
+
+
+<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="icon1">All Android Versions</h2>
+
+<p>The following guidelines describe how to design dialog icons for all versions
+of the Android platform.</p>
+
+<h3 id="structure1">Structure</h3>
+
+<ul>
+<li>A list view icon normally has a 1 px safeframe, but it is OK to use the
+safeframe area for the edge of the anti-alias of a round shape.</li>
+
+<li>All dimensions specified are based on a 32x32 pixel artboard size in
+Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
+</li>
+
+</ul>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list
+view icon structure." />
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 1. </strong>Safeframe and fill gradient for list view
+icons. Icon size is 32x32.</p>
+ </div>
+</td>
+</tr>
+</table>
+
+<h3 id="style1">Light, effects, and shadows</h3>
+
+<p>List view icons are flat and pictured face-on with an inner shadow. Built up
+by a light gradient and inner shadow, they stand out well on a dark
+background.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view
+of light, effects, and shadows for list view icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 2. </strong>Light, effects, and shadows for list view
+icons.</p>
+ <div class="image-caption-nested">
+ <table>
+ <tr><td><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr>
+ <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr>
+ <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="steps1">Step by step</h4>
+
+<ol>
+<li>Add the effects seen in Figure 2 for the proper filter.</li>
+<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
+<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
+<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 32x32 px on a transparent background. </li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
new file mode 100644
index 0000000..2029def
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
@@ -0,0 +1,349 @@
+page.title=Menu 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="#icon9">Android 2.3 and Later</a>
+ <ol>
+ <li><a href="#size9">Size</a></li>
+ <li><a href="#style9">Style, colors, and effects</a></li>
+ <li><a href="#dodonts9">Do's and don'ts</a></li>
+ <li><a href="#examples9">Example icons</a></li>
+ </ol>
+</li>
+<li><a href="#icon1">Android 2.2 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>Menu icons are graphical elements placed in the options menu shown to users
+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>
+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>
+
+
+<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>:
+<br>
+1. Icons have a larger safe frame; icon content is smaller within the full
+asset. Final asset sizes have not changed.
+<br>
+2. The color palette is slightly lighter.
+<br>
+3. No outer glow effects are applied.
+<br>
+4. Menu icons can now be rendered on either dark or light backgrounds.
+
+</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>
+
+<h3 id="size9">Size and positioning</h3>
+
+<p>Menu icons can use a variety of shapes and forms and must be scaled and
+positioned inside the asset to create consistent visual weight with other
+icons.</p>
+
+<p>Figure 1 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. 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 1 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 to allow for
+varying icon shapes while maintaining a consistent visual weight.</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>Menu icon dimensions for high-density (<code>hdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 72 x 72 px</li>
+ <li>Icon: 48 x 48 px</li>
+ <li>Square Icon: 44 x 44 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/menu_size_hdpi.png" width="450">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Menu icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 48 x 48 px</li>
+ <li>Icon: 32 x 32 px</li>
+ <li>Square Icon: 30 x 30 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/menu_size_mdpi.png" width="450">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Menu icon dimensions for low-density (<code>ldpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 36 x 36 px</li>
+ <li>Icon: 24 x 24 px</li>
+ <li>Square Icon: 22 x 22 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/menu_size_ldpi.png" width="450">
+</td>
+</tr>
+
+<tr>
+<td style="border:0;"></td>
+<td style="border:0;">
+ <p class="table-caption"><strong>Figure 1.</strong>
+ Menu icon sizing and positioning inside the bounds of the
+ icon asset.</p>
+</td>
+</tr>
+
+</table>
+
+
+
+
+<h3 id="style9">Style, colors, and effects</h3>
+
+<p>Menu icons are flat, pictured face on, and greyscale. A slight deboss and
+some other effects, which are shown below, are used to create depth. Menu icons
+should include rounded corners, but only when logically appropriate.</p>
+
+<p>In order to maintain consistency, all menu icons must use the same
+color palette and effects, as shown in Figure 2.</p>
+
+
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/menu_style.png" alt="A view of light, effects, and shadows for menu icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 2. </strong>Style, light and effects for menu 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>Corner rounding:</td><td>2 pixel corner radius, when appropriate<br><br></td></tr>
+ <tr><td><em>2.</em></td><td nowrap>Fill gradient:</td><td>90°, from <code>#8C8C8C</code> to <code>#B2B2B2</code><br><br></td></tr>
+ <tr><td><em>3.</em></td><td nowrap>Inner shadow:</td><td><code>#000000</code>, 20% opacity<br>angle 90°<br>distance 2px<br>size 2px<br><br></td></tr>
+ <tr><td><em>4.</em></td><td nowrap>Inner bevel:</td><td>depth 1%<br>direction down<br>size 0px<br>angle 90°<br>altitude 10°<br>highlight <code>#ffffff</code>, 70% opacity<br>shadow <code>#000000</code>, 25% opacity</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+
+
+
+<h3 id="dodonts9">Do's and don'ts</h3>
+
+<p>Below are some "do and don't" examples to consider when creating menu icons for
+your application. </p>
+
+
+<img src="{@docRoot}images/icon_design/do_dont_menuicons.png">
+
+
+
+
+<h3 id="examples9">Example icons</h3>
+
+<p>Shown below are standard high-density menu icons that are used in the Android
+platform.</p>
+
+<p class="warning"><strong>Warning:</strong> Because these resources can change
+between platform versions, you should not reference these icons using the
+Android platform resource IDs (i.e. menu 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/menu_standard.png" />
+
+
+
+
+<h2 id="icon1">Android 2.2 and Earlier</h2>
+
+<p>The following guidelines describe how to design menu icons for Android 2.2
+(API Level 4) and earlier. Menu icons in Android 2.2 and below are drawn in a
+flat-front perspective. Elements in a menu icon must not be visualized in 3D or
+perspective.</p>
+
+<h3 id="structure1">Structure</h3>
+
+<ul>
+<li>In order to maintain consistency, all menu icons must use the same
+primary palette and the same effects. For more information, see the
+menu icon <a href="#palette1">color palette</a>. </li>
+
+<li>Menu icons should include rounded corners, but only when logically
+appropriate. For example, in Figure 3 the logical place for rounded corners is
+the roof and not the rest of the building.</span></li>
+
+<li>All dimensions specified on this page are based on a 48x48 pixel artboard
+size with a 6 pixel safeframe.</li>
+
+<li>The menu icon effect (the outer glow) described in <a
+href="#style1">Light, effects, and shadows</a> can overlap the 6px safeframe,
+but only when necessary. The base shape must always stay inside the
+safeframe.</li>
+
+<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
+
+<li>Templates for creating menu icons in Adobe Photoshop are available in the
+Icon Templates Pack.</li>
+</ul>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu
+icon structure." />
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 3. </strong>Safeframe and corner-rounding for menu
+icons. Icon size is 48x48.</p>
+ </div>
+</td>
+</tr>
+</table>
+
+
+<h3 id="style1">Light, effects, and shadows</h3>
+
+<p>Menu icons are flat and pictured face on. A slight deboss and some other
+effects, which are shown below, are used to create depth.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/menu_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 4. </strong>Light, effects, and shadows for launcher 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>
+ <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr>
+ <tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr>
+ <tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="palette1">Color palette</h4>
+
+<table>
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png"/></td>
+<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for outer glow and bevel highlight.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png"/></td>
+<td class="image-caption-c">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png"/></td>
+<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for inner shadow and bevel shadow.</td>
+</tr>
+
+</table>
+
+</td>
+
+<td style="border:0">
+
+<h4 id="steps1">Step by step</h4>
+
+<ol>
+<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
+<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
+of 48x48 px on a transparent background. Mind the safeframe.</li>
+<li>Add the effects seen as described in Figure 4.</li>
+<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd
new file mode 100644
index 0000000..1fc3528
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd
@@ -0,0 +1,330 @@
+page.title=Status 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="#icon9">Android 2.3 and Later</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="#examples9">Example icons</a></li>
+ </ol>
+</li>
+<li><a href="#icon1">Android 2.2 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>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>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>
+
+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>
+
+
+
+<h2 id="icon9">Android 2.3 and Later</h2>
+
+<p>The following guidelines describe how to design status bar icons for Android
+2.3 (API Level 9) and later.</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
+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>
+
+<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 vertically than the full asset box to allow for
+varying icon shapes while maintaining a consistent visual weight.</li>
+</ul>
+
+<table>
+<tr>
+
+<td style="border:0;">
+<ol class="nolist">
+ <li>Status bar icon dimensions for high-density (<code>hdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 24w x 38h px (preferred, width may vary)</li>
+ <li>Icon: 24w x 24h px (preferred, width may vary)</li>
+ </ol>
+ </li>
+</ol>
+</td>
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/statusbar_size_hdpi.png" width="318">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Status bar icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 16w x 25 px (preferred, width may vary)</li>
+ <li>Icon: 16w x 16w px (preferred, width may vary)</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/statusbar_size_mdpi.png" width="318">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Status bar icon dimensions for low-density (<code>ldpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 12w x 19h px (preferred, width may vary)</li>
+ <li>Icon: 12w x 12h px (preferred, width may vary)</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/statusbar_size_ldpi.png" width="318">
+</td>
+</tr>
+
+<tr>
+<td style="border:0;"></td>
+<td style="border:0;">
+ <p class="table-caption"><strong>Figure 1.</strong>
+ Status bar icon sizing and positioning inside the bounds of the
+ icon asset.</p>
+</td>
+</tr>
+
+</table>
+
+
+
+
+<h3 id="style9">Style, colors, and effects</h3>
+
+<p>Status bar icons are flat, matte, and pictured face-on.</p>
+
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/statusbar_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 2. </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>
+ <tr><td><em>1.</em></td><td nowrap>Fill gradient:</td><td>90°, from <code>#828282</code> to <code>#919191</code><br><br></td></tr>
+ <tr><td><em>2.</em></td><td nowrap>Inner shadow:</td><td><code>#FFFFFF</code>, 10% opacity<br>angle 90°<br>distance 1px<br>size 0px<br><br></td></tr>
+ <tr><td><em>3.</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="dosdonts9">Do's and don'ts</h3>
+
+<p>Below are some "do and don't" examples to consider when creating status bar icons for
+your application. </p>
+
+
+<img src="{@docRoot}images/icon_design/do_dont_statusicons.png">
+
+
+
+
+<h3 id="examples9">Example icons</h3>
+
+<p>Shown below are standard high-density status bar icons that are used in
+the Android platform.</p>
+
+<p class="warning"><strong>Warning:</strong> Because these resources can change
+between platform versions, you should not reference these 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/statusbar_standard.png" />
+
+
+
+<h2 id="icon1">Android 2.2 and Earlier</h2>
+
+<p>The following guidelines describe how to design status bar icons for Android
+2.2 (API Level 8) and earlier.</p>
+
+<h3 id="structure1">Structure</h3>
+
+<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>
+
+<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
+pixel safeframe.</li>
+
+<li>Status bar icons can overlap the safeframe to the left and right when
+necessary, but must not overlap the safeframe at the top and bottom.</li>
+
+<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
+
+<li>Templates for creating status bar icons using Adobe Photoshop are available
+in the Icon Templates Pack.</li>
+</ul>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of
+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
+icons. Icon size is 25x25.</p>
+ </div>
+</td>
+</tr>
+</table>
+
+
+<h3 id="style1">Light, effects, and shadows</h3>
+
+<p>Status bar icons are slightly debossed, high in contrast, and pictured
+face-on to enhance clarity at small sizes.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/statusbar_light.png"/>
+</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>
+ <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>
+ <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr>
+ <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr>
+ <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="palette1">Color palette</h4>
+
+<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p>
+
+<table>
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png"/></td>
+<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png"/></td>
+<td class="image-caption-c">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png"/></td>
+<td class="image-caption-c">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png"/></td>
+<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td>
+</tr>
+
+</table>
+
+</td>
+
+<td style="border:0">
+
+<h4 id="steps1">Step by step</h4>
+
+<ol>
+<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>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
new file mode 100644
index 0000000..1f96c3e
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
@@ -0,0 +1,454 @@
+page.title=Tab 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="#tabstates">Providing Icons for Two Tab States</a>
+<li><a href="#icon5">Android 2.0 and Later</a>
+ <ol>
+ <li><a href="#size5">Size</a></li>
+ <li><a href="#style5">Style, colors, and 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>Tab icons are graphical elements used to represent individual tabs in a
+multi-tab interface. Each tab icon has two states: unselected and selected.</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>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>
+
+The style of tab icons has changed drastically in
+Android 2.0 compared to <a href="#icon1">previous versions</a>. <strong>To
+provide support for all Android versions</strong>, developers should:
+<br>
+1. Place tab icons for Android 2.0 and higher in the
+<code>drawable-hdpi-v5</code>, <code>drawable-mdpi-v5</code>, and <code>drawable-ldpi-v5</code> directories.
+<br>
+2. Place tab icons for previous versions in
+<code>drawable-hdpi</code>, <code>drawable-mdpi</code>, and <code>drawable-ldpi</code> directories.
+<br>
+3. Set <code>android:targetSdkVersion</code> to 5 or higher in the
+<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html"><uses-sdk></a>
+in the <a href="{@docRoot}guide/topics/manifest/manifest-intro.html">application manifest</a>.
+This will inform the system that it should render tabs using the new tab style.
+
+</p>
+
+
+<h2 id="tabstates">Providing Icons for Two Tab States</h2>
+
+<p>Tab icons should have two states: unselected and selected. To provide icons
+with multiple states, developers must create a
+<a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state
+list drawable</a> for each an icon, which is an XML file that lists which image
+to use for the different UI states.</p>
+
+<p>For example, for a tab widget with tabs named 'Friends' and 'Coworkers',
+you can use a directory structure similar to the one below:</p>
+
+<pre>res/...
+ drawable/...
+ <strong>ic_tab_friends.xml</strong>
+ <strong>ic_tab_coworkers.xml</strong>
+ drawable-ldpi/...
+ ic_tab_friends_selected.png
+ ic_tab_friends_unselected.png
+ ic_tab_coworkers_selected.png
+ ic_tab_coworkers_unselected.png
+ drawable-mdpi/...
+ ic_tab_friends_selected.png
+ ic_tab_friends_unselected.png
+ ic_tab_coworkers_selected.png
+ ic_tab_coworkers_unselected.png
+ drawable-hdpi/...
+ ...
+ drawable-ldpi-v5/...
+ ...
+ drawable-mdpi-v5/...
+ ...
+ drawable-hdpi-v5/...
+ ...</pre>
+
+<p>The contents of the XML files listed above should reference the corresponding
+selected and unselected icon drawables. For example, below is the code
+for <code>ic_tab_friends.xml</code>:</p>
+
+<pre>
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+ <!-- selected state -->
+ <item android:drawable="@drawable/ic_tab_friends_selected"
+ android:state_selected="true"
+ android:state_pressed="false" />
+ <!-- unselected state (default) -->
+ <item android:drawable="@drawable/ic_tab_friends_unselected" />
+</selector>
+</pre>
+
+
+
+
+<h2 id="icon5">Android 2.0 and Later</h2>
+
+<p>The following guidelines describe how to design tab icons for Android
+2.0 (API Level 5) and later.</p>
+
+<h3 id="size5">Size and positioning</h3>
+
+<p>Tab 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
+asset. You should size the icons <em>smaller than the actual bounds of the
+asset</em>.</p>
+
+<p>In order to indicate the recommended size for the icon, each example in
+Figure 1 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 to 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>Tab icon dimensions for high-density (<code>hdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 48 x 48 px</li>
+ <li>Icon: 42 x 42 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/tab_size_hdpi.png" width="385">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Tab icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 32 x 32 px</li>
+ <li>Icon: 28 x 28 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/tab_size_mdpi.png" width="385">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+ <ol class="nolist">
+ <li>Tab icon dimensions for low-density (<code>ldpi</code>) screens:</li>
+ <ol class="nolist">
+ <li>Full Asset: 24 x 24 px</li>
+ <li>Icon: 22 x 22 px</li>
+ </ol>
+ </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/tab_size_ldpi.png" width="385">
+</td>
+</tr>
+
+<tr>
+<td style="border:0;"></td>
+<td style="border:0;">
+ <p class="table-caption"><strong>Figure 1.</strong>
+ Tab icon sizing and positioning inside the bounds of the
+ icon asset.</p>
+</td>
+</tr>
+
+</table>
+
+
+
+
+<h3 id="style5">Style, colors, and effects</h3>
+
+<p>Tab icons are flat, matte, and pictured face-on.</p>
+
+<p>Tab icons should have two states: selected and unselected.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_style_unselected.png" alt="A view of effects for unselected tab icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 2. </strong>Style and effects for unselected tab 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>Fill color:</td><td><code>#808080</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>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_style_selected.png" alt="A view of effects for selected tab icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 3. </strong>Style and effects for selected tab 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>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.<br><br></td></tr>
+ <tr><td><em>3.</em></td><td nowrap>Outer glow:</td><td><code>#000000</code>, 25% opacity<br>size 3px</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+
+
+<h3 id="dosdonts5">Do's and don'ts</h3>
+
+<p>Below are some "do and don't" examples to consider when creating tab icons for
+your application. </p>
+
+
+<img src="{@docRoot}images/icon_design/do_dont_tabicons.png">
+
+
+
+
+<h3 id="examples5">Example icons</h3>
+
+<p>Shown below are standard high-density tab icons that are used in
+the Android platform.</p>
+
+<p class="warning"><strong>Warning:</strong>
+Because these resources can change between platform versions, you
+should not reference the system's copy of the resources. 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/tab_standard.png" />
+
+
+
+<h2 id="icon1">Android 1.6 and Earlier</h2>
+
+<p>The following guidelines describe how to design tab icons for Android
+1.6 (API Level 4) and earlier.</p>
+
+<h4 id="structure1">Structure</h4>
+
+<ul>
+<li>Unselected tab icons have the same fill gradient and effects as
+<a href="icon_design_menu.html#icon1">menu icons</a>,
+but with no outer glow.</li>
+
+<li>Selected tab icons look just like unselected tab icons, but with a fainter
+inner shadow, and have the same front part gradient as
+<a href="icon_design_dialog.html#icon1">dialog icons</a>.</li>
+
+<li>Tab icons have a 1 px safeframe which should only be overlapped for the edge
+of the anti-alias of a round shape.</li>
+
+<li>All dimensions specified on this page are based on a 32x32 px artboard size.
+Keep 1 px of padding around the bounding box inside the Photoshop template.</li>
+
+</ul>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of
+unselected tab icon structure." />
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 3. </strong>Safeframe and fill gradient for unselected tab
+icons. Icon size is 32x32.</p>
+ </div>
+</td>
+</tr>
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of
+selected tab icon structure." />
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 4. </strong>Safeframe and fill gradient for tab icons in
+selected state. Icon size is 32x32.</p>
+ </div>
+</td>
+</tr>
+</table>
+
+<h3 id="unselectedtabdetails1">Unselected tab icon</h3>
+
+<h4 id="unselectedtablight1">Light, effects, and shadows</h4>
+
+<p>Unselected tab icons look just like the selected tab icons, but with a
+fainter inner shadow, and the same front part gradient as the dialog icons.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view
+of light, effects, and shadows for unselected tab icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 5. </strong>Light, effects, and shadows for unselected
+tab icons.</p>
+ <div class="image-caption-nested">
+ <table>
+ <tr><td><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
+ <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 10 % opacity | angle 90° distance 2px | size 2px</td></tr>
+ <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="unselectedtabsteps1">Step by step</h4>
+
+<ol>
+<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
+<li>Import the shape to a tool like Adobe Photoshop and scale to fit an image of
+32x32 px on a transparent background.</li>
+<li>Add the effects seen in Figure 5 for the unselected state filter.</li>
+<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
+
+<h3 id="selectedtabdetails1">Selected tab icon</h3>
+
+<p>The selected tab icons have the same fill gradient and effects as the menu
+icon, but with no outer glow.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+ <img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of
+light, effects, and shadows for selected tab icons."/>
+</td>
+<td class="image-caption-c">
+ <div class="caption grad-rule-top">
+ <p><strong>Figure 6. </strong>Light, effects, and shadows for selected tab
+icons.</p>
+ <div class="image-caption-nested">
+ <table>
+ <tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr>
+ <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr>
+ <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
+ </table>
+ </div>
+ </div>
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="selectedtabpalette1">Color palette</h4>
+
+<table>
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png"/></td>
+<td class="image-caption-c">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td>
+</tr>
+
+</table>
+
+</td>
+
+<td style="border:0">
+
+<h4 id="selectedtabsteps1">Step by step</h4>
+
+<ol>
+<li>Create the basic shape using a tool like Adobe Illustrator.</li>
+<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
+px artboard with a transparent background. </li>
+<li>Add the effects seen in Figure 6 for the selected state filter.</li>
+<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd
index ea3551d..cb34d2e 100644
--- a/docs/html/guide/practices/ui_guidelines/index.jd
+++ b/docs/html/guide/practices/ui_guidelines/index.jd
@@ -12,7 +12,7 @@
<dl>
<dt><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon
Design Guidelines</a> and <a
-href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon Templates Pack
+href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon Templates Pack
» </a></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
diff --git a/docs/html/images/icon_design/IconGraphic_Colors.png b/docs/html/images/icon_design/IconGraphic_Colors.png
index f70eefc..7723add 100644
--- a/docs/html/images/icon_design/IconGraphic_Colors.png
+++ b/docs/html/images/icon_design/IconGraphic_Colors.png
Binary files differ
diff --git a/docs/html/images/icon_design/do_dont_statusicons.png b/docs/html/images/icon_design/do_dont_statusicons.png
index 20c6737..731a202 100644
--- a/docs/html/images/icon_design/do_dont_statusicons.png
+++ b/docs/html/images/icon_design/do_dont_statusicons.png
Binary files differ
diff --git a/docs/html/images/icon_design/do_dont_tabicons.png b/docs/html/images/icon_design/do_dont_tabicons.png
new file mode 100644
index 0000000..06171b3
--- /dev/null
+++ b/docs/html/images/icon_design/do_dont_tabicons.png
Binary files differ
diff --git a/docs/html/images/icon_design/launcher_size_hdpi.png b/docs/html/images/icon_design/launcher_size_hdpi.png
new file mode 100644
index 0000000..e3f747f
--- /dev/null
+++ b/docs/html/images/icon_design/launcher_size_hdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/launcher_size_ldpi.png b/docs/html/images/icon_design/launcher_size_ldpi.png
new file mode 100644
index 0000000..91e87da
--- /dev/null
+++ b/docs/html/images/icon_design/launcher_size_ldpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/launcher_size_mdpi.png b/docs/html/images/icon_design/launcher_size_mdpi.png
new file mode 100644
index 0000000..e8da941
--- /dev/null
+++ b/docs/html/images/icon_design/launcher_size_mdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/launcher_structure.png b/docs/html/images/icon_design/launcher_structure.png
index 53e4d9a..b48173a 100644
--- a/docs/html/images/icon_design/launcher_structure.png
+++ b/docs/html/images/icon_design/launcher_structure.png
Binary files differ
diff --git a/docs/html/images/icon_design/launcher_style.png b/docs/html/images/icon_design/launcher_style.png
new file mode 100644
index 0000000..c4d2c6b
--- /dev/null
+++ b/docs/html/images/icon_design/launcher_style.png
Binary files differ
diff --git a/docs/html/images/icon_design/menu_size_hdpi.png b/docs/html/images/icon_design/menu_size_hdpi.png
new file mode 100644
index 0000000..597bbff
--- /dev/null
+++ b/docs/html/images/icon_design/menu_size_hdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/menu_size_ldpi.png b/docs/html/images/icon_design/menu_size_ldpi.png
new file mode 100644
index 0000000..6b521e1
--- /dev/null
+++ b/docs/html/images/icon_design/menu_size_ldpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/menu_size_mdpi.png b/docs/html/images/icon_design/menu_size_mdpi.png
new file mode 100644
index 0000000..9552991
--- /dev/null
+++ b/docs/html/images/icon_design/menu_size_mdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/menu_standard.png b/docs/html/images/icon_design/menu_standard.png
new file mode 100644
index 0000000..e50b74a
--- /dev/null
+++ b/docs/html/images/icon_design/menu_standard.png
Binary files differ
diff --git a/docs/html/images/icon_design/menu_style.png b/docs/html/images/icon_design/menu_style.png
new file mode 100644
index 0000000..030495a
--- /dev/null
+++ b/docs/html/images/icon_design/menu_style.png
Binary files differ
diff --git a/docs/html/images/icon_design/statusbar_size_hdpi.png b/docs/html/images/icon_design/statusbar_size_hdpi.png
new file mode 100644
index 0000000..caa4047
--- /dev/null
+++ b/docs/html/images/icon_design/statusbar_size_hdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/statusbar_size_ldpi.png b/docs/html/images/icon_design/statusbar_size_ldpi.png
new file mode 100644
index 0000000..1fe5c25
--- /dev/null
+++ b/docs/html/images/icon_design/statusbar_size_ldpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/statusbar_size_mdpi.png b/docs/html/images/icon_design/statusbar_size_mdpi.png
new file mode 100644
index 0000000..626ff60
--- /dev/null
+++ b/docs/html/images/icon_design/statusbar_size_mdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/statusbar_standard.png b/docs/html/images/icon_design/statusbar_standard.png
new file mode 100644
index 0000000..260e8e9
--- /dev/null
+++ b/docs/html/images/icon_design/statusbar_standard.png
Binary files differ
diff --git a/docs/html/images/icon_design/statusbar_style.png b/docs/html/images/icon_design/statusbar_style.png
new file mode 100644
index 0000000..3beb6ad
--- /dev/null
+++ b/docs/html/images/icon_design/statusbar_style.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_size_hdpi.png b/docs/html/images/icon_design/tab_size_hdpi.png
new file mode 100644
index 0000000..0e3a5c1
--- /dev/null
+++ b/docs/html/images/icon_design/tab_size_hdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_size_ldpi.png b/docs/html/images/icon_design/tab_size_ldpi.png
new file mode 100644
index 0000000..cb361ca
--- /dev/null
+++ b/docs/html/images/icon_design/tab_size_ldpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_size_mdpi.png b/docs/html/images/icon_design/tab_size_mdpi.png
new file mode 100644
index 0000000..557b491
--- /dev/null
+++ b/docs/html/images/icon_design/tab_size_mdpi.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_standard.png b/docs/html/images/icon_design/tab_standard.png
new file mode 100644
index 0000000..7f07297
--- /dev/null
+++ b/docs/html/images/icon_design/tab_standard.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_style_selected.png b/docs/html/images/icon_design/tab_style_selected.png
new file mode 100644
index 0000000..e6f383e
--- /dev/null
+++ b/docs/html/images/icon_design/tab_style_selected.png
Binary files differ
diff --git a/docs/html/images/icon_design/tab_style_unselected.png b/docs/html/images/icon_design/tab_style_unselected.png
new file mode 100644
index 0000000..426e7c9
--- /dev/null
+++ b/docs/html/images/icon_design/tab_style_unselected.png
Binary files differ
diff --git a/docs/html/shareables/icon_templates-v2.3.zip b/docs/html/shareables/icon_templates-v2.3.zip
new file mode 100644
index 0000000..58d90ae
--- /dev/null
+++ b/docs/html/shareables/icon_templates-v2.3.zip
Binary files differ
