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

Commit 21c7fe22 authored by Roman Nurik's avatar Roman Nurik Committed by Android Git Automerger
Browse files

am 483654fb: am 0a97435c: Merge "Update icon guidelines for Gingerbread. Also... 

am 483654fb: am 0a97435c: Merge "Update icon guidelines for Gingerbread. Also add new, revamped icon templates pack." into gingerbread

* commit '483654fb':
  Update icon guidelines for Gingerbread. Also add new, revamped icon templates pack.
parents 29f94b78 483654fb

docs/html/guide/guide_toc.cs

+25 −3
Original line number Diff line number Diff line
@@ -490,9 +490,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>