drgreen/android_frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge "Update icon guidelines for Gingerbread. Also add new, revamped icon templates pack." into gingerbread

Browse Source
This commit is contained in:
Roman Nurik
2010-12-13 19:12:42 -08:00
committed by Android (Google) Code Review
parent 0927c90265 d602b355ba
commit 0a97435c8d
36 changed files with 2193 additions and 2635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -484,9 +484,31 @@
<span class="en">UI Guidelines</span> <span class="en">UI Guidelines</span>
</a></div> </a></div>
<ul> <ul>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html"> <li class="toggle-list">
<span class="en">Icon Design</span> <div><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">
</a></li> <span class="en">Icon Design</span>
</a></div>
<ul>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_launcher.html">
<span class="en">Launcher Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_menu.html">
<span class="en">Menu Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_status_bar.html">
<span class="en">Status Bar Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_tab.html">
<span class="en">Tab Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_dialog.html">
<span class="en">Dialog Icons</span>
</a></li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design_list.html">
<span class="en">List View Icons</span>
</a></li>
</ul>
</li>
<li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/widget_design.html"> <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/widget_design.html">
<span class="en">App Widget Design</span> <span class="en">App Widget Design</span>
</a></li> </a></li>

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

File diff suppressed because it is too large Load Diff

9
docs/html/guide/practices/ui_guidelines/icon_design_1.html Normal file
View File

@ -0,0 +1,9 @@
<html>
<head>
<meta http-equiv="refresh" content="0;url=icon_design.html">
<title>Redirecting...</title>
</head>
<body>
<a href="icon_design.html">click here</a> if you are not redirected.
</body>
</html>

1205
docs/html/guide/practices/ui_guidelines/icon_design_1.jd
View File

File diff suppressed because it is too large Load Diff

164
docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd Normal file
View File

@ -0,0 +1,164 @@
page.title=Dialog Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon1">All Android Versions</a>
<ol>
<li><a href="#structure1">Structure</a></li>
<li><a href="#style1">Light, effects, and shadows</a></li>
</ol>
</li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<p>Dialog icons are shown in pop-up dialog boxes that prompt the user for
interaction. They use a light gradient and inner
shadow in order to stand out against a dark background.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See Table 1 for a listing of the recommended finished icon sizes for each
density. Also, see <a href="icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p class="table-caption"><strong>Table 1.</strong> Summary of finished dialog
icon dimensions for each of the three generalized screen densities.</p>
<table>
<tbody>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>Low density screen <em>(ldpi)</em></nobr>
</th>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>Medium density screen <em>(mdpi)</em></nobr>
</th>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>High density screen <em>(hdpi)</em><nobr>
</th>
</tr>
<tr>
<td>
24 x 24 px
</td>
<td>
32 x 32 px
</td>
<td>
48 x 48 px
</td>
</tr>
</tbody>
</table>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<h2 id="icon1">All Android Versions</h2>
<p>The following guidelines describe how to design dialog icons for all versions
of the Android platform.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>Dialog icons have a 1 pixel safeframe. The base shape must fit within the
safeframe, but the anti-alias of a round shape can overlap the safeframe.</li>
<li>All dimensions specified on this page are based on a 32x32 pixel artboard size
in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the
Photoshop template.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/dialog_icon.png" alt="A view of dialog
icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 1. </strong>Safeframe and fill gradient for dialog icons.
Icon size is 32x32.</p>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>Dialog icons are flat and pictured face-on. In order to stand out against a
dark background, they are built up using a light gradient and inner shadow.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/dialog_light.png" alt="A view of light,
effects, and shadows for dialog icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Light, effects, and shadows for dialog
icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90&deg;<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&deg; | distance 1px | size 0px</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0;">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 32x32 px on a transparent background. </li>
<li>Add the effects seen in Figure 2 for the proper filter.</li>
<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>

520
docs/html/guide/practices/ui_guidelines/icon_design_launcher.jd Normal file
View File

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

163
docs/html/guide/practices/ui_guidelines/icon_design_list.jd Normal file
View File

