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>


<div class="note design">
<p><strong>New Guides for App Designers!</strong></p> 
<p>Check out the new documents for designers at <strong><a
href="{@docRoot}design/index.html">Android Design</a></strong>, including more guidelines
for <a href="{@docRoot}design/style/iconography.html">Iconography</a>.</p>
</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></th>
    <th>
      <code>ldpi</code> (120 dpi)<br>
      <small style="font-weight: normal">(Low density screen)</small>
    </th>
    <th>
      <code>mdpi</code> (160 dpi)<br>
      <small style="font-weight: normal">(Medium density screen)</small>
    </th>
    <th>
      <code>hdpi</code> (240 dpi)<br>
      <small style="font-weight: normal">(High density screen)</small>
    </th>
    <th>
      <code>xhdpi</code> (320 dpi)<br>
      <small style="font-weight: normal">(Extra-high density screen)</small>
    </th>
  </tr>
  <tr>
    <th style="background-color:#f3f3f3;font-weight:normal">
      List View Icon Size
    </th>
    <td>
      24 x 24 px
    </td>
    <td>
      32 x 32 px
    </td>
    <td>
      48 x 48 px
    </td>
    <td>
      64 x 64 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>
