Update Icon Guidelines and Icon Templates Pack for ICS

Change-Id: I2e0f132e636a288d21989095bac0da443e128d04

8 files changed, 1136 insertions, 658 deletions

diff --git a/docs/html/guide/practices/ui_guidelines/icon_design.jd b/docs/html/guide/practices/ui_guidelines/icon_design.jd
index d3b702d..07b73bb 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd
@@ -36,6 +36,8 @@ parent.link=index.html
 <h2>Downloads</h2>
 
 <ol>
+<li><a href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon
+Templates Pack, v4.0 &raquo;</a></li>
 <li><a href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon
 Templates Pack, v2.3 &raquo;</a></li>
 <li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon
@@ -74,6 +76,10 @@ icons used throughout Android applications:</p>
   <dt><strong><a href="icon_design_menu.html">Menu Icons</a></strong></dt>
   <dd>Menu icons are graphical elements placed in the options menu shown to
   users when they press the Menu button.</dd>
+  <dt><strong><a href="icon_design_action_bar.html">Action Bar Icons</a>
+  <span class="new">new!</span></strong></dt>
+  <dd>Action Bar icons are graphical elements representing action items in the
+  <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>.</dd>
   <dt><strong><a href="icon_design_status_bar.html">Status Bar Icons</a></strong></dt>
   <dd>Status bar icons are used to represent notifications from your
   application in the status bar.</dd>
@@ -112,8 +118,8 @@ with the layers and treatments may vary based on the program you are using.</p>
 </p>
 
 <p style="margin-left:2em"><a
-href="{@docRoot}shareables/icon_templates-v2.3.zip">Download the Icon Templates
-Pack for Android 2.3 &raquo;</a>
+href="{@docRoot}shareables/icon_templates-v4.0.zip">Download the Icon Templates
+Pack for Android 4.0 &raquo;</a>
 
 <p>For previous versions of the Icon Templates Pack, see the <em>Downloads</em>
 section in the box at the top-right corner of this page.</p>
@@ -134,7 +140,7 @@ provide icons in such a way that they will be displayed properly on any device,
 regardless of the device's screen size or resolution.</p>
 
 <p>In general, the recommended approach is to create a separate set of icons for
-each of the three generalized screen densities listed in Table 1. Then,
+each generalized screen density. Then,
 store them in density-specific resource directories in your application. When
 your application runs, the Android platform will check the characteristics of
 the device screen and load icons from the appropriate density-specific
@@ -146,145 +152,6 @@ directory qualifiers for screen size and density</a>. </p>
 <p>For tips on how to create and manage icon sets for multiple densities, see 
 <a href="#design-tips">Tips for Designers</a>.</p>
 
-<p class="table-caption" id="screens-table"><strong>Table 1.</strong> Summary of
-finished icon dimensions for each of the three generalized screen densities, by
-icon type.</p>
-
-  <table>
-    <tbody>
-<tr>
-<th>Icon Type</th><th colspan="3">Standard Asset Sizes (in Pixels), for
-Generalized Screen Densities</th></tr>
-    <tr>
-      <td style="background-color:#f3f3f3"></td>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        <nobr>Low density screen <em>(ldpi)</em></nobr>
-      </th>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        <nobr>Medium density screen <em>(mdpi)</em></nobr>
-      </th>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        <nobr>High density screen <em>(hdpi)</em><nobr>
-      </th>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Launcher
-      </th>
-      <td>
-          36 x 36 px
-      </td>
-
-      <td>
-         48 x 48 px
-      </td>
-      <td>
-          72 x 72 px
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Menu
-      </th>
-      <td>
-          36 x 36 px
-      </td>
-
-      <td>
-         48 x 48 px
-      </td>
-      <td>
-          72 x 72 px
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Status Bar (Android 2.3 and later)
-      </th>
-      <td>
-        12w x 19h px<br>
-        (preferred, width may vary)
-      </td>
-
-      <td>
-        16w x 25h px<br>
-        (preferred, width may vary)
-      </td>
-      <td>
-         24w x 38h px<br>
-        (preferred, width may vary)
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Status Bar (Android 2.2 and below)
-      </th>
-      <td>
-          19 x 19 px
-      </td>
-
-      <td>
-         25 x 25 px
-      </td>
-      <td>
-          38 x 38 px
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Tab
-      </th>
-      <td>
-          24 x 24 px
-      </td>
-
-      <td>
-         32 x 32 px
-      </td>
-      <td>
-          48 x 48 px
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        Dialog
-      </th>
-      <td>
-          24 x 24 px
-      </td>
-
-      <td>
-         32 x 32 px
-      </td>
-      <td>
-          48 x 48 px
-      </td>
-    </tr>
-
-    <tr>
-      <th style="background-color:#f3f3f3;font-weight:normal">
-        List View
-      </th>
-      <td>
-          24 x 24 px
-      </td>
-
-      <td>
-         32 x 32 px
-      </td>
-      <td>
-          48 x 48 px
-      </td>
-    </tr>
-    </tbody>
-  </table>
-
 
 
 
@@ -317,7 +184,7 @@ common prefix for each icon type. For example:</p>
 <td><code>ic_launcher_calendar.png</code></td>
 </tr>
 <tr>
-<td>Menu icons</td>
+<td>Menu icons and Action Bar icons</td>
 <td><code>ic_menu</code></td>
 <td><code>ic_menu_archive.png</code></td>
 </tr>
@@ -349,7 +216,7 @@ of the same icon. To help keep the multiple copies of files safe and easier to
 find, we recommend creating a directory structure in your working space that
 organizes asset files per resolution. For example:</p>
 
-<pre>assets/...
+<pre>art/...
     ldpi/...
         _pre_production/...
             <em>working_file</em>.psd
@@ -361,6 +228,10 @@ organizes asset files per resolution. For example:</p>
     hdpi/...
         _pre_production/...
             <em>working_file</em>.psd
+        <em>finished_asset</em>.png
+    xhdpi/...
+        _pre_production/...
+            <em>working_file</em>.psd
         <em>finished_asset</em>.png</pre>
 
 <p>This structure parallels the density-specific structure in which you will
@@ -380,6 +251,8 @@ application: </p>
     drawable-mdpi/...
         <em>finished_asset</em>.png
     drawable-hdpi/...
+        <em>finished_asset</em>.png
+    drawable-xhdpi/...
         <em>finished_asset</em>.png</pre>
 
 
@@ -398,25 +271,16 @@ boundaries at smaller resolutions.</li>
 
 <h3>Start with large artboards</h3>
 
-<p>Because you will need to create assets for different screen densities, as
-shown in <a href="#screens-table">Table 1</a>, it is best to start your icon
+<p>Because you will need to create assets for different screen densities,
+it is best to start your icon
 designs on large artboards with dimensions that are multiples of the target icon
 sizes. For example, <a
 href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html">launcher
-icons</a> are 72, 48, or 36 pixels wide, depending on screen density. If you
+icons</a> are 96, 72, 48, or 36 pixels wide, depending on screen density. If you
 initially draw launcher icons on an 864x864 artboard, it will be easier and
 cleaner to tweak the icons when you scale the artboard down to the target
 sizes for final asset creation.</p>
 
-<p>It's also beneficial to add guide lines (also known as guides) to your large
-artboard for the recommended safe margins at the highest target density.
-Continuing with the example above, per the <a
-href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html#size5">guidelines</a>,
-launcher icon content should be 60x60 pixels (56x56 for square icons) within the
-full 72x72 asset, or a safe margin of 6 pixels on each side. On an 864x864
-artboard, this corresponds to horizontal and vertical guide lines 72 pixels from
-each side of the artboard.</p>
-
   
 
 <h3>When scaling, redraw bitmap layers as needed</h3>
@@ -431,22 +295,12 @@ densities. For example if a 60x60 circle was painted as a bitmap for
 
 <h3>When saving image assets, remove unnecessary metadata</h3>
 
-<p>To help keep each image asset as small as possible, make sure to remove any
-unnecessary headers from the file, such as Adobe Fireworks metadata or Adobe
-Photoshop headers. To remove the Photoshop header, follow these steps: </p>
-
-<ol>
-<li>Under the <strong>File</strong> menu, choose the <strong>Save for Web &amp;
-Devices</strong> command </li>
-<li>On the "Save for Web &amp; Devices" panel, set the Preset pop-up to
-"PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the
-Transparency box (if the image uses transparency)</li>
-<li>Select <strong>Save</strong>.</li>
-</ol>
-
-<p>It is also useful to use PNG file size optimization tools such as <a
+<p>Although the Android SDK tools will automatically compress PNGs when packaging
+application resources into the application binary, a good practice is to remove
+unnecessary headers and metadata from your PNG assets. Tools such as <a
 href="http://optipng.sourceforge.net/">OptiPNG</a> or <a
