|
|
|
@ -105,7 +105,7 @@ the application on an Android Virtual Device (AVD) or an HVGA device such as the
|
|
|
|
|
T-Mobile G1. </li>
|
|
|
|
|
<li>Test and adjust your baseline icons as needed.</li>
|
|
|
|
|
<li>When you are satisfied with the icons you've developed at the baseline
|
|
|
|
|
density, create scaled copies for the other densities. </li>
|
|
|
|
|
density, create scaled copies for the other densities.
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Scale the baseline icons up 150% to create the high-density assets.</li>
|
|
|
|
@ -128,12 +128,11 @@ directory.</li>
|
|
|
|
|
<p>For tips on how to create and manage icon sets for multiple densities, see
|
|
|
|
|
<a href="#design_tips">Tips for Designers</a>.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p class="caption"><strong>Table 1.</strong> Summary of finished icon
|
|
|
|
|
dimensions for each of the three generalized screen densities, by
|
|
|
|
|
<p class="caption" id="screens-table"><strong>Table 1.</strong> Summary of
|
|
|
|
|
finished icon dimensions for each of the three generalized screen densities, by
|
|
|
|
|
icon type.</p>
|
|
|
|
|
|
|
|
|
|
<table id="screens-table" style="margin-top:2em;">
|
|
|
|
|
<table style="margin-top:2em;">
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Icon Type</th><th colspan="3">Standard Asset Sizes (in Pixels), for
|
|
|
|
@ -598,6 +597,14 @@ Screens</a>.</p>
|
|
|
|
|
when they press the Menu button. They are drawn in a flat-front perspective.
|
|
|
|
|
Elements in a menu icon must not be visualized in 3D or perspective.</p>
|
|
|
|
|
|
|
|
|
|
<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
|
|
|
|
|
Sets</a>, above, you should create separate icon sets for low-, normal, and
|
|
|
|
|
high-density screens. This ensures that your icons will display properly across
|
|
|
|
|
the range of devices on which your application can be installed. See <a
|
|
|
|
|
href="#screens-table">Table 1</a> for a listing of the recommended finished icon
|
|
|
|
|
sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
|
|
|
|
|
for suggestions on how to work with multiple sets of icons.</p>
|
|
|
|
|
|
|
|
|
|
<h4>Structure</h4>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
@ -722,6 +729,14 @@ your application. </p>
|
|
|
|
|
the status bar. Graphically, they are very similar to menu icons, but are
|
|
|
|
|
smaller and higher in contrast.</p>
|
|
|
|
|
|
|
|
|
|
<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
|
|
|
|
|
Sets</a>, above, you should create separate icon sets for low-, normal, and
|
|
|
|
|
high-density screens. This ensures that your icons will display properly across
|
|
|
|
|
the range of devices on which your application can be installed. See <a
|
|
|
|
|
href="#screens-table">Table 1</a> for a listing of the recommended finished icon
|
|
|
|
|
sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
|
|
|
|
|
for suggestions on how to work with multiple sets of icons.</p>
|
|
|
|
|
|
|
|
|
|
<h4>Structure</h4>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
@ -849,6 +864,14 @@ your application. </p>
|
|
|
|
|
<p>Tab icons are graphical elements used to represent individual tabs in a
|
|
|
|
|
multi-tab interface. Each tab icon has two states: unselected and selected.</p>
|
|
|
|
|
|
|
|
|
|
<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
|
|
|
|
|
Sets</a>, above, you should create separate icon sets for low-, normal, and
|
|
|
|
|
high-density screens. This ensures that your icons will display properly across
|
|
|
|
|
the range of devices on which your application can be installed. See <a
|
|
|
|
|
href="#screens-table">Table 1</a> for a listing of the recommended finished icon
|
|
|
|
|
sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
|
|
|
|
|
for suggestions on how to work with multiple sets of icons.</p>
|
|
|
|
|
|
|
|
|
|
<h4>Structure</h4>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
@ -1012,6 +1035,13 @@ px artboard with a transparent background. </li>
|
|
|
|
|
interaction. They use a light gradient and inner
|
|
|
|
|
shadow in order to stand out against a dark background.</p>
|
|
|
|
|
|
|
|
|
|
<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
|
|
|
|
|
Sets</a>, above, you should create separate icon sets for low-, normal, and
|
|
|
|
|
high-density screens. This ensures that your icons will display properly across
|
|
|
|
|
the range of devices on which your application can be installed. See <a
|
|
|
|
|
href="#screens-table">Table 1</a> for a listing of the recommended finished icon
|
|
|
|
|
sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
|
|
|
|
|
for suggestions on how to work with multiple sets of icons.</p>
|
|
|
|
|
<h4>Structure</h4>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
@ -1099,6 +1129,14 @@ used only in a {@link android.widget.ListView}. Examples include the Android
|
|
|
|
|
Market application home screen and the driving directions screen in the Maps
|
|
|
|
|
application.</p>
|
|
|
|
|
|
|
|
|
|
<p>As described in <a href="#icon-sets">Providing Density-Specific Icon
|
|
|
|
|
Sets</a>, above, you should create separate icon sets for low-, normal, and
|
|
|
|
|
high-density screens. This ensures that your icons will display properly across
|
|
|
|
|
the range of devices on which your application can be installed. See <a
|
|
|
|
|
href="#screens-table">Table 1</a> for a listing of the recommended finished icon
|
|
|
|
|
sizes for each density. Also, see <a href="#design-tips">Tips for Designers</a>
|
|
|
|
|
for suggestions on how to work with multiple sets of icons.</p>
|
|
|
|
|
|
|
|
|
|
<h4>Structure</h4>
|
|
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
@ -1332,7 +1370,7 @@ density. For example if a 60x60 circle was painted as a bitmap for
|
|
|
|
|
<code>hdpi</code>.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h4>When scaling a 9-patch image, crop tick marks before scaling and replace
|
|
|
|
|
<h4>When scaling a nine-patch image, crop tick marks before scaling and replace
|
|
|
|
|
them after</h4>
|
|
|
|
|
|
|
|
|
|
<p>Nine-patch images include tick marks at the outer edge of the image. When you
|
|
|
|
@ -1384,7 +1422,7 @@ the target resolution. </p>
|
|
|
|
|
file to use as reference. Create a new layer in which to paint new tick marks at
|
|
|
|
|
the single pixel outer edge of the image. Note tickmarks must be 100% opaque
|
|
|
|
|
black, without transparency, and all other areas of the tick mark region must be
|
|
|
|
|
100% transparent, otherwise the system will not interpret the 9-patch image
|
|
|
|
|
100% transparent, otherwise the system will not interpret the nine-patch image
|
|
|
|
|
correctly. </p>
|
|
|
|
|
|
|
|
|
|
<p>Using the scaled duplicate flattened image as reference paint new tick marks
|
|
|
|
@ -1402,7 +1440,7 @@ to <code>hdpi</code>.
|
|
|
|
|
|
|
|
|
|
<h4>Save nine-patch images with the appropriate filename suffix</h4>
|
|
|
|
|
|
|
|
|
|
<p>If an asset is a 9-patch asset (with tick marks), be sure to save the asset
|
|
|
|
|
<p>If an asset is a nine-patch asset (with tick marks), be sure to save the asset
|
|
|
|
|
in PNG format with a filename that includes the <code>.9.png</code> suffix. If
|
|
|
|
|
the filename does not use the suffix, the system won't recognize the image as a
|
|
|
|
|
nine-patch asset and won't resize it as intended. </p>
|
|
|
|
@ -1428,13 +1466,13 @@ filenames</h4>
|
|
|
|
|
|
|
|
|
|
<p>Corresponding icon asset files for each density must use the same filename,
|
|
|
|
|
but be stored in density-specific resource directories. This allows the system
|
|
|
|
|
to look up and load the proper resource according to the resource requested by
|
|
|
|
|
the application and the screen characteristics of the device. For this reason,
|
|
|
|
|
make sure that the set of assets in each density-specific is consistent and do
|
|
|
|
|
not use density-specific suffixes in the filenames. For more information about
|
|
|
|
|
how to manage density-specific resources, see <a
|
|
|
|
|
to look up and load the proper resource according to the screen characteristics
|
|
|
|
|
of the device. For this reason, make sure that the set of assets in each
|
|
|
|
|
directory is consistent and that the files do not use density-specific suffixes.
|
|
|
|
|
For more information about density-specific resources and how the system uses
|
|
|
|
|
them to meet the needs of different devices, see <a
|
|
|
|
|
href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple
|
|
|
|
|
Screens</a>. </p>
|
|
|
|
|
Screens</a>.</p>
|
|
|
|
|
|
|
|
|
|
<h2 id="templatespack">Using the Android Icon Templates Pack</h2>
|
|
|
|
|
|
|
|
|
|