AI 149251: Add 1.x Icon Guidelines doc and template pack.

  BUG=1790234

Automated import of CL 149251

4 files changed, 1429 insertions, 9 deletions

diff --git a/docs/html/guide/guide_toc.cs b/docs/html/guide/guide_toc.cs
index a044ceaecd3b..da5192a1091d 100644
--- a/docs/html/guide/guide_toc.cs
+++ b/docs/html/guide/guide_toc.cs
@@ -146,6 +146,7 @@
       <li class="toggle-list">
         <div><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/index.html">UI Guidelines</a></div>
           <ul>
+            <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">Icon Design</a></li>
             <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/widget_design.html">App Widget Design</a></li>
           </ul>
       </li>
diff --git a/docs/html/guide/practices/ui_guidelines/icon_design.jd b/docs/html/guide/practices/ui_guidelines/icon_design.jd
new file mode 100644
index 000000000000..3432a096b46c
--- /dev/null
+++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd
@@ -0,0 +1,1410 @@
+page.title=Icon Design Guidelines
+@jd:body
+
+<div id="qv-wrapper">
+<div id="qv">
+
+<h2>Icon design 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="#file">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>See also</h2>
+
+<ol>
+<li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon
+Templates Pack &raquo;</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 0 | g 0 | b 0<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:&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" 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:&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" 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:&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" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td>
+<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 255 | g 255 | b 255<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 0 | g 0 | b 0<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:&nbsp;&nbsp;</em>r 163 | g 163 | b 163<br><em>2:&nbsp;&nbsp;</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 255 | g 255 | b 255<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 0 | g 0 | b 0<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_fill.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:&nbsp;&nbsp;</em>r 169 | g 169 | b 169<br><em>2:&nbsp;&nbsp;</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_grey.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:&nbsp;&nbsp;</em>1 r 105 | g 105 | b 105<br><em>2:&nbsp;&nbsp;</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 255 | g 255 | b 255<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:&nbsp;&nbsp;</em>r 163 | g 163 | b 163<br><em>2:&nbsp;&nbsp;</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>
+
+The Templates Pack provides templates 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. 
+
+<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 &raquo;</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 &mdash; 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.&lt;icon_resource_identifier&gt;</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
+"&lt;icon_resource_identifier&gt;.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_archive.png" title="ic_menu_archive" alt="Android asset" />
+  <div class="caption">Archive</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_attachment.png" title="ic_menu_attachment" alt="Android asset" />
+  <div class="caption">Attach</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_back.png" title="ic_menu_back" alt="Android asset" />
+  <div class="caption">Back</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>
+
+</tr>
+<tr>
+
+
+<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>
+	
+
+<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_favorite.png" title="ic_menu_favorite" alt="Android asset" />
+  <div class="caption">Favorite</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_forward.png" title="ic_menu_forward" alt="Android asset" />
+  <div class="caption">Forward</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>
+
+</tr>
+<tr>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_goto.png" title="ic_menu_goto" alt="Android asset" />
+  <div class="caption">Go to</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_recent_history.png" title="ic_menu_recent_history" alt="Android asset" />
+  <div class="caption">History</div></td>
+	
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_home.png" title="ic_menu_home" alt="Android asset" />
+  <div class="caption">Home</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_mark.png" title="ic_menu_mark" alt="Android asset" />
+  <div class="caption">Mark</div></td>
+
+</tr>
+<tr>
+
+
+<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>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/ic_menu_play_clip.png" title="ic_menu_play_clip" alt="Android asset" />
+  <div class="caption">Play</div></td>
+	
+
+<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_refresh.png" title="ic_menu_refresh" alt="Android asset" />
+  <div class="caption">Refresh</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>
+
+</tr>
+<tr>
+
+
+<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_shuffle.png" title="ic_menu_shuffle" alt="Android asset" />
+  <div class="caption">Shuffle</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>
+	
+
+<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_camera_video_view.png" title="ic_menu_camera_video_view" alt="Android asset" />
+  <div class="caption">Video</div></td>
+
+</tr>
+<tr>
+
+
+<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.&lt;icon_resource_identifier&gt;</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 
+"&lt;icon_resource_identifier&gt;.png".</p>
+
+
+<table class="image-caption">
+<tr>
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_data_connected_3g.png" title="stat_sys_data_connected_3g" alt="Android asset" />
+  <div class="caption">3G</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_battery_100.png" title="stat_sys_battery_100" alt="Android asset" />
+  <div class="caption">Battery 100%</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_battery_empty.png" title="stat_sys_battery_empty" alt="Android asset" />
+  <div class="caption">Battery empty</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>
+
+
+<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_sys_gps_on.png" title="stat_sys_gps_on" alt="Android asset" />
+  <div class="caption">GPS on</div></td>
+
+</tr>
+<tr>
+
+<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>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_signal_flightmode.png" title="stat_sys_signal_flightmode" alt="Android asset" />
+  <div class="caption">Airplane mode</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_alarm.png" title="stat_notify_alarm" alt="Android asset" />
+  <div class="caption">Alarm</div></td>
+
+
+<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_sys_data_bluetooth_connected.png" title="stat_sys_data_bluetooth_connected" alt="Android asset" />
+  <div class="caption">Bluetooth connected</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_calendar.png" title="stat_notify_calendar" alt="Android asset" />
+  <div class="caption">Calendar</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_disk_full.png" title="stat_notify_disk_full" alt="Android asset" />
+  <div class="caption">Disk full</div></td>
+
+</tr>
+<tr>
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_data_connected_e.png" title="stat_sys_data_connected_e" alt="Android asset" />
+  <div class="caption">EDGE</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_email.png" title="stat_notify_email" alt="Android asset" />
+  <div class="caption">Gmail</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_data_connected_g.png" title="stat_sys_data_connected_g" alt="Android asset" />
+  <div class="caption">GPRS</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_sys_install_complete.png" title="stat_sys_install_complete" alt="Android asset" />
+  <div class="caption">Installation complete</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_musicplayer.png" title="stat_notify_musicplayer" alt="Android asset" />
+  <div class="caption">Music</div></td>
+
+</tr>
+<tr>
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_r_signal_4.png" title="stat_sys_r_signal_4" alt="Android asset" />
+  <div class="caption">Roaming</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_signal_4.png" title="stat_sys_signal_4" alt="Android asset" />
+  <div class="caption">Signal</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_signal_null.png" title="stat_sys_signal_null" alt="Android asset" />
+  <div class="caption">Signal unavailable</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_ringer_silent_old.png" title="stat_sys_ringer_silent_old" alt="Android asset" />
+  <div class="caption">Silent mode</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_sms.png" title="stat_notify_sms" alt="Android asset" />
+  <div class="caption">SMS/MMS</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_speakerphone.png" title="stat_sys_speakerphone" alt="Android asset" />
+  <div class="caption">Speaker phone</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_sync_anim0.png" title="stat_notify_sync_anim0" alt="Android asset" />
+  <div class="caption">Sync</div></td>
+
+</tr>
+<tr>
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_sync_error.png" title="stat_notify_sync_error" alt="Android asset" />
+  <div class="caption">Sync error</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_data_usb.png" title="stat_sys_data_usb" alt="Android asset" />
+  <div class="caption">USB connected</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_ringer_vibrate.png" title="stat_sys_ringer_vibrate" alt="Android asset" />
+  <div class="caption">Vibrate</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_wifi_signal_4.png" title="stat_sys_wifi_signal_4" alt="Android asset" />
+  <div class="caption">WiFi</div></td>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_notify_wifi_in_range.png" title="stat_notify_wifi_in_range" alt="Android asset" />
+  <div class="caption">WiFi network available</div></td>
+
+</tr>
+<tr>
+
+
+<td class="image-caption-i image-list">
+  <img src="{@docRoot}images/icon_design/stat_sys_wifi_unavailable.png" title="stat_sys_wifi_unavailable" alt="Android asset" />
+  <div class="caption">WiFi unavailable</div></td>
+</tr>
+</table>
+
+
diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd
index e19d5b49f3ff..61e310a8ea67 100644
--- a/docs/html/guide/practices/ui_guidelines/index.jd
+++ b/docs/html/guide/practices/ui_guidelines/index.jd
@@ -6,18 +6,27 @@ page.title=User Interface Guidelines
 
 
 <p>The Android UI team has begun developing guidelines for the interaction and
-design of Android applications. Look here for articles that describe these
-visual guidelines as we release them.</p>
+visual design of Android applications. Look here for articles that describe
+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-v1.0.zip">Android Icon Templates Pack
+&raquo; </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
+describe each kind of icon in detail, with specifications for the size, color,
+shading, and other details for making all your icons fit in the Android system.
+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="widget_design.html">Widget Design Guidelines</a> </dt>
-  <dd>Widgets are a new feature introduced in Cupcake. 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 graphics files and
-templates that will make your designer's life easier.</dd>
-
+  <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
+graphics files and templates that will make your designer's life easier.</dd>
 </dl>
 
 
diff --git a/docs/html/shareables/icon_templates-v1.0.zip b/docs/html/shareables/icon_templates-v1.0.zip
new file mode 100644
index 000000000000..3e64f9aacd50
--- /dev/null
+++ b/docs/html/shareables/icon_templates-v1.0.zip