-href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a>.
+href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this
+metadata is removed and that your image asset file sizes are optimized.</p>
 
 
 
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd b/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd
new file mode 100644
index 0000000..449c27f
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_action_bar.jd
@@ -0,0 +1,189 @@
+page.title=Action Bar Icons
+parent.title=Icon Design Guidelines
+parent.link=icon_design.html
+@jd:body
+
+<div id="qv-wrapper">
+<div id="qv">
+
+<h2>In this document</h2>
+
+<ol>
+<li><a href="#icon11">Android 3.0 and Later</a>
+  <ol>
+    <li><a href="#size11">Size and format</a></li>
+    <li><a href="#style11">Style, colors, and effects</a></li>
+    <li><a href="#examples11">Example icons</a></li>
+  </ol>
+</li>
+</ol>
+
+<h2>See also</h2>
+
+<ol>
+<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a></li>
+<li><a href="{@docRoot}guide/topics/ui/actionbar.html">Using the Action Bar</a></li>
+</ol>
+
+</div>
+</div>
+
+
+
+<p>Action Bar icons are graphical elements placed in the <a
+href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> representing individual action
+items.</p>
+
+<p>As described in <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
+Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a>, you should create separate icons for all generalized screen densities, including low-,
+medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
+across the range of devices on which your application can be installed. See <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
+for suggestions on how to work with multiple sets of icons.</p>
+
+<p><strong>Final art must be exported as a transparent PNG file. Do not include
+a background color</strong>.</p>
+
+<p>Templates for creating icons in Adobe Photoshop are available in the <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
+Templates Pack</a>.</p>
+
+
+
+<h2 id="icon11">Android 3.0 and Later</h2>
+
+<p>The following guidelines describe how to design action bar icons for Android
+3.0 (API Level 11) and later.</p>
+
+
+<h3 id="size11">Size and format</h2>
+
+<p>Action Bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished
+action bar icon dimensions, corresponding to a given generalized screen density, are shown in
+the table below.</p>
+
+<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
+finished Action Bar icon dimensions for each generalized screen density.</p>
+
+<table>
+  <tbody>
+  <tr>
+    <th></th>
+    <th>
+      <code>ldpi</code> (120 dpi)<br>
+      <small style="font-weight: normal">(Low density screen)</small>
+    </th>
+    <th>
+      <code>mdpi</code> (160 dpi)<br>
+      <small style="font-weight: normal">(Medium density screen)</small>
+    </th>
+    <th>
+      <code>hdpi</code> (240 dpi)<br>
+      <small style="font-weight: normal">(High density screen)</small>
+    </th>
+    <th>
+      <code>xhdpi</code> (320 dpi)<br>
+      <small style="font-weight: normal">(Extra-high density screen)</small>
+    </th>
+  </tr>
+  <tr>
+    <th style="background-color:#f3f3f3;font-weight:normal">
+      Action Bar Icon Size
+    </th>
+    <td>
+      18 x 18 px
+    </td>
+    <td>
+      24 x 24 px
+    </td>
+    <td>
+      36 x 36 px
+    </td>
+    <td>
+      48 x 48 px
+    </td>
+  </tr>
+  </tbody>
+</table>
+
+
+
+<h3 id="style11">Style, colors, and effects</h3>
+
+<p>Action Bar icons are flat, pictured face on, and generally greyscale, depending on the
+application's theme. Action Bar icons should not look three-dimensional.</p>
+
+<p>In order to maintain consistency across the application's Action Bar, all Action Bar icons should
+use the same color palette and effects.</p>
+
+<p>When using the default "Holo Light" or "Holo Dark" themes, icons should use the color palette
+and effects shown in Figure 1 and Figure 2, below.</p>
+
+
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/action_bar_holo_light_style.png"
+    alt="A view of effects for Action Bar icons for the 'Holo Light' theme.">
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 1. </strong>Style and effects for "Holo Light" theme Action Bar icons.</p>
+    <div class="image-caption-nested">
+    <table>
+      <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#333333</code>, 60% opacity
+        <br><br></td></tr>
+      <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
+        the outer shape and consist purely of transparent pixels.</td></tr>
+    </table>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/action_bar_holo_dark_style.png"
+    alt="A view of effects for Action Bar icons for the 'Holo Dark' theme.">
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 2. </strong>Style and effects for "Holo Dark" theme Action Bar icons.</p>
+    <div class="image-caption-nested">
+    <table>
+      <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code>, 80% opacity
+        <br><br></td></tr>
+      <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
+        the outer shape and consist purely of transparent pixels.</td></tr>
+    </table>
+    <p class="note"><strong>Note: </strong> icons should should have a transparent background;
+      the dark background here is for effect only.</p>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+
+
+
+<h3 id="examples11">Example icons</h3>
+
+<p>Shown below are example extra-high-density Action Bar icons that are used throughout Android
+system applications.</p>
+
+<p class="warning"><strong>Warning:</strong> Because resources can change between platform versions,
+you should not reference built-in icons using the Android platform resource IDs (i.e. menu or Action
+Bar icons under <code>android.R.drawable</code>). If you want to use any icons or other internal
+drawable resources, you should store a local copy of those icons or drawables in your application
+resources, then reference the local copy from your application code. In that way, you can maintain
+control over the appearance of your icons, even if the system's copy changes. Note that the grid
+below is not intended to be complete.</p>
+
+<img src="{@docRoot}images/icon_design/action_bar_examples.png" />
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
index cb04b55..3f6061c 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd
@@ -9,23 +9,15 @@ parent.link=icon_design.html
 <h2>In this document</h2>
 
 <ol>
-<li><a href="#market">Application Icons in Android Market</a></li>
-<li><a href="#icon5">Android 2.0 and Later</a>
-  <ol>
-    <li><a href="#style5">Style</a></li>
-    <li><a href="#size5">Size</a></li>
-    <li><a href="#materialscolors5">Materials and colors</a></li>
-    <li><a href="#effects5">Effects</a></li>
-    <li><a href="#dodonts5">Do's and don'ts</a></li>
-    <li><a href="#examples5">Example icons</a></li>
-  </ol>
-</li>
-<li><a href="#icon1">Android 1.6 and Earlier</a></li>
+<li><a href="#goals">Goals of the Launcher Icon</a></li>
+<li><a href="#dos_donts">Do's and Don'ts</a></li>
+<li><a href="#size">Size and Format</a></li>
 </ol>
 
 <h2>See also</h2>
 
 <ol>
+<li><a href="icon_design_launcher_archive.html">Older guidelines</a></li>
 <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
 Screens</a></li>
 </ol>
@@ -34,487 +26,225 @@ Screens</a></li>
 </div>
 
 
-<p>A Launcher icon is a graphic that represents your application on the device's
-Home screen and in the Launcher window.</p>
+<p>A launcher icon is a graphic that represents your application. Launcher icons are used by
+Launcher applications and appear on the user’s Home screen. Launcher icons can also be used to
+represent shortcuts into your application (for example, a contact shortcut icon that opens detail
+information for a contact).</p>
 
-<p>The user opens the Launcher by touching the icon at the bottom of the Home
-screen. The Launcher opens and exposes the icons for all of the installed
-applications. The user selects an application and opens it by touching the
-Launcher icon or by means of any hardware navigation controls available, such as
-a trackball or d-pad.</p>
+<p>As described in <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
+Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a>, you should create separate icons for all generalized screen densities, including low-,
+medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
+across the range of devices on which your application can be installed. See <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
+for suggestions on how to work with multiple sets of icons.</p>
 
-<p>As described in <a href="icon_design.html#icon-sets">Providing
-Density-Specific Icon Sets</a>, you should create separate icons for low-,
-medium-, and high-density screens. This ensures that your icons will display
-properly across the range of devices on which your application can be installed.
-See <a href="icon_design.html#design-tips">Tips for Designers</a> for
-suggestions on how to work with multiple sets of icons.</p>
+<p>A high-resolution version of your application launcher icon is also required by Android Market
+for use in application listings. For more details on this, see <a
+href="#icons_in_market">Application Icons in Android Market</a> below.</p>
 
 
+<p class="note"><strong>Note:</strong>
 