@ -0,0 +1,163 @@
page.title=List View Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon1">All Android Versions</a>
<ol>
<li><a href="#structure1">Structure</a></li>
<li><a href="#style1">Light, effects, and shadows</a></li>
</ol>
</li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<p>List view icons look a lot like dialog icons, but they use an inner shadow
effect where the light source is above the object. They are also designed to be
used only in a {@link android.widget.ListView}. Examples include the Settings
application.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See Table 1 for a listing of the recommended finished icon sizes for each
density. Also, see <a href="icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p class="table-caption"><strong>Table 1.</strong> Summary of finished list view
icon dimensions for each of the three generalized screen densities.</p>
<table>
<tbody>
<tr>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>Low density screen <em>(ldpi)</em></nobr>
</th>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>Medium density screen <em>(mdpi)</em></nobr>
</th>
<th style="background-color:#f3f3f3;font-weight:normal">
<nobr>High density screen <em>(hdpi)</em><nobr>
</th>
</tr>
<tr>
<td>
24 x 24 px
</td>
<td>
32 x 32 px
</td>
<td>
48 x 48 px
</td>
</tr>
</tbody>
</table>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<h2 id="icon1">All Android Versions</h2>
<p>The following guidelines describe how to design dialog icons for all versions
of the Android platform.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>A list view icon normally has a 1 px safeframe, but it is OK to use the
safeframe area for the edge of the anti-alias of a round shape.</li>
<li>All dimensions specified are based on a 32x32 pixel artboard size in
Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/listview_icon.png" alt="A view of list
view icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 1. </strong>Safeframe and fill gradient for list view
icons. Icon size is 32x32.</p>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>List view icons are flat and pictured face-on with an inner shadow. Built up
by a light gradient and inner shadow, they stand out well on a dark
background.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/listview_icon_details.png" alt="A view
of light, effects, and shadows for list view icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Light, effects, and shadows for list view
icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120&deg; | blend mode normal | distance 1px | size 1px <td></tr>
<tr><td><em>2.</em></td><td>Background:</td><td>black | standard system color <br>These icons are displayed in list views only.</td></tr>
<tr><td colspan="2">Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Add the effects seen in Figure 2 for the proper filter.</li>
<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 32x32 px on a transparent background. </li>
</ol>
</td>
</tr>
</table>

349
docs/html/guide/practices/ui_guidelines/icon_design_menu.jd Normal file
View File

