Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 0a97435c authored by Roman Nurik's avatar Roman Nurik Committed by Android (Google) Code Review
Browse files

Merge "Update icon guidelines for Gingerbread. Also add new, revamped icon... 

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

docs/html/guide/guide_toc.cs

+25 −3
Original line number Diff line number Diff line
@@ -484,9 +484,31 @@ 
               <span class="en">UI Guidelines</span>

             </a></div>

        <ul>

          <li><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">

          <li class="toggle-list">

            <div><a href="<?cs var:toroot ?>guide/practices/ui_guidelines/icon_design.html">

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

                <span class="en">App Widget Design</span>

              </a></li>

docs/html/guide/practices/ui_guidelines/icon_design.jd

+176 −1424

File changed.

Preview size limit exceeded, changes collapsed.

docs/html/guide/practices/ui_guidelines/icon_design_1.html

0 → 100644
+9 −0
Original line number Diff line number Diff line 
<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>

docs/html/guide/practices/ui_guidelines/icon_design_1.jd

deleted100644 → 0
+0 −1205

File deleted.

Preview size limit exceeded, changes collapsed.

docs/html/guide/practices/ui_guidelines/icon_design_dialog.jd

0 → 100644
+164 −0
Original line number Diff line number Diff line 
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>