-<h2 id="market">Application Icons in Android Market</h2>
-
-<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing
-your application on Android Market</a>, you will also need to provide a 512x512
-pixel, high-resolution application icon in the <a
-href="http://market.android.com/publish">developer console</a> at upload-time.
-This icon will be used in various locations in Android Market and does
-not replace your launcher icon.</p>
-
-<p>For tips and recommendations on creating high-resolution launcher icons that
-can easily be scaled up to 512x512, see
-<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">
-Tips for Designers</a>.</p>
-
-<p>For information and specifications about high-resolution application
-icons in Android Market, see the following article:</p>
-
-<p style="margin-left:2em"><a
-href="http://market.android.com/support/bin/answer.py?answer=1078870">
-  Graphic Assets for your Application (Android Market Help) &raquo;</a>
-
+The launcher icon guidelines pertaining to all versions of Android have been re-written. If you
+need to review the old guidelines, see the
+<a href="icon_design_launcher_archive.html">launcher icon guidelines archive</a>.
 
+</p>
 
 
-<h2 id="icon5">Android 2.0 and Later</h2>
+<h2 id="goals">Goals of the Launcher Icon</h2>
 
-<p>Starting with Android 2.0, launcher icons should be front-facing, instead of
-at a three-quarter perspective. The following guidelines describe how to design
-launcher icons for Android 2.0 (API Level 5) and later.</p>
 
-<h3 id="style5">Style</h3>
-
-<p>The launcher icons that you create should follow the general style principles
-below. The guidelines aren't meant to restrict what you can do with your icons,
-but rather they are meant to emphasize the common approaches that your icons can
-share with others on the device. Figure 1, at right, provides examples.  </p>
-
-<div class="figure">
-  <img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png" 
-    width="340">
+<div class="figure" style="width:400px" id="launcher_examples">
+  <img src="{@docRoot}images/icon_design/launcher_examples.png"
+    alt="Example launcher icons for system and third-party applications"
+    width="400" />
   <p class="img-caption">
-    <strong>Figure 1.</strong> Example launcher icons for Android 2.0 and
-    greater.
+    <strong>Figure 1.</strong> Example launcher icons for system applications (left) and
+    third-party applications (right).
   </p>
 </div>
 
-<p>Clean and contemporary:</p>
 
-<ul>
-  <li>Launcher icons should be modern and sometimes quirky; they should not
-appear aged or ragged. You should avoid overused symbolic metaphors whenever
-possible.</li>
-</ul>
+<p>Application launcher icons have three primary goals:</p>
 
-<p>Simple and iconic:</p>
-<ul>
-  <li>Android Launcher icons are caricatural in nature; your icons should be
-highly simplified and exaggerated, so that they are appropriate for use at small
-sizes. Your icons should not be overly complicated. </li>
-  <li>Try featuring a single part of an application as a symbolic
-representation of the whole (for example, the Music icon features a speaker).
-</li>
-  <li>Consider using natural outlines and shapes, both geometric and organic,
-with a realistic (but never photorealistic) rendering. </li>
-  <li>Your icons <em>should not</em> present a cropped view of a larger
-image.</li>
-</ul>
+<ol>
+  <li>Promote the brand and tell the story of the app.</li>
+  <li>Help users discover the app in Android Market.</li>
+  <li>Function well in the Launcher.</li>
+</ol>
 
-<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>
+<h3 id="promoting_brand_story">Promote the brand story</h3>
+
+<p>App launcher icons are an opportunity to showcase the brand and hint at the story of what your
+app is about. Thus, you should:</p>
 
-<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>
+  <li>Create an icon that is unique and memorable.</li>
+  <li>Use a color scheme that suits your brand.</li>
+  <li>Don't try to communicate too much with the icon. A simple icon will have more impact and be
+    more memorable.</li>
+  <li>Avoid including the application name in the icon. The app name will always be displayed
+    adjacent to the icon.</li>
 </ul>
 
-<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="help_users_discover">Help users discover the app in Android Market</h3>
 
+<p>App launcher icons are the first look that prospective users will get of your app in Android
+Market. A high quality app icon can influence users to find out more as they scroll through lists of
+applications.</p>
 
-<h3 id="size5">Size and positioning</h3>
+<p>Quality matters here. A well-designed icon can be a strong signal that your app
+is of similarly high quality. Consider working with an icon designer to develop the app’s launcher
+icon.</p>
 
-<p>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 class="note"><strong>Note:</strong> Android Market requires a high-resolution version of your
+icon; for more details on this, see <a href="#icons_in_market">Application Icons in Android
+Market</a> below.</p>
 
-<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>
+<h3 id="function_well_in_launcher">Function well in the Launcher</h3>
 
-<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>
+<p>The launcher is where users will interact with the icon most frequently. A successful app
+launcher icon will look great in all situations: on any background and next to any other icons and
+app widgets. To do this, icons should:</p>
 
-<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>
+<ul>
+  <li>Communicate well at small sizes.</li>
+  <li>Work on a wide variety of backgrounds.</li>
+  <li>Reflect the implied lighting model of the launcher (top-lit).</li>
+  <li>If the icon is 3D, use a perspective that doesn't feel out of place with other icons;
+    forward-facing works best. <ul>
+    <li>3D icons work best with a shallow depth.</li></ul>
   </li>
-</ol>
-</td>
-<td style="border:0;">
-  <img src="{@docRoot}images/icon_design/launcher_size_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>Have a unique silhouette for faster recognition; not all Android app icons should be square. <ul>
+    <li>Icons should not present a cropped view of a larger image.</li></ul>
   </li>
-</ol>
-</td>
-
-<td style="border:0;">
- <img src="{@docRoot}images/icon_design/launcher_size_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>
+  <li>Have similar weight to other icons. Icons that are too spindly or that don't use enough of
+    the space may not successfully attract the user’s attention, or may not stand out well on all
+    backgrounds.</li>
+</ul>
 
-<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>
+<h2 id="dos_donts">Do's and Don'ts</h2>
 
-<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>
+<p>Below are some "do and don't" examples to consider when creating icons for your application.</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>
+<table style="width: 600px">
+  <tbody>
 
-<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>
+    <tr>
+      <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_settings.png"
+        alt="Side by side: overly complicated vs. simpler launcher icons"></td>
+      <td style="border:0; vertical-align:middle">Icons should not be overly complicated. Remember
+        that launcher icons will be used at often small sizes, so they should be distinguishable at
+        small sizes.</td>
+    </tr>
 
-<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>
+      <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_clock.png"
+        alt="Side by side: cropped and glossy vs. matte and single-shape launcher icons"></td>
+      <td style="border:0; vertical-align:middle">Icons should not be cropped. Use unique shapes
+        where appropriate; remember that launcher icons should differentiate your application from
+        others. Additionally, do not use too glossy a finish unless the represented object has a
+        glossy material.</td>
     </tr>
-  </tbody>
-</table>
 
+    <tr>
+      <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom_2.png"
+        alt="Side by side: overly thin vs. thicker, weightier icons"></td>
+      <td style="border:0; vertical-align:middle">Icons should not be thin. They should have a
+        similar weight to other icons. Overly thin icons will not stand out well on all
+        backgrounds.</td>
+    </tr>
 
+    <tr>
+      <td style="border:0"><img src="{@docRoot}images/icon_design/launcher_dodont_custom.png"
+        alt="Side by side: full-frame vs. subtly rounded and treated icons"></td>
+      <td style="border:0; vertical-align:middle">Icons should make use of the alpha channel, and
+        should not simply be full-frame images. Where appropriate, distinguish your icon with
+        subtle yet appealing visual treatment.</td>
+    </tr>
 
-<h3 id="effects5">Effects</h3>
-
-<p>Launcher icons are flat and the perspective is straight-on, rather than at an
-angle. A drop shadow is used to create a sense of depth. Launcher icons can use
-varying textures and lighting effects, but must be lit directly from above
-(straight down).</p>
-
-<p>In order to maintain consistency, all launcher icons should use the same
-drop shadow effect, as shown in Figure 6.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
-  <img src="{@docRoot}images/icon_design/launcher_style.png"/>
-</td>
-<td class="image-caption-c">
-  <div class="caption grad-rule-top">
-    <p><strong>Figure 6. </strong>Style, light and effects for launcher icons.</p>
-    <div class="image-caption-nested">
-    <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
-    <table>
-    <tr><td><em>1.</em></td><td nowrap>Lighting:</td><td>Top-lit, using appropriate lighting details<br><br></td></tr>
-    <tr><td><em>2.</em></td><td nowrap>Drop shadow:</td><td><code>#000000</code>, 75% opacity<br>angle 90&deg;<br>distance 1px<br>size 3px<br><br></td></tr>
-    <tr><td><em>3.</em></td><td nowrap>Textures:</td><td>Tactile, appear to use real-world materials (monochromatic noise in example image)<br><br></td></tr>
-    </table>
-    </div>
-  </div>
-</td>
-</tr>
+  </tbody>
 </table>
 
 