@ -0,0 +1,349 @@
page.title=Menu Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon9">Android 2.3 and Later</a>
<ol>
<li><a href="#size9">Size</a></li>
<li><a href="#style9">Style, colors, and effects</a></li>
<li><a href="#dodonts9">Do's and don'ts</a></li>
<li><a href="#examples9">Example icons</a></li>
</ol>
</li>
<li><a href="#icon1">Android 2.2 and Earlier</a></li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<p>Menu icons are graphical elements placed in the options menu shown to users
when they press the Menu button. They are drawn in a flat-front perspective and
in greyscale. Elements in a menu icon must not be visualized in 3D or
perspective.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<p class="caution"><strong>Caution:</strong> The style and content sizing of
menu icons have changed in Android 2.3 compared to
<a href="#icon1">previous versions</a>:
<br>
1. Icons have a larger safe frame; icon content is smaller within the full
asset. Final asset sizes have not changed.
<br>
2. The color palette is slightly lighter.
<br>
3. No outer glow effects are applied.
<br>
4. Menu icons can now be rendered on either dark or light backgrounds.
</p>
<h2 id="icon9">Android 2.3 and Later</h2>
<p>The following guidelines describe how to design menu icons for Android
2.3 (API Level 9) and later.</p>
<h3 id="size9">Size and positioning</h3>
<p>Menu icons can use a variety of shapes and forms and must be scaled and
positioned inside the asset to create consistent visual weight with other
icons.</p>
<p>Figure 1 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em>, to create a consistent visual weight. If your icon is square or
nearly square, it should be scaled even smaller.</p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 1 includes three different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
<li>The blue box is the recommended bounding box for the actual icon.
The icon box is sized smaller than the full asset box to allow for
varying icon shapes while maintaining a consistent visual weight.</li>
<li>The orange box is the recommended bounding box for the actual icon when
the content is square. The box for square icons is smaller than that for other
icons to establish a consistent visual weight across the two types.</li>
</ul>
<table>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Menu icon dimensions for high-density (<code>hdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 72 x 72 px</li>
<li>Icon: 48 x 48 px</li>
<li>Square Icon: 44 x 44 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/menu_size_hdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Menu icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 48 x 48 px</li>
<li>Icon: 32 x 32 px</li>
<li>Square Icon: 30 x 30 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/menu_size_mdpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Menu icon dimensions for low-density (<code>ldpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 36 x 36 px</li>
<li>Icon: 24 x 24 px</li>
<li>Square Icon: 22 x 22 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/menu_size_ldpi.png" width="450">
</td>
</tr>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 1.</strong>
Menu icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
</tr>
</table>
<h3 id="style9">Style, colors, and effects</h3>
<p>Menu icons are flat, pictured face on, and greyscale. A slight deboss and
some other effects, which are shown below, are used to create depth. Menu icons
should include rounded corners, but only when logically appropriate.</p>
<p>In order to maintain consistency, all menu icons must use the same
color palette and effects, as shown in Figure 2.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/menu_style.png" alt="A view of light, effects, and shadows for menu icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Style, light and effects for menu icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Corner rounding:</td><td>2 pixel corner radius, when appropriate<br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Fill gradient:</td><td>90&deg;, from <code>#8C8C8C</code> to <code>#B2B2B2</code><br><br></td></tr>
<tr><td><em>3.</em></td><td nowrap>Inner shadow:</td><td><code>#000000</code>, 20% opacity<br>angle 90&deg;<br>distance 2px<br>size 2px<br><br></td></tr>
<tr><td><em>4.</em></td><td nowrap>Inner bevel:</td><td>depth 1%<br>direction down<br>size 0px<br>angle 90&deg;<br>altitude 10&deg;<br>highlight <code>#ffffff</code>, 70% opacity<br>shadow <code>#000000</code>, 25% opacity</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dodonts9">Do's and don'ts</h3>
<p>Below are some "do and don't" examples to consider when creating menu icons for
your application. </p>
<img src="{@docRoot}images/icon_design/do_dont_menuicons.png">
<h3 id="examples9">Example icons</h3>
<p>Shown below are standard high-density menu icons that are used in the Android
platform.</p>
<p class="warning"><strong>Warning:</strong> Because these resources can change
between platform versions, you should not reference these icons using the
Android platform resource IDs (i.e. menu icons under
<code>android.R.drawable</code>). If you want to use any icons or other internal
drawable resources, you should store a local copy of those icons or drawables in
your application resources, then reference the local copy from your application
code. In that way, you can maintain control over the appearance of your icons,
even if the system's copy changes. Note that the grid below is not intended to
be complete.</p>
<img src="{@docRoot}images/icon_design/menu_standard.png" />
<h2 id="icon1">Android 2.2 and Earlier</h2>
<p>The following guidelines describe how to design menu icons for Android 2.2
(API Level 4) and earlier. Menu icons in Android 2.2 and below are drawn in a
flat-front perspective. Elements in a menu icon must not be visualized in 3D or
perspective.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>In order to maintain consistency, all menu icons must use the same
primary palette and the same effects. For more information, see the
menu icon <a href="#palette1">color palette</a>. </li>
<li>Menu icons should include rounded corners, but only when logically
appropriate. For example, in Figure 3 the logical place for rounded corners is
the roof and not the rest of the building.</span></li>
<li>All dimensions specified on this page are based on a 48x48 pixel artboard
size with a 6 pixel safeframe.</li>
<li>The menu icon effect (the outer glow) described in <a
href="#style1">Light, effects, and shadows</a> can overlap the 6px safeframe,
but only when necessary. The base shape must always stay inside the
safeframe.</li>
<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
<li>Templates for creating menu icons in Adobe Photoshop are available in the
Icon Templates Pack.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu
icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 3. </strong>Safeframe and corner-rounding for menu
icons. Icon size is 48x48.</p>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>Menu icons are flat and pictured face on. A slight deboss and some other
effects, which are shown below, are used to create depth.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/menu_light.png" alt="A view of light, effects, and shadows for launcher icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 4. </strong>Light, effects, and shadows for launcher icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
<tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr>
<tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr>
<tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="palette1">Color palette</h4>
<table>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png"/></td>
<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for outer glow and bevel highlight.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png"/></td>
<td class="image-caption-c">Fill gradient<br><em>1:&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"/></td>
<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for inner shadow and bevel shadow.</td>
</tr>
</table>
</td>
<td style="border:0">
<h4 id="steps1">Step by step</h4>
<ol>
<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
<li>Import the shape into a tool like Adobe Photoshop and scale to fit an image
of 48x48 px on a transparent background. Mind the safeframe.</li>
<li>Add the effects seen as described in Figure 4.</li>
<li>Export the icon at 48x48 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>

330
docs/html/guide/practices/ui_guidelines/icon_design_status_bar.jd Normal file
View File

@ -0,0 +1,330 @@
page.title=Status Bar Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#icon9">Android 2.3 and Later</a>
<ol>
<li><a href="#size9">Size</a></li>
<li><a href="#style9">Style, color, and effects</a></li>
<li><a href="#dodonts9">Do's and don'ts</a></li>
<li><a href="#examples9">Example icons</a></li>
</ol>
</li>
<li><a href="#icon1">Android 2.2 and Earlier</a></li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<p>Status bar icons are used to represent notifications from your application in
the status bar.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a> for
suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<p class="warning"><strong>Warning:</strong>
The style and dimensions of status bar icons have changed drastically in
Android 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To
provide support for all Android versions</strong>, developers should:
<br>
1. Place status bar icons for Android 2.3 and higher in the
<code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>, and <code>drawable-ldpi-v9</code> directories.
<br>
2. Place status bar icons for previous versions in
<code>drawable-hdpi</code>, <code>drawable-mdpi</code>, and <code>drawable-ldpi</code> directories.
</p>
<h2 id="icon9">Android 2.3 and Later</h2>
<p>The following guidelines describe how to design status bar icons for Android
2.3 (API Level 9) and later.</p>
<h3 id="size9">Size and positioning</h3>
<p>Status bar icons should use simple shapes and forms and those must be
scaled and positioned inside the final asset.</p>
<p>Figure 1 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em>. <strong>Status bar icons may vary in width, but only
minimally.</strong></p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 1 includes two different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
<li>The blue box is the recommended bounding box for the actual icon.
The icon box is sized smaller vertically than the full asset box to allow for
varying icon shapes while maintaining a consistent visual weight.</li>
</ul>
<table>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Status bar icon dimensions for high-density (<code>hdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 24w x 38h px (preferred, width may vary)</li>
<li>Icon: 24w x 24h px (preferred, width may vary)</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/statusbar_size_hdpi.png" width="318">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Status bar icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 16w x 25 px (preferred, width may vary)</li>
<li>Icon: 16w x 16w px (preferred, width may vary)</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/statusbar_size_mdpi.png" width="318">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Status bar icon dimensions for low-density (<code>ldpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 12w x 19h px (preferred, width may vary)</li>
<li>Icon: 12w x 12h px (preferred, width may vary)</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/statusbar_size_ldpi.png" width="318">
</td>
</tr>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 1.</strong>
Status bar icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
</tr>
</table>
<h3 id="style9">Style, colors, and effects</h3>
<p>Status bar icons are flat, matte, and pictured face-on.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/statusbar_style.png" alt="A view of effects for status bar icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Style and effects for status icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Fill gradient:</td><td>90&deg;, from <code>#828282</code> to <code>#919191</code><br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner shadow:</td><td><code>#FFFFFF</code>, 10% opacity<br>angle 90&deg;<br>distance 1px<br>size 0px<br><br></td></tr>
<tr><td><em>3.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dosdonts9">Do's and don'ts</h3>
<p>Below are some "do and don't" examples to consider when creating status bar icons for
your application. </p>
<img src="{@docRoot}images/icon_design/do_dont_statusicons.png">
<h3 id="examples9">Example icons</h3>
<p>Shown below are standard high-density status bar icons that are used in
the Android platform.</p>
<p class="warning"><strong>Warning:</strong> Because these resources can change
between platform versions, you should not reference these icons using the
Android platform resource IDs (i.e. status bar icons under
<code>android.R.drawable</code>). If you want to use any icons or other internal
drawable resources, you should store a local copy of those icons or drawables in
your application resources, then reference the local copy from your application
code. In that way, you can maintain control over the appearance of your icons,
even if the system's copy changes. Note that the grid below is not intended to
be complete.</p>
<img src="{@docRoot}images/icon_design/statusbar_standard.png" />
<h2 id="icon1">Android 2.2 and Earlier</h2>
<p>The following guidelines describe how to design status bar icons for Android
2.2 (API Level 8) and earlier.</p>
<h3 id="structure1">Structure</h3>
<ul>
<li>Rounded corners must always be applied to the base shape and to the details
of a status bar icon shown Figure 3.</li>
<li>All dimensions specified are based on a 25x25 pixel artboard size with a 2
pixel safeframe.</li>
<li>Status bar icons can overlap the safeframe to the left and right when
necessary, but must not overlap the safeframe at the top and bottom.</li>
<li><strong>Final art must be exported as a transparent PNG file.</strong></li>
<li>Templates for creating status bar icons using Adobe Photoshop are available
in the Icon Templates Pack.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of
status bar icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 3. </strong>Safeframe and corner-rounding for status bar
icons. Icon size is 25x25.</p>
</div>
</td>
</tr>
</table>
<h3 id="style1">Light, effects, and shadows</h3>
<p>Status bar icons are slightly debossed, high in contrast, and pictured
face-on to enhance clarity at small sizes.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/statusbar_light.png"/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 4. </strong>Light, effects, and shadows for status bar icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr>
<tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr>
<tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr>
<tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="palette1">Color palette</h4>
<p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p>
<table>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png"/></td>
<td class="image-caption-c">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td>
</tr>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png"/></td>
<td class="image-caption-c">Grey gradient<br><em>1:&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_fill.png"/></td>
<td class="image-caption-c">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"/></td>
<td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td>
</tr>
</table>
</td>
<td style="border:0">
<h4 id="steps1">Step by step</h4>
<ol>
<li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px
image on a transparent background. Mind the safeframe, and keep the upper and
lower 2 pixels free.</li>
<li>Add rounded corners as specified in Figure 3.</li>
<li>Add light, effects, and shadows as specified in Figure 4.</li>
<li>Export the icon at 25x25 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>

454
docs/html/guide/practices/ui_guidelines/icon_design_tab.jd Normal file
View File

@ -0,0 +1,454 @@
page.title=Tab Icons
parent.title=Icon Design Guidelines
parent.link=icon_design.html
@jd:body
<div id="qv-wrapper">
<div id="qv">
<h2>In this document</h2>
<ol>
<li><a href="#tabstates">Providing Icons for Two Tab States</a>
<li><a href="#icon5">Android 2.0 and Later</a>
<ol>
<li><a href="#size5">Size</a></li>
<li><a href="#style5">Style, colors, and effects</a></li>
<li><a href="#dodonts5">Do's and don'ts</a></li>
<li><a href="#examples5">Example icons</a></li>
</ol>
</li>
<li><a href="#icon1">Android 1.6 and Earlier</a></li>
</ol>
<h2>See also</h2>
<ol>
<li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
Screens</a></li>
</ol>
</div>
</div>
<p>Tab icons are graphical elements used to represent individual tabs in a
multi-tab interface. Each tab icon has two states: unselected and selected.</p>
<p>As described in <a href="icon_design.html#icon-sets">Providing
Density-Specific Icon Sets</a>, you should create separate icon sets for low-,
medium-, and high-density screens. This ensures that your icons will display
properly across the range of devices on which your application can be installed.
See <a href="icon_design.html#design-tips">Tips for Designers</a>
for suggestions on how to work with multiple sets of icons.</p>
<p><strong>Final art must be exported as a transparent PNG file. Do not include
a background color</strong>.</p>
<p>Templates for creating icons in Adobe Photoshop are available in the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#templatespack">Icon
Templates Pack</a>.</p>
<p class="warning"><strong>Warning:</strong>
The style of tab icons has changed drastically in
Android 2.0 compared to <a href="#icon1">previous versions</a>. <strong>To
provide support for all Android versions</strong>, developers should:
<br>
1. Place tab icons for Android 2.0 and higher in the
<code>drawable-hdpi-v5</code>, <code>drawable-mdpi-v5</code>, and <code>drawable-ldpi-v5</code> directories.
<br>
2. Place tab icons for previous versions in
<code>drawable-hdpi</code>, <code>drawable-mdpi</code>, and <code>drawable-ldpi</code> directories.
<br>
3. Set <code>android:targetSdkVersion</code> to 5 or higher in the
<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt;</a>
in the <a href="{@docRoot}guide/topics/manifest/manifest-intro.html">application manifest</a>.
This will inform the system that it should render tabs using the new tab style.
</p>
<h2 id="tabstates">Providing Icons for Two Tab States</h2>
<p>Tab icons should have two states: unselected and selected. To provide icons
with multiple states, developers must create a
<a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state
list drawable</a> for each an icon, which is an XML file that lists which image
to use for the different UI states.</p>
<p>For example, for a tab widget with tabs named 'Friends' and 'Coworkers',
you can use a directory structure similar to the one below:</p>
<pre>res/...
drawable/...
<strong>ic_tab_friends.xml</strong>
<strong>ic_tab_coworkers.xml</strong>
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...</pre>
<p>The contents of the XML files listed above should reference the corresponding
selected and unselected icon drawables. For example, below is the code
for <code>ic_tab_friends.xml</code>:</p>
<pre>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
&lt;!-- selected state --&gt;
&lt;item android:drawable="@drawable/ic_tab_friends_selected"
android:state_selected="true"
android:state_pressed="false" /&gt;
&lt;!-- unselected state (default) --&gt;
&lt;item android:drawable="@drawable/ic_tab_friends_unselected" /&gt;
&lt;/selector&gt;
</pre>
<h2 id="icon5">Android 2.0 and Later</h2>
<p>The following guidelines describe how to design tab icons for Android
2.0 (API Level 5) and later.</p>
<h3 id="size5">Size and positioning</h3>
<p>Tab icons should use simple shapes and forms and those must be
scaled and positioned inside the final asset.</p>
<p>Figure 1 illustrates various ways of positioning the icon inside the
asset. You should size the icons <em>smaller than the actual bounds of the
asset</em>.</p>
<p>In order to indicate the recommended size for the icon, each example in
Figure 1 includes three different guide rectangles:</p>
<ul>
<li>The red box is the bounding box for the full asset.</li>
<li>The blue box is the recommended bounding box for the actual icon.
The icon box is sized smaller than the full asset box to allow for
special icon treatments.</li>
<li>The orange box is the recommended bounding box for the actual icon when
the content is square. The box for square icons is smaller than that for other
icons to establish a consistent visual weight across the two types.</li>
</ul>
<table>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Tab icon dimensions for high-density (<code>hdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 48 x 48 px</li>
<li>Icon: 42 x 42 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/tab_size_hdpi.png" width="385">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Tab icon dimensions for medium-density (<code>mdpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 32 x 32 px</li>
<li>Icon: 28 x 28 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/tab_size_mdpi.png" width="385">
</td>
</tr>
<tr>
<td style="border:0;">
<ol class="nolist">
<li>Tab icon dimensions for low-density (<code>ldpi</code>) screens:</li>
<ol class="nolist">
<li>Full Asset: 24 x 24 px</li>
<li>Icon: 22 x 22 px</li>
</ol>
</li>
</ol>
</td>
<td style="border:0;">
<img src="{@docRoot}images/icon_design/tab_size_ldpi.png" width="385">
</td>
</tr>
<tr>
<td style="border:0;"></td>
<td style="border:0;">
<p class="table-caption"><strong>Figure 1.</strong>
Tab icon sizing and positioning inside the bounds of the
icon asset.</p>
</td>
</tr>
</table>
<h3 id="style5">Style, colors, and effects</h3>
<p>Tab icons are flat, matte, and pictured face-on.</p>
<p>Tab icons should have two states: selected and unselected.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_style_unselected.png" alt="A view of effects for unselected tab icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 2. </strong>Style and effects for unselected tab icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#808080</code><br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_style_selected.png" alt="A view of effects for selected tab icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 3. </strong>Style and effects for selected tab icons.</p>
<div class="image-caption-nested">
<p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p>
<table>
<tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#FFFFFF</code><br><br></td></tr>
<tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.<br><br></td></tr>
<tr><td><em>3.</em></td><td nowrap>Outer glow:</td><td><code>#000000</code>, 25% opacity<br>size 3px</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<h3 id="dosdonts5">Do's and don'ts</h3>
<p>Below are some "do and don't" examples to consider when creating tab icons for
your application. </p>
<img src="{@docRoot}images/icon_design/do_dont_tabicons.png">
<h3 id="examples5">Example icons</h3>
<p>Shown below are standard high-density tab icons that are used in
the Android platform.</p>
<p class="warning"><strong>Warning:</strong>
Because these resources can change between platform versions, you
should not reference the system's copy of the resources. If you want to
use any icons or other internal drawable resources, you should store a
local copy of those icons or drawables in your application resources,
then reference the local copy from your application code. In that way, you can
maintain control over the appearance of your icons, even if the system's
copy changes. Note that the grid below is not intended to be complete.</p>
<img src="{@docRoot}images/icon_design/tab_standard.png" />
<h2 id="icon1">Android 1.6 and Earlier</h2>
<p>The following guidelines describe how to design tab icons for Android
1.6 (API Level 4) and earlier.</p>
<h4 id="structure1">Structure</h4>
<ul>
<li>Unselected tab icons have the same fill gradient and effects as
<a href="icon_design_menu.html#icon1">menu icons</a>,
but with no outer glow.</li>
<li>Selected tab icons look just like unselected tab icons, but with a fainter
inner shadow, and have the same front part gradient as
<a href="icon_design_dialog.html#icon1">dialog icons</a>.</li>
<li>Tab icons have a 1 px safeframe which should only be overlapped for the edge
of the anti-alias of a round shape.</li>
<li>All dimensions specified on this page are based on a 32x32 px artboard size.
Keep 1 px of padding around the bounding box inside the Photoshop template.</li>
</ul>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of
unselected tab icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 3. </strong>Safeframe and fill gradient for unselected tab
icons. Icon size is 32x32.</p>
</div>
</td>
</tr>
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of
selected tab icon structure." />
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 4. </strong>Safeframe and fill gradient for tab icons in
selected state. Icon size is 32x32.</p>
</div>
</td>
</tr>
</table>
<h3 id="unselectedtabdetails1">Unselected tab icon</h3>
<h4 id="unselectedtablight1">Light, effects, and shadows</h4>
<p>Unselected tab icons look just like the selected tab icons, but with a
fainter inner shadow, and the same front part gradient as the dialog icons.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view
of light, effects, and shadows for unselected tab icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 5. </strong>Light, effects, and shadows for unselected
tab icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: r 249 | g 249 | b 249<br>bottom color location: 0%<br>top color location: 75%</td></tr>
<tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 10 % opacity | angle 90° distance 2px | size 2px</td></tr>
<tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="unselectedtabsteps1">Step by step</h4>
<ol>
<li>Create the basic shapes using a tool like Adobe Illustrator.</li>
<li>Import the shape to a tool like Adobe Photoshop and scale to fit an image of
32x32 px on a transparent background.</li>
<li>Add the effects seen in Figure 5 for the unselected state filter.</li>
<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>
<h3 id="selectedtabdetails1">Selected tab icon</h3>
<p>The selected tab icons have the same fill gradient and effects as the menu
icon, but with no outer glow.</p>
<table class="image-caption">
<tr>
<td class="image-caption-i">
<img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of
light, effects, and shadows for selected tab icons."/>
</td>
<td class="image-caption-c">
<div class="caption grad-rule-top">
<p><strong>Figure 6. </strong>Light, effects, and shadows for selected tab
icons.</p>
<div class="image-caption-nested">
<table>
<tr><td><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr>
<tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr>
<tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td style="border:0">
<h4 id="selectedtabpalette1">Color palette</h4>
<table>
<tr>
<td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png"/></td>
<td class="image-caption-c">Fill gradient<br><em>1:&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">
<h4 id="selectedtabsteps1">Step by step</h4>
<ol>
<li>Create the basic shape using a tool like Adobe Illustrator.</li>
<li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32
px artboard with a transparent background. </li>
<li>Add the effects seen in Figure 6 for the selected state filter.</li>
<li>Export the icon at 32x32 as a PNG file with transparency enabled.</li>
</ol>
</td>
</tr>
</table>

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

@ -12,7 +12,7 @@ these guidelines as we release them.</p>
<dl> <dl>
<dt><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon <dt><a href="{@docRoot}guide/practices/ui_guidelines/icon_design.html">Icon
Design Guidelines</a> and <a Design Guidelines</a> and <a
href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon Templates Pack href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon Templates Pack
&raquo; </a></dt> &raquo; </a></dt>
<dd>Your applications need a wide variety of icons, from a launcher icon to <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 icons in menus, dialogs, tabs, the status bar, and lists. The Icon Guidelines

BIN
docs/html/images/icon_design/IconGraphic_Colors.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 624 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/html/images/icon_design/do_dont_statusicons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 171 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/html/images/icon_design/launcher_structure.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 23 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/html/shareables/icon_templates-v2.3.zip Normal file
View File

Binary file not shown.