diff options
Diffstat (limited to 'docs/html/guide')
| -rw-r--r-- | docs/html/guide/guide_toc.cs | 1 | ||||
| -rw-r--r-- | docs/html/guide/practices/ui_guidelines/icon_design.jd | 1406 | ||||
| -rw-r--r-- | docs/html/guide/practices/ui_guidelines/index.jd | 27 |
3 files changed, 1425 insertions, 9 deletions
diff --git a/docs/html/guide/guide_toc.cs b/docs/html/guide/guide_toc.cs index a044cea..da5192a 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 0000000..155684a --- /dev/null +++ b/docs/html/guide/practices/ui_guidelines/icon_design.jd @@ -0,0 +1,1406 @@ +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 »</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: </em>r 0 | g 0 | b 0<br><em>2: </em>r 217 | g 217 | b 217<br>Used on the front (lit) part of the icon.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_medium.png" alt="Color palette, medium gradien" style="margin:.5em 0 0 0;" /></td> +<td class="image-caption-c" style="padding-top:.5em;">Medium gradient<br><em>1: </em>r 190 | g 190 | b 190<br><em>2: </em>r 115 | g 115 | b 115<br>Used on the side (shaded) part of the icon.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_gradient_dark.png" alt="Color palette, dark gradient" style="margin:.5em 0 0 0;" /></td> +<td class="image-caption-c" style="padding-top:.5em;">Dark gradient<br><em>1: </em>r 100 | g 100 | b 100<br><em>2: </em>r 25 | g 25 | b 25<br>Used on details and parts in the shade of the icon.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/launcher_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> +<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 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: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> +<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 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: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_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: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td> +</tr> + +<tr> +<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> +<td class="image-caption-c" style="padding-top:.5em;">Black<br>r 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: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td> +</tr> + +</table> + +</td> + +<td style="border:0;width:350px"> + +<h4 id="menusteps">Step by step</h4> + +<ol> +<li>Create the basic shape using a tool like Adobe Illustrator.</li> +<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 +px artboard with a transparent background. </li> +<li>Add the effects seen in Figure 11 for the selected state filter.</li> +<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> +</ol> + +</td> +</tr> +</table> + + +<h2 id="dialogstructure">Dialog icon</h2> + +<p>Dialog icons are shown in pop-up dialog boxes that prompt the user for +interaction. They use a light gradient and inner +shadow in order to stand out against a dark background.</p> + +<h4>Structure</h4> + +<ul> +<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the +safeframe, but the anti-alias of a round shape can overlap the safeframe. <span +class="body-copy"></li> + +<li>All dimensions specified on this page are based on a 32x32 pixel artboard size +in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the +Photoshop template.</li> + +<li><strong>Final art must be exported as a transparent PNG file.</strong></li> + +<li>Templates for creating dialog icons in Adobe Photoshop are available in the +Icon Templates Pack.</li> +</ul> + +<table class="image-caption"> +<tr> +<td class="image-caption-i" style="padding-right:0"> + <img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog +icon structure." /> +</td> +<td class="image-caption-c"> + <div class="caption grad-rule-top"> + <p><strong>Figure 12. </strong>Safeframe and fill gradient for dialog icons. +Icon size is 32x32.</p> + </div> +</td> +</tr> +</table> + + +<h4 id="dialoglight">Light, effects, and shadows</h4> + +<p>Dialog icons are flat and pictured face-on. In order to stand out against a +dark background, they are built up using a light gradient and inner shadow.</p> + +<table class="image-caption"> +<tr> +<td class="image-caption-i"> + <img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light, +effects, and shadows for dialog icons."/> +</td> +<td class="image-caption-c"> + <div class="caption grad-rule-top"> + <p><strong>Figure 13. </strong>Light, effects, and shadows for dialog +icons.</p> + <div class="image-caption-nested"> + <table style="margin-top:0;"> + <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom: r 223 | g 223 | b 223<br>top: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr> + <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 25% opacity | <br>angle -90° | distance 1px | size 0px</td></tr> + </table> + </div> + </div> +</td> +</tr> +</table> + + +<table style="margin:0px;padding:0px;"> +<tr> +<td style="border:0;width:350px;"> + +<h4 id="menusteps">Step by step</h4> + +<ol> +<li>Create the basic shapes using a tool like Adobe Illustrator.</li> +<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image +of 32x32 px on a transparent background. </li> +<li>Add the effects seen in Figure 13 for the proper filter.</li> +<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> +</ol> + +</td> +</tr> +</table> + + +<h2 id="listviewstructure">List view icon</h2> + +<p>List view icons look a lot like dialog icons, but they use an inner shadow +effect where the light source is above the object. They are also designed to be +used only in a list view. Examples include the Android Market application home +screen and the driving directions screen in the Maps application.</p> + +<h4>Structure</h4> + +<ul> +<li>A list view icon normally has a 1 px safeframe, but it is OK to use the +safeframe area for the edge of the anti-alias of a round shape. </li> + +<li>All dimensions specified are based on a 32x32 pixel artboard size in +Photoshop. Keep 1 pixel of padding around the bounding box inside the template. + </li> + +<li><strong>Final art must be exported as a transparent PNG file.</strong></li> + +<li>Templates for creating list view icons in Adobe Photoshop are available in +the Icon Templates Pack. </li> +</ul> + +<table class="image-caption"> +<tr> +<td class="image-caption-i" style="padding-right:0"> + <img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list +view icon structure." /> +</td> +<td class="image-caption-c"> + <div class="caption grad-rule-top"> + <p><strong>Figure 14. </strong>Safeframe and fill gradient for list view +icons. Icon size is 32x32.</p> + </div> +</td> +</tr> +</table> + +<h4 id="listviewlight">Light, effects, and shadows</h4> + +<p>List view icons are flat and pictured face-on with an inner shadow. Built up +by a light gradient and inner shadow, they stand out well on a dark +background.</p> + +<table class="image-caption"> +<tr> +<td class="image-caption-i"> + <img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view +of light, effects, and shadows for list view icons."/> +</td> +<td class="image-caption-c"> + <div class="caption grad-rule-top"> + <p><strong>Figure 15. </strong>Light, effects, and shadows for list view +icons.</p> + <div class="image-caption-nested"> + <table style="margin-top:0;"> + <tr><td style="padding-right:1em"><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px <td></tr> + <tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr> + <tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr> + </table> + </div> + </div> +</td> +</tr> +</table> + +<table style="margin:0px;padding:0px;"> +<tr> +<td style="border:0;width:350px;"> + +<h4 id="menusteps">Step by step</h4> + +<ol> +<li>Add the effects seen in Figure 15 for the proper filter.</li> +<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> +<li>Create the basic shapes using a tool like Adobe Illustrator.</li> +<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image +of 32x32 px on a transparent background. </li> +</ol> + +</td> +</tr> +</table> + + +<h2 id="dodonts">General guidelines</h2> + +<p>Below are some "do and don't" guidelines to consider when creating icons for +your application. By following the guidelines, you can ensure that your icons +will work well with other parts of the Android platform UI and will meet the +expectations of your application's users. </p> + +<table style="margin:0px;padding:0px;"> +<tr> +<td style="border:0;width:350px;"> + +<h4>Do...</h4> + +<ul> +<li>Use a normal perspective. The depth of an object should be realistic.</li> +<li>Keep it simple! By overdoing an icon, it loses it purpose and +readability.</li> +<li>Use colors only when necessary. Mind that the base of a launcher icon should +be grey and feel solid. </li> +<li>Use the correct angles for the specific icon types.</li> +</ul> +</td> +<td style="border:0;width:350px;"> + +<h4>Don’t...</h4> + +<ul> +<li>Use open elements like text alone as icons. Instead place those elements on +a base shape.</li> +<li>Use colors for your status bar notifications. Those are reserved for +specific phone-only functions.</li> +</ul> +</td> +</tr> +<tr> +<td colspan="2" style="border:0;"> +<img src="{@docRoot}images/icon_design/do_dont.png" alt="Side-by-side examples +of good/bad icon design."/> +</td> +</table> + +<h2 id="templatespack">Using the Android Icon Templates Pack</h2> + +<p>The Android Icon Templates Pack is a collection of template designs, filters, +and settings that make it easier for you to create icons that conform to the +general specifications given in this document. We recommend downloading the +template pack archive before you get started with your icon design.</p> + +<p>The icon templates are provided in Adobe Photoshop and Adobe Illustrator file +formats, which preserves the layers and design treatments we used when creating the +standard icons for the Android platform. You can load the template files into any +compatible image-editing program, although your ability to work directly with the +layers and treatments may vary based on the program you are using.</p> + +<p>You can obtain the Icon Templates Pack archive using the link below: </p> + +<p style="margin-left:2em"><a +href="{@docRoot}shareables/icon_templates-v1.0.zip">Download the Icon Templates +Pack »</a> + + +<h2 id="iconappendix">Icon appendix</p> + +<h3 id="launcherapx">Standard launcher icons</h3> + +<p>Shown below are examples of launcher icons used by Android applications. The +icons are provided for your reference only — please do not reuse these +icons in your applications.</code>. + +<table class="image-caption"> +<tr> + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_alarmclock.png" alt="Android asset" /> + <div class="caption">Alarm Clock</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_browser.png" alt="Android asset" /> + <div class="caption">Browser</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_calculator.png" alt="Android asset" /> + <div class="caption">Calculator</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_calendar.png" alt="Android asset" /> + <div class="caption">Calendar</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_video_camera.png" alt="Android asset" /> + <div class="caption">Camcorder</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_camera.png" alt="Android asset" /> + <div class="caption">Camera</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_contacts.png" alt="Android asset" /> + <div class="caption">Contacts</div></td> + +</tr> +<tr> + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_phone_dialer.png" alt="Android asset" /> + <div class="caption">Dialer</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_email_generic.png" alt="Android asset" /> + <div class="caption">Email</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_gallery.png" alt="Android asset" /> + <div class="caption">Gallery</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_generic_application.png" alt="Android asset" /> + <div class="caption">Generic application</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_email.png" alt="Android asset" /> + <div class="caption">Gmail</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_google_talk.png" alt="Android asset" /> + <div class="caption">Google Talk</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_IM.png" alt="Android asset" /> + <div class="caption">IM</div></td> + +</tr> +<tr> + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_maps.png" alt="Android asset" /> + <div class="caption">Maps</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_marketplace.png" alt="Android asset" /> + <div class="caption">Market </div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_sms_mms.png" alt="Android asset" /> + <div class="caption">Messaging </div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_musicplayer_2.png" alt="Android asset" /> + <div class="caption">Music</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_settings.png" alt="Android asset" /> + <div class="caption">Settings</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_voicedial.png" alt="Android asset" /> + <div class="caption">Voice Dialer</div></td> + + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_voicesearch.png" alt="Android asset" /> + <div class="caption">Voice Search</div></td> + +</tr> +<tr> + +<td class="image-caption-i image-list"> + <img src="/images/icon_design/ic_launcher_youtube.png" alt="Android asset" /> + <div class="caption">YouTube</div></td> +</tr> +</table> + +<h3 id="menuapx">Standard menu icons</h3> + +<p>Shown below are standard menu icons that are included in the Android platform +(as of Android 1.5). You can reference any of these icon resources from your +application as needed, but make sure that the action you assign to the icon is +consistent with that listed. Note that this is not a complete list of icons and +that the actual appearance of standard icons may change across platform +versions.</p> + +<p>To reference one of the icons from your code, use +<code>android.R.drawable.<icon_resource_identifier></code>. For example, +you can call a menu item's {@link android.view.MenuItem#setIcon(android.graphics.drawable.Drawable) setIcon()} +method and pass the resource name:</p> + +<p style="margin-left:2em"><code>.setIcon(android.R.drawable.ic_menu_more);</code>. + +<p>You could reference the same icon from a layout file using +<code>android:icon="@android:drawable/ic_menu_more"></code>.</p> + +<p>To determine the resource ID for an icon listed below, hover over the icon or +simply look at image filenames, which use the format +"<icon_resource_identifier>.png".</p> + +<table class="image-caption"> +<tr> + + +<td class="image-caption-i image-list"> + <img src="{@docRoot}images/icon_design/ic_menu_add.png" title="ic_menu_add" alt="Android asset" /> + <div class="caption">Add</div></td> + + +<td class="image-caption-i image-list"> + <img src="{@docRoot}images/icon_design/ic_menu_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.<icon_resource_identifier></code>. For example, +you can construct a simple notification that references one of the icons like +this: </p> + +<p style="margin-left:2em"><code>new Notification(R.drawable.stat_notify_calendar, +"sample text", System.currentTimeMillis());</code></p> + +<p>To determine the resource ID for an icon listed below, hover over the icon +or simply look at the image filename, which use the format +"<icon_resource_identifier>.png".</p> + + +<table class="image-caption"> +<tr> + +<td class="image-caption-i image-list"> + <img src="{@docRoot}images/icon_design/stat_sys_data_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_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> + +<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> + +</tr> +</table> + + diff --git a/docs/html/guide/practices/ui_guidelines/index.jd b/docs/html/guide/practices/ui_guidelines/index.jd index e19d5b4..61e310a 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 +» </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> |