+<h2 id="size">Size and Format</h2>
 
-<h3 id="dodonts5">Do's and don'ts</h3>
-
-<p>Below are some "do and don't" examples to consider when creating icons for
-your application.  </p>
+<p>Launcher icons should be 32-bit PNGs with an alpha channel for transparency. The finished
+launcher icon dimensions corresponding to a given generalized screen density are shown in the
+table below.</p>
 
+<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
+finished launcher icon dimensions for each generalized screen density.</p>
 
 <table>
-<tr>
-<td style="border:0;width:50%">
-
-<h4>Android Launcher icons are...</h4>
-
-<ul>
-<li>Modern, minimal, matte, tactile, and textured</li>
-<li>Forward-facing and top-lit, whole, limited in color
-palette</li>
-</ul>
-</td>
-<td style="border:0;width:50%">
-
-<h4>Android Launcher icons are not...</h4>
-
-<ul>
-<li>Antique, over-complicated, glossy, flat vector</li>
-<li>Rotated, Cropped, Over-Saturated</li>
-</ul>
-</td>
-</tr>
-<tr>
-</table>
-
-<img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png"/>
-<p class="img-caption">
-<strong>Figure 7.</strong> Side-by-side examples of "do's and don'ts" for
-Android launcher icons. </p>
-
-
-
-
-
-<h3 id="examples5">Example icons</h3>
-
-<p>Shown below are examples of high-density launcher icons used by
-Android applications. The icons are provided for your reference only &mdash;
-please do not reuse these icons in your applications.</code>.</p>
-
-<img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" />
-
-
-
-<h2 id="icon1">Android 1.6 and earlier</h2>
-
-<p>The following guidelines describe how to design launcher icons for Android
-1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are
-simplified 3D icons with a fixed perspective. The required perspective is shown
-in Figure 8.</p>
-
-<h3 id="structure1">Structure</h3>
-
-<ul>
-<li>The base of a launcher icon can face either the top view or the front
-view.</li>
-
-<li>The majority of a launcher icon’s surface should be created using the
-launcher icon <a href="#palette1">color palette</a>. To add emphasis, use
-one or more bright accent colors to highlight specific characteristics.</li>
-
-<li>All launcher icons must be created with rounded corners to make them look
-friendly and simple—as shown in Figure 8.</li>
-
-<li>All dimensions specified are based on a 250x250 pixel artboard size
-in a vector graphics editor like Adobe Illustrator, where the icon fits within
-the artboard boundaries.</li>
-
-<li><strong>Final art must be scaled down and exported as a transparent PNG file
-using a raster image editor such as Adobe Photoshop. Do not include a background
-color.</strong></li>
-
-<li>Templates for creating icons in Adobe Photoshop are available in the <a
-href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
-Templates Pack</a>.</li>
-
-</ul>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
-  <img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of
-launcher icon corners and perspective angles" />
-</td>
-<td class="image-caption-c">
-  <div class="caption grad-rule-top">
-    <p><strong>Figure 8.</strong> Rounded corners and perspective angles for
-      launcher icons (90° is vertical).</p>
-    <div class="image-caption-nested">
-      <table>
-      <tr><td><em>1.</em></td><td>92°</td></tr>
-      <tr><td><em>2.</em></td><td>92°</td></tr>
-      <tr><td><em>3.</em></td><td>173°</td></tr>
-      <tr><td><em>4.</em></td><td>171°</td></tr>
-      <tr><td><em>5.</em></td><td>49°</td></tr>
-      <tr><td><em>6.</em></td><td>171°</td></tr>
-      <tr><td><em>7.</em></td><td>64°</td></tr>
-      <tr><td><em>8.</em></td><td>97°</td></tr>
-      <tr><td><em>9.</em></td><td>75°</td></tr>
-      <tr><td><em>10.</em></td><td>93°</td></tr>
-      <tr><td><em>11.</em></td><td>169°</td></tr>
-      </table>
-    </div>
-  </div>
-</td>
-</tr>
-</table>
-
-<h3 id="style1">Light, effects, and shadows</h3>
-
-<p>Launcher icons are simplified 3D icons using light and shadows for
-definition. A light source is placed slightly to the left in front of the icon,
-and therefore the shadow expands to the right and back.</p>
-
-<table class="image-caption">
-<tr>
-<td class="image-caption-i">
-  <img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of
-light, effects, and shadows for launcher icons."/>
-</td>
-<td class="image-caption-c">
-  <div class="caption grad-rule-top">
-    <p><strong>Figure 9. </strong>Light, effects, and shadows for launcher icons.</p>
-    <div class="image-caption-nested">
-    <table>
-    <tr><td><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr>
-    <tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67°</td></tr>
-    <tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr>
-    <tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr>
-    <tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr>
-    </table>
-    </div>
-  </div>
-</td>
-</tr>
+  <tbody>
+  <tr>
+    <th></th>
+    <th>
+      <code>ldpi</code> (120 dpi)<br>
+      <small style="font-weight: normal">(Low density screen)</small>
+    </th>
+    <th>
+      <code>mdpi</code> (160 dpi)<br>
+      <small style="font-weight: normal">(Medium density screen)</small>
+    </th>
+    <th>
+      <code>hdpi</code> (240 dpi)<br>
+      <small style="font-weight: normal">(High density screen)</small>
+    </th>
+    <th>
+      <code>xhdpi</code> (320 dpi)<br>
+      <small style="font-weight: normal">(Extra-high density screen)</small>
+    </th>
+  </tr>
+  <tr>
+    <th style="background-color:#f3f3f3;font-weight:normal">
+      Launcher Icon Size
+    </th>
+    <td>
+      36 x 36 px
+    </td>
+    <td>
+      48 x 48 px
+    </td>
+    <td>
+      72 x 72 px
+    </td>
+    <td>
+      96 x 96 px
+    </td>
+  </tr>
+  </tbody>
 </table>
 
-<table>
-<tr>
-<td style="border:0">
+<p>You can also include a few pixels of padding in launcher icons to maintain a
+consistent visual weight with adjacent icons. For example, a 96 x 96 pixel <code>xhdpi</code>
+launcher icon can contain a 88 x 88 pixel shape with 4 pixels on each side for padding.
+This padding can also be used to make room for a subtle drop shadow, which can help ensure
+that launcher icons are legible across on any background color.</p>
 
-<h4 id="palette1">Launcher icon color palette</h4>
 
-<table>
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png"/></td>
-<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for highlights on edges.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png"/></td>
-<td class="image-caption-c">Light gradient<br><em>1:&nbsp;&nbsp;</em>r 0  | g 0  | b 0<br><em>2:&nbsp;&nbsp;</em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png"/></td>
-<td class="image-caption-c">Medium gradient<br><em>1:&nbsp;&nbsp;</em>r 190 | g 190 | b 190<br><em>2:&nbsp;&nbsp;</em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png"/></td>
-<td class="image-caption-c">Dark gradient<br><em>1:&nbsp;&nbsp;</em>r 100 | g 100 | b 100<br><em>2:&nbsp;&nbsp;</em>r 25  | g 25  | b 25<br>Used on details and parts in the shade of the icon.</td>
-</tr>
-
-<tr>
-<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png"/></td>
-<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td>
-</tr>
+<h3 id="icons_in_market">Application Icons in Android Market</h3>
 
-</table>
+<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing your application on
+Android Market</a>, you will also need to provide a 512 x 512 pixel, high-resolution application icon
+in the <a href="http://market.android.com/publish">developer console</a> at upload time. This icon
+will be used in various locations in Android Market and does not replace your launcher icon.</p>
 
-</td>
+<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>
 
-<td style="border:0">
+<p>For information and specifications about high-resolution application icons in Android Market, see
+the following article:</p>
 
-<h4 id="steps1">Step by step</h4>
+<p style="margin-left:2em"><a href="http://market.android.com/support/bin/answer.py?answer=1078870">
+Graphic Assets for your Application (Android Market Help) &raquo;</a>
 
-<ol>
-  <li>Create the basic shapes with a tool like Adobe Illustrator, using the
-angles described in <a href="#structure1">Launcher icon: structure</a>.
-The shapes and effects must fit within a 250x250 pixel artboard.</li>
-  <li>Add depth to shapes by extruding them and create the rounded corners as
-described for the launcher icon structure.</li>
-  <li>Add details and colors. Gradients should be treated as if there is a light
-source placed slightly to the left in front of the icon.</li>
-  <li>Create the shadows with the correct angle and blur effect.</li>
-  <li>Import the icon into a tool like Adobe Photoshop and scale to fit an image
-size of 48x48 px on a transparent background.</li>
-  <li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
-</ol>
-
-</td>
-</tr>
-</table>
+<br><br>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd b/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd
new file mode 100644
index 0000000..ea036cd
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_launcher_archive.jd
@@ -0,0 +1,524 @@
+page.title=Launcher Icons (Archive)
+parent.title=Icon Design Guidelines
+parent.link=icon_design.html
+@jd:body
+
+<div id="qv-wrapper">
+<div id="qv">
+
+<h2>In this document</h2>
+
+<ol>
+<li><a href="#icon5">Android 2.0</a>
+  <ol>
+    <li><a href="#style5">Style</a></li>
+    <li><a href="#size5">Size</a></li>
+    <li><a href="#materialscolors5">Materials and colors</a></li>
+    <li><a href="#effects5">Effects</a></li>
+    <li><a href="#dodonts5">Do's and don'ts</a></li>
+    <li><a href="#examples5">Example icons</a></li>
+  </ol>
+</li>
+<li><a href="#icon1">Android 1.6 and Earlier</a></li>
+</ol>
+
+<h2>See also</h2>
+
+<ol>
+<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a></li>
+</ol>
+
+</div>
+</div>
+
+<p class="warning">
+  <strong>Warning:</strong> This document describes obsolete guidelines for
+  creating launcher icons. Follow the <a href="icon_design_launcher.html">latest
+  launcher icon guidelines</a> instead.
+</p>
+
+<p>A Launcher icon is a graphic that represents your application on the device's
+Home screen and in the Launcher window.</p>
+
+<p>The user opens the Launcher by touching the icon at the bottom of the Home
+screen. The Launcher opens and exposes the icons for all of the installed
+applications. The user selects an application and opens it by touching the
+Launcher icon or by means of any hardware navigation controls available, such as
+a trackball or d-pad.</p>
+
+<p>As described in <a href="icon_design.html#icon-sets">Providing
+Density-Specific Icon Sets</a>, you should create separate icons for low-,
+medium-, and high-density screens. This ensures that your icons will display
+properly across the range of devices on which your application can be installed.
+See <a href="icon_design.html#design-tips">Tips for Designers</a> for
+suggestions on how to work with multiple sets of icons.</p>
+
+
+
+<h2 id="market">Application Icons in Android Market</h2>
+
+<p>If you are <a href="{@docRoot}guide/publishing/publishing.html">publishing
+your application on Android Market</a>, you will also need to provide a 512x512
+pixel, high-resolution application icon in the <a
+href="http://market.android.com/publish">developer console</a> at upload-time.
+This icon will be used in various locations in Android Market and does
+not replace your launcher icon.</p>
+
+<p>For tips and recommendations on creating high-resolution launcher icons that
+can easily be scaled up to 512x512, see
+<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">
+Tips for Designers</a>.</p>
+
+<p>For information and specifications about high-resolution application
+icons in Android Market, see the following article:</p>
+
+<p style="margin-left:2em"><a
+href="http://market.android.com/support/bin/answer.py?answer=1078870">
+  Graphic Assets for your Application (Android Market Help) &raquo;</a>
+
+
+
+
+<h2 id="icon5">Android 2.0 and Later</h2>
+
+<p>Starting with Android 2.0, launcher icons should be front-facing, instead of
+at a three-quarter perspective. The following guidelines describe how to design
+launcher icons for Android 2.0 (API Level 5) and later.</p>
+
+<h3 id="style5">Style</h3>
+
+<p>The launcher icons that you create should follow the general style principles
+below. The guidelines aren't meant to restrict what you can do with your icons,
+but rather they are meant to emphasize the common approaches that your icons can
+share with others on the device. Figure 1, at right, provides examples.  </p>
+
+<div class="figure">
+  <img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png" 
+    width="340">
+  <p class="img-caption">
+    <strong>Figure 1.</strong> Example launcher icons for Android 2.0 and
+    greater.
+  </p>
+</div>
+
+<p>Clean and contemporary:</p>
+
+<ul>
+  <li>Launcher icons should be modern and sometimes quirky; they should not
+appear aged or ragged. You should avoid overused symbolic metaphors whenever
+possible.</li>
+</ul>
+
+<p>Simple and iconic:</p>
+<ul>
+  <li>Android Launcher icons are caricatural in nature; your icons should be
+highly simplified and exaggerated, so that they are appropriate for use at small
+sizes. Your icons should not be overly complicated. </li>
+  <li>Try featuring a single part of an application as a symbolic
+representation of the whole (for example, the Music icon features a speaker).
+</li>
+  <li>Consider using natural outlines and shapes, both geometric and organic,
+with a realistic (but never photorealistic) rendering. </li>
+  <li>Your icons <em>should not</em> present a cropped view of a larger
+image.</li>
+</ul>
+
+<p>Tactile and textured:</p>
+<ul>
+  <li>Icons should feature non-glossy, textured material. See
+  <a href="#materialscolors5">Materials and colors</a>, below, for more
+  information.</li>
+</ul>
+
+<p>Forward-facing and top-lit:</p>
+<ul>
+  <li><em>New for Android 2.0 and later platforms</em>: Android Launcher
+icons should be forward-facing, with very little perspective, and they
+should be top-lit.</li>
+</ul>
+
+<p class="note"><strong>Note:</strong> Android applies separate text labels
+using the application name when displaying launcher icons, so you should avoid
+embedding text in your icon and instead focus on designing a distinct and
+memorable icon.</p>
+
+
+
+<h3 id="size5">Size and positioning</h3>
+
+<p>Launcher icons should use a variety of shapes and forms that are scaled and
+positioned inside the asset to create consistent visual weight with other
+icons.</p>
+
+<p>Figure 2 illustrates various ways of positioning the icon inside the
+asset. You should size the icons <em>smaller than the actual bounds of the
+asset</em> to create a consistent visual weight and to allow for shadows. If
+your icon is square or nearly square, it should be scaled even smaller.</p>
+
+<p>In order to indicate the recommended size for the icon, each example in
+Figure 2 includes three different guide rectangles:</p>
+
+<ul>
+<li>The red box is the bounding box for the full asset.</li>
+<li>The blue box is the recommended bounding box for the actual icon.
+The icon box is sized smaller than the full asset box so that there is space to
+include shadows and allow for special icon treatments.</li>
+<li>The orange box is the recommended bounding box for the actual icon when
+the content is square. The box for square icons is smaller than that for other
+icons to establish a consistent visual weight across the two types.</li>
+</ul>
+
+<table>
+<tr>
+
+<td style="border:0;">
+<ol class="nolist">
+  <li>Launcher icon dimensions for high-density (<code>hdpi</code>) screens:</li>
+  <ol class="nolist">
+    <li>Full Asset: 72 x 72 px</li>
+    <li>Icon: 60 x 60 px</li>
+    <li>Square Icon: 56 x 56 px</li>
+  </ol>
+  </li>
+</ol>
+</td>
+<td style="border:0;">
+  <img src="{@docRoot}images/icon_design/launcher_size_hdpi.png" width="450">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+  <ol class="nolist">
+  <li>Launcher icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
+    <ol class="nolist">
+      <li>Full Asset: 48 x 48 px</li>
+      <li>Icon: 40 x 40 px</li>
+      <li>Square Icon: 38 x 38 px</li>
+    </ol>
+  </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/launcher_size_mdpi.png" width="450">
+</td>
+</tr>
+<tr>
+<td style="border:0;">
+  <ol class="nolist">
+  <li>Launcher icon dimensions for low-density (<code>ldpi</code>) screens:</li>
+    <ol class="nolist">
+      <li>Full Asset: 36 x 36 px</li>
+      <li>Icon: 30 x 30 px</li>
+      <li>Square Icon: 28 x 28 px</li>
+    </ol>
+  </li>
+</ol>
+</td>
+
+<td style="border:0;">
+ <img src="{@docRoot}images/icon_design/launcher_size_ldpi.png" width="450">
+</td>
+</tr>
+
+<tr>
+<td style="border:0;"></td>
+<td style="border:0;">
+ <p class="table-caption"><strong>Figure 2.</strong>
+ Launcher icon sizing and positioning inside the bounds of the
+ icon asset.</p>
+</td>
+</tr>
+
+</table>
+
+
+
+
+<h3 id="materialscolors5">Materials and colors</h3>
+
+<p>Launcher icons should make use of tactile, top-lit, textured materials. Even
+if your icon is just a simple shape, you should try to render in a way that
+makes it appear to be sculpted from some real-world material.</p>
+
+<p>Android launcher icons usually consist of a smaller shape within a
+larger base shape and combine one neutral and one primary color. Icons may
+use a combination of neutral colors but should maintain a fairly high level of
+contrast. Icons should not use more than one primary color per icon, if
+possible.</p>
+
+<p>Launcher icons should use a limited color palette that includes a range
+of neutral and primary colors. The icons should not be over-saturated.</p>
+
+<p>The recommended color palette to use for Launcher icons is shown in Figure 3.
+You can use elements of the palette for both the base color and the highlight
+color. You can use the colors of the palette in conjunction with a
+white-to-black vertical linear gradient overlay. This creates the impression
+that the icon is lit from above and keeps the color less saturated.</p>
+
+<img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="530">
+<p class="img-caption">
+<strong>Figure 3.</strong> Recommended color palette for icons.</p>
+
+<p>When you combine the materials in Figure 4 with a color highlight from the
+recommended palette above, you can create materials combinations such as those
+shown in Figure 5. To get you started, the
+<a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon Templates Pack</a>
+includes a Photoshop file (<code>ic_launcher_template/example_materials.psd</code>)
+that provides all of the default materials, colors, and gradients. </p>
+
+<table>
+  <tbody>
+    <tr>
+      <td style="border:0;">
+<img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450">
+<p class="img-caption">
+<strong>Figure 4.</strong> Example materials that you can use to create
+your icons.</p>
+      </td>
+      <td style="border:0;border-left:1px solid #ccc;margin-left:1em;padding-left:1em">
+<img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450">
+<p class="img-caption">
+<strong>Figure 5.</strong> Examples of materials combined with base
+and highlight colors from the recommended palette.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+<h3 id="effects5">Effects</h3>
+
+<p>Launcher icons are flat and the perspective is straight-on, rather than at an
+angle. A drop shadow is used to create a sense of depth. Launcher icons can use
+varying textures and lighting effects, but must be lit directly from above
+(straight down).</p>
+
+<p>In order to maintain consistency, all launcher icons should use the same
+drop shadow effect, as shown in Figure 6.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/launcher_style.png"/>
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 6. </strong>Style, light and effects for launcher icons.</p>
+    <div class="image-caption-nested">
+    <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
+    <table>
+    <tr><td><em>1.</em></td><td nowrap>Lighting:</td><td>Top-lit, using appropriate lighting details<br><br></td></tr>
+    <tr><td><em>2.</em></td><td nowrap>Drop shadow:</td><td><code>#000000</code>, 75% opacity<br>angle 90&deg;<br>distance 1px<br>size 3px<br><br></td></tr>
+    <tr><td><em>3.</em></td><td nowrap>Textures:</td><td>Tactile, appear to use real-world materials (monochromatic noise in example image)<br><br></td></tr>
+    </table>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+
+
+<h3 id="dodonts5">Do's and don'ts</h3>
+
+<p>Below are some "do and don't" examples to consider when creating icons for
+your application.  </p>
+
+
+<table>
+<tr>
+<td style="border:0;width:50%">
+
+<h4>Android Launcher icons are...</h4>
+
+<ul>
+<li>Modern, minimal, matte, tactile, and textured</li>
+<li>Forward-facing and top-lit, whole, limited in color
+palette</li>
+</ul>
+</td>
+<td style="border:0;width:50%">
+
+<h4>Android Launcher icons are not...</h4>
+
+<ul>
+<li>Antique, over-complicated, glossy, flat vector</li>
+<li>Rotated, Cropped, Over-Saturated</li>
+</ul>
+</td>
+</tr>
+<tr>
+</table>
+
+<img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png"/>
+<p class="img-caption">
+<strong>Figure 7.</strong> Side-by-side examples of "do's and don'ts" for
+Android launcher icons. </p>
+
+
+
+
+
+<h3 id="examples5">Example icons</h3>
+
+<p>Shown below are examples of high-density launcher icons used by
+Android applications. The icons are provided for your reference only &mdash;
+please do not reuse these icons in your applications.</code>.</p>
+
+<img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" />
+
+
+
+<h2 id="icon1">Android 1.6 and earlier</h2>
+
+<p>The following guidelines describe how to design launcher icons for Android
+1.6 (API Level 4) and earlier. Launcher icons for Android 1.6 and below are
+simplified 3D icons with a fixed perspective. The required perspective is shown
+in Figure 8.</p>
+
+<h3 id="structure1">Structure</h3>
+
+<ul>
+<li>The base of a launcher icon can face either the top view or the front
+view.</li>
+
+<li>The majority of a launcher icon’s surface should be created using the
+launcher icon <a href="#palette1">color palette</a>. To add emphasis, use
+one or more bright accent colors to highlight specific characteristics.</li>
+
+<li>All launcher icons must be created with rounded corners to make them look
+friendly and simple—as shown in Figure 8.</li>
+
+<li>All dimensions specified are based on a 250x250 pixel artboard size
+in a vector graphics editor like Adobe Illustrator, where the icon fits within
+the artboard boundaries.</li>
+
+<li><strong>Final art must be scaled down and exported as a transparent PNG file
+using a raster image editor such as Adobe Photoshop. Do not include a background
+color.</strong></li>
+
+<li>Templates for creating icons in Adobe Photoshop are available in the <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
+Templates Pack</a>.</li>
+
+</ul>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/launcher_structure.png" alt="A view of
+launcher icon corners and perspective angles" />
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 8.</strong> Rounded corners and perspective angles for
+      launcher icons (90° is vertical).</p>
+    <div class="image-caption-nested">
+      <table>
+      <tr><td><em>1.</em></td><td>92°</td></tr>
+      <tr><td><em>2.</em></td><td>92°</td></tr>
+      <tr><td><em>3.</em></td><td>173°</td></tr>
+      <tr><td><em>4.</em></td><td>171°</td></tr>
+      <tr><td><em>5.</em></td><td>49°</td></tr>
+      <tr><td><em>6.</em></td><td>171°</td></tr>
+      <tr><td><em>7.</em></td><td>64°</td></tr>
+      <tr><td><em>8.</em></td><td>97°</td></tr>
+      <tr><td><em>9.</em></td><td>75°</td></tr>
+      <tr><td><em>10.</em></td><td>93°</td></tr>
+      <tr><td><em>11.</em></td><td>169°</td></tr>
+      </table>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+<h3 id="style1">Light, effects, and shadows</h3>
+
+<p>Launcher icons are simplified 3D icons using light and shadows for
+definition. A light source is placed slightly to the left in front of the icon,
+and therefore the shadow expands to the right and back.</p>
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/launcher_light.png" alt="A view of
+light, effects, and shadows for launcher icons."/>
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 9. </strong>Light, effects, and shadows for launcher icons.</p>
+    <div class="image-caption-nested">
+    <table>
+    <tr><td><em>1.</em></td><td>Edge highlight:</td><td>white</td></tr>
+    <tr><td><em>2.</em></td><td>Icon shadow:</td><td>black | 20px blur<br>50% opacity | angle 67°</td></tr>
+    <tr><td><em>3.</em></td><td>Front part:</td><td>Use light gradient from color palette</td></tr>
+    <tr><td><em>4.</em></td><td>Detail shadow:</td><td>black | 10px blur<br>75% opacity</td></tr>
+    <tr><td><em>5.</em></td><td> Side part:</td><td>Use medium gradient from color palette</td></tr>
+    </table>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+<table>
+<tr>
+<td style="border:0">
+
+<h4 id="palette1">Launcher icon color palette</h4>
+
+<table>
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_white.png"/></td>
+<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for highlights on edges.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_light.png"/></td>
+<td class="image-caption-c">Light gradient<br><em>1:&nbsp;&nbsp;</em>r 0  | g 0  | b 0<br><em>2:&nbsp;&nbsp;</em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png"/></td>
+<td class="image-caption-c">Medium gradient<br><em>1:&nbsp;&nbsp;</em>r 190 | g 190 | b 190<br><em>2:&nbsp;&nbsp;</em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png"/></td>
+<td class="image-caption-c">Dark gradient<br><em>1:&nbsp;&nbsp;</em>r 100 | g 100 | b 100<br><em>2:&nbsp;&nbsp;</em>r 25  | g 25  | b 25<br>Used on details and parts in the shade of the icon.</td>
+</tr>
+
+<tr>
+<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png"/></td>
+<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used as base color in shadows.</td>
+</tr>
+
+</table>
+
+</td>
+
+<td style="border:0">
+
+<h4 id="steps1">Step by step</h4>
+
+<ol>
+  <li>Create the basic shapes with a tool like Adobe Illustrator, using the
+angles described in <a href="#structure1">Launcher icon: structure</a>.
+The shapes and effects must fit within a 250x250 pixel artboard.</li>
+  <li>Add depth to shapes by extruding them and create the rounded corners as
+described for the launcher icon structure.</li>
+  <li>Add details and colors. Gradients should be treated as if there is a light
+source placed slightly to the left in front of the icon.</li>
+  <li>Create the shadows with the correct angle and blur effect.</li>
+  <li>Import the icon into a tool like Adobe Photoshop and scale to fit an image
+size of 48x48 px on a transparent background.</li>
+  <li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
+</ol>
+
+</td>
+</tr>
+</table>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
index 2029def..974e48f 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_menu.jd
@@ -9,7 +9,8 @@ parent.link=icon_design.html
 <h2>In this document</h2>
 
 <ol>
-<li><a href="#icon9">Android 2.3 and Later</a>
+<li><a href="#icon11">Android 3.0 and Later</a>
+<li><a href="#icon9">Android 2.3</a>
   <ol>
     <li><a href="#size9">Size</a></li>
     <li><a href="#style9">Style, colors, and effects</a></li>
@@ -37,11 +38,13 @@ when they press the Menu button. They are drawn in a flat-front perspective and
 in greyscale. Elements in a menu icon must not be visualized in 3D or
 perspective.</p>
 
-<p>As described in <a href="icon_design.html#icon-sets">Providing
-Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
-medium-, and high-density screens. This ensures that your icons will display
-properly across the range of devices on which your application can be installed.
-See <a href="icon_design.html#design-tips">Tips for Designers</a>
+<p>As described in <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
+Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a>, you should create separate icons for all generalized screen densities, including low-,
+medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
+across the range of devices on which your application can be installed. See <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
 for suggestions on how to work with multiple sets of icons.</p>
 
 <p><strong>Final art must be exported as a transparent PNG file. Do not include
@@ -52,6 +55,16 @@ href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Ic
 Templates Pack</a>.</p>
 
 
+<h2 id="icon11">Android 3.0 and Later</h2>
+
+<p>As of Android 3.0, the options menu has been superseded by the <a
+href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>. Please refer to the <a
+href="icon_design_action_bar.html">Action Bar Icon Design Guidelines</a> for recommendations on
+creating icons for action items.</p>
+
+
+<h2 id="icon9">Android 2.3</h2>
+
 <p class="caution"><strong>Caution:</strong> The style and content sizing of
 menu icons have changed in Android 2.3 compared to
 <a href="#icon1">previous versions</a>:
@@ -67,12 +80,8 @@ asset. Final asset sizes have not changed.
 
 </p>
 
-
-
-<h2 id="icon9">Android 2.3 and Later</h2>
-
 <p>The following guidelines describe how to design menu icons for Android
-2.3 (API Level 9) and later.</p>
+2.3 (API Levels 9 and 10).</p>
 
 <h3 id="size9">Size and positioning</h3>
 
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
index 1fc3528..b8e07b5 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd
@@ -9,11 +9,20 @@ parent.link=icon_design.html
 <h2>In this document</h2>
 
 <ol>
-<li><a href="#icon9">Android 2.3 and Later</a>
+<li><a href="#icon11">Android 3.0 and Later</a>
+  <ol>
+    <li><a href="#overview11">Overview of changes</a></li>
+    <li><a href="#size11">Size and format</a></li>
+    <li><a href="#style11">Style, colors, and effects</a></li>
+    <li><a href="#dimming11">Automatic dimming</a></li>
+    <li><a href="#examples11">Example icons</a></li>
+  </ol>
+</li>
+<li><a href="#icon9">Android 2.3</a>
   <ol>
     <li><a href="#size9">Size</a></li>
     <li><a href="#style9">Style, color, and effects</a></li>
-    <li><a href="#dodonts9">Do's and don'ts</a></li>
+    <li><a href="#dosdonts9">Do's and don'ts</a></li>
     <li><a href="#examples9">Example icons</a></li>
   </ol>
 </li>
@@ -35,54 +44,217 @@ Screens</a></li>
 <p>Status bar icons are used to represent notifications from your application in
 the status bar.</p>
 
-<p>As described in <a href="icon_design.html#icon-sets">Providing
-Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
-medium-, and high-density screens. This ensures that your icons will display
-properly across the range of devices on which your application can be installed.
-See <a href="icon_design.html#design-tips">Tips for Designers</a> for
-suggestions on how to work with multiple sets of icons.</p>
-
-<p><strong>Final art must be exported as a transparent PNG file. Do not include
-a background color</strong>.</p>
+<p>As described in <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific
+Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
+Screens</a>, you should create separate icons for all generalized screen densities, including low-,
+medium-, high-, and extra-high-density screens. This ensures that your icons will display properly
+across the range of devices on which your application can be installed. See <a
+href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a>
+for suggestions on how to work with multiple sets of icons.</p>
 
 <p>Templates for creating icons in Adobe Photoshop are available in the <a
 href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
 Templates Pack</a>.</p>
 
 
-<p class="warning"><strong>Warning:</strong>
+<div class="warning">
+
+<p><strong>Warning:</strong>The style and dimensions of status bar icons have changed dramatically
+in Android 3.0 and 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To
+provide support for all Android versions</strong>, developers should:</p>
+
+<ol>
+<li>Place status bar icons for Android 3.0 and later in the
+  <code>drawable-xhdpi-v11</code>, <code>drawable-hdpi-v11</code>,<code>drawable-mdpi-v11</code>,
+  and <code>drawable-ldpi-v11</code> directories.</li>
+<li>Place status bar icons for Android 2.3 in the
+  <code>drawable-xhdpi-v9</code>, <code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>,
+  and <code>drawable-ldpi-v9</code> directories.</li>
+<li>Place status bar icons for previous versions in
+  <code>drawable-xhdpi</code>, <code>drawable-hdpi</code>, <code>drawable-mdpi</code>,
+  and <code>drawable-ldpi</code> directories.</li>
+</ol>
+
+</div>
+
+
+
+
+<h2 id="icon11">Android 3.0 and Later</h2>
+
+<p>The following guidelines describe how to design status bar icons for Android
+3.0 (API Level 11) and later.</p>
+
+
+<h3 id="overview11">Overview of changes</h3>
+
+<p>The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons
+  used in Android 3.0 and later are easier to create, and they allow for more flexible presentation
+  in a variety of situations:</p>
+
+<ul>
+  <li>Status bar icons are composed simply of <strong>white pixels on a transparent
+    backdrop</strong>, with alpha blending used for smooth edges and internal texture where
+    appropriate.</li>
+  <li>Icons are square icon contents should <strong>fill the available space</strong>, although a
+    small amount of internal padding can help maintain balance across status bar icons. See
+    <a href="#size11">Size and format</a> below for details.</li>
+</ul>
+
+<p>These larger and brighter icons, while highly legible, are too intense for use on dark phone
+status bars. These icons would be too distracting if used directly in the status bar. Therefore:
+</p>
+
+<ul>
+  <li><strong>The system automatically resizes and dims</strong> these icons in such situations and
+    developers do not need to supply a separate icon for this purpose. See
+    <a href="#dimming11">Automatic dimming</a> below for more on this behavior.</li>
+</ul>
+
+
+<h3 id="size11">Size and format</h2>
+
+<p>Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished
+status bar icon dimensions corresponding to a given generalized screen density are shown in the
+table below.</p>
+
+<p class="note"><strong>Note:</strong> The system will shrink and dim status bar icons to minimize
+distractions, allowing users to focus on the foreground activity.</p>
+
+
+<p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of
+finished icon dimensions for each generalized screen density.</p>
+
+<table>
+  <tbody>
+  <tr>
+    <th></th>
+    <th>
+      <code>ldpi</code> (120 dpi)<br>
+      <small style="font-weight: normal">(Low density screen)</small>
+    </th>
+    <th>
+      <code>mdpi</code> (160 dpi)<br>
+      <small style="font-weight: normal">(Medium density screen)</small>
+    </th>
+    <th>
+      <code>hdpi</code> (240 dpi)<br>
+      <small style="font-weight: normal">(High density screen)</small>
+    </th>
+    <th>
+      <code>xhdpi</code> (320 dpi)<br>
+      <small style="font-weight: normal">(Extra-high density screen)</small>
+    </th>
+  </tr>
+  <tr>
+    <th style="background-color:#f3f3f3;font-weight:normal">
+      Status Bar Icon Size<br><small>(Android 3.0 and Later)</small>
+    </th>
+    <td>
+      18 x 18 px
+    </td>
+    <td>
+      24 x 24 px
+    </td>
+    <td>
+      36 x 36 px
+    </td>
+    <td>
+      48 x 48 px
+    </td>
+  </tr>
+  </tbody>
+</table>
+
+<p>You can also include a few pixels of padding in status bar icons to maintain a
+consistent visual weight with adjacent icons. For example, a 48 x 48 pixel <code>xhdpi</code>
+status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.</p>
+
+
+<h3 id="style11">Style, colors, and effects</h3>
+
+<p>Status bar icons are flat, pictured face on, and must be white on a transparent background.</p>
+
+<p>In order to maintain consistency across all status bar notifications, status bar icons should
+use the styling shown in Figure 1.</p>
+
+
+
+<table class="image-caption">
+<tr>
+<td class="image-caption-i">
+  <img src="{@docRoot}images/icon_design/status_bar_honeycomb_style.png"
+    alt="A view of effects for status bar icons.">
+</td>
+<td class="image-caption-c">
+  <div class="caption grad-rule-top">
+    <p><strong>Figure 1. </strong>Style for status bar icons.</p>
+    <div class="image-caption-nested">
+    <table>
+      <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code><br><br></td></tr>
+      <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from
+        the outer shape and consist purely of transparent pixels.</td></tr>
+    </table>
+    </div>
+  </div>
+</td>
+</tr>
+</table>
+
+
+<h3 id="dimming11">Automatic dimming</h3>
 
-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>The system may dim and shrink status bar icons to allow users to focus on the foreground
+activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices
+reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at
+full intensity in the expanded notification panel. An example of what this looks like is shown below
+in Figure 2.</p>
 
+
+<img src="{@docRoot}images/icon_design/status_bar_honeycomb_dimming.png"
+  alt="Automatic shrinking and dimming behavior in Android 3.0 and later">
+<p class="img-caption">
+  <strong>Figure 2.</strong> Automatic shrinking and dimming behavior in Android 3.0 and later.
 </p>
 
 
+<h3 id="examples11">Example icons</h3>
+
+<p>Shown below are example extra-high-density status bar icons that are used throughout Android
+system applications.</p>
+
+<p class="warning"><strong>Warning:</strong> Because resources can change between platform versions,
+you should not reference built-in icons using the Android platform resource IDs (i.e. status bar
+icons under <code>android.R.drawable</code>). If you want to use any icons or other internal
+drawable resources, you should store a local copy of those icons or drawables in your application
+resources, then reference the local copy from your application code. In that way, you can maintain
+control over the appearance of your icons, even if the system's copy changes. Note that the grid
+below is not intended to be complete.</p>
+
+<img src="{@docRoot}images/icon_design/status_bar_honeycomb_examples.png" />
+
+
+
+
 
-<h2 id="icon9">Android 2.3 and Later</h2>
+<h2 id="icon9">Android 2.3</h2>
 
 <p>The following guidelines describe how to design status bar icons for Android
-2.3 (API Level 9) and later.</p>
+2.3 (API Levels 9 and 10).</p>
 
 <h3 id="size9">Size and positioning</h3>
 
 <p>Status bar icons should use simple shapes and forms and those must be
 scaled and positioned inside the final asset.</p>
 
-<p>Figure 1 illustrates various ways of positioning the icon inside the
+<p>Figure 3 illustrates various ways of positioning the icon inside the
 asset. You should size the icons <em>smaller than the actual bounds of the
 asset</em>. <strong>Status bar icons may vary in width, but only
 minimally.</strong></p>
 
 <p>In order to indicate the recommended size for the icon, each example in
-Figure 1 includes two different guide rectangles:</p>
+Figure 3 includes two different guide rectangles:</p>
 
 <ul>
 <li>The red box is the bounding box for the full asset.</li>
@@ -144,7 +316,7 @@ varying icon shapes while maintaining a consistent visual weight.</li>
 <tr>
 <td style="border:0;"></td>
 <td style="border:0;">
- <p class="table-caption"><strong>Figure 1.</strong>
+ <p class="table-caption"><strong>Figure 3.</strong>
  Status bar icon sizing and positioning inside the bounds of the
  icon asset.</p>
 </td>
@@ -167,7 +339,7 @@ varying icon shapes while maintaining a consistent visual weight.</li>
 </td>
 <td class="image-caption-c">
   <div class="caption grad-rule-top">
-    <p><strong>Figure 2. </strong>Style and effects for status icons.</p>
+    <p><strong>Figure 4. </strong>Style and effects for status icons.</p>
     <div class="image-caption-nested">
     <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
     <table>
@@ -223,7 +395,7 @@ be complete.</p>
 
 <ul>
 <li>Rounded corners must always be applied to the base shape and to the details
-of a status bar icon shown Figure 3.</li>
+of a status bar icon shown Figure 5.</li>
 
 <li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
 pixel safeframe.</li>
@@ -245,7 +417,7 @@ status bar icon structure." />
 </td>
 <td class="image-caption-c">
   <div class="caption grad-rule-top">
-    <p><strong>Figure 3. </strong>Safeframe and corner-rounding for status bar
+    <p><strong>Figure 5. </strong>Safeframe and corner-rounding for status bar
 icons. Icon size is 25x25.</p>
   </div>
 </td>
@@ -265,7 +437,7 @@ face-on to enhance clarity at small sizes.</p>
 </td>
 <td class="image-caption-c">
   <div class="caption grad-rule-top">
-    <p><strong>Figure 4. </strong>Light, effects, and shadows for status bar icons.</p>
+    <p><strong>Figure 6. </strong>Light, effects, and shadows for status bar icons.</p>
     <div class="image-caption-nested">
     <table>
     <tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
@@ -320,8 +492,8 @@ face-on to enhance clarity at small sizes.</p>
 <li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px
 image on a transparent background. Mind the safeframe, and keep the upper and
 lower 2 pixels free.</li>
-<li>Add rounded corners as specified in Figure 3.</li>
-<li>Add light, effects, and shadows as specified in Figure 4.</li>
+<li>Add rounded corners as specified in Figure 5.</li>
+<li>Add light, effects, and shadows as specified in Figure 6.</li>
 <li>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
 </ol>
 
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
index 1f96c3e..271bd85 100644
--- a/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
+++ b/docs/html/guide/practices/ui_guidelines/icon_design_tab.jd
@@ -10,7 +10,7 @@ parent.link=icon_design.html
 
 <ol>
 <li><a href="#tabstates">Providing Icons for Two Tab States</a>
-<li><a href="#icon5">Android 2.0 and Later</a>
+<li><a href="#icon5">Android 2.0 through Android 2.3</a>
   <ol>
     <li><a href="#size5">Size</a></li>
     <li><a href="#style5">Style, colors, and effects</a></li>
@@ -125,10 +125,10 @@ for <code>ic_tab_friends.xml</code>:</p>
 
 
 
-<h2 id="icon5">Android 2.0 and Later</h2>
+<h2 id="icon5">Android 2.0 through Android 2.3</h2>
 
 <p>The following guidelines describe how to design tab icons for Android
-2.0 (API Level 5) and later.</p>
+2.0 through Android 2.3 (API Levels 5 through 10).</p>
 
 <h3 id="size5">Size and positioning</h3>
 
diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd
index cb34d2e..0e42788 100644
--- a/docs/html/guide/practices/ui_guidelines/index.jd
+++ b/docs/html/guide/practices/ui_guidelines/index.jd
@@ -12,8 +12,8 @@ these guidelines as we release them.</p>
  <dl>
   <dt><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon
 Design Guidelines</a> and <a
-href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon Templates Pack
-&raquo; </a></dt>
+href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon Templates Pack
+&raquo; </a> <span class="new">updated</span></dt>
   <dd>Your applications need a wide variety of icons, from a launcher icon to
 icons in menus, dialogs, tabs, the status bar, and lists. The Icon Guidelines
 describe each kind of icon in detail, with specifications for the size, color,
@@ -22,7 +22,7 @@ The Icon Templates Pack is an archive of Photoshop and Illustrator templates and
 filters that make it much simpler to create conforming icons.</dd>
 </dl>
  <dl>
-  <dt><a href="{@docRoot}guide/practices/ui_guidelines/widget_design.html">Widget Design Guidelines</a> </dt>
+  <dt><a href="{@docRoot}guide/practices/ui_guidelines/widget_design.html">Widget Design Guidelines</a> <span class="new">updated</span></dt>
   <dd>A widget displays an application's most important or timely information
 at a glance, on a user's Home screen. These design guidelines describe how to
 design widgets that fit with others on the Home screen. They include links to