practices/ui_guidelines/icon_design_dialog.jd

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>

<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>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>