| page.title=Icon Design Guidelines, Android 2.0 |
| @jd:body |
| |
| <div id="qv-wrapper"> |
| <div id="qv"> |
| |
| <h2>Quickview</h2> |
| |
| <ul> |
| <li>You can use several types of icons in an Android application.</li> |
| <li>Your icons should follow the general specification in this document.</li> |
| <li>You should create separate icon sets for high-, medium-, and low-density screens.</li> |
| </ul> |
| |
| <h2>In this document</h2> |
| |
| <ol> |
| <li><a href="#launcherstructure">Launcher icon</a></li> |
| <li><a href="#menustructure">Menu icon</a></li> |
| <li><a href="#statusbarstructure">Status bar icon</a></li> |
| <li><a href="#tabstructure">Tab icon</a></li> |
| <li><a href="#dialogstructure">Dialog icon</a></li> |
| <li><a href="#listviewstructure">List view icon</a></li> |
| |
| <li style="margin-top:3px;"><a href="#design_tips">Tips for Designers</a></li> |
| <li><a href="#templatespack">Using the Icon Templates Pack</a></li> |
| |
| <li><a href="#iconappendix">Icon appendix</a> |
| <ol> |
| <li><a href="#launcherapx">Standard Launcher icons</a></li> |
| <li><a href="#menuapx">Standard Menu icons</a></li> |
| <li><a href="#statusbarapx">Standard Status bar icons</a></li> |
| </ol> |
| </li> |
| |
| </ol> |
| |
| <h2>Older versions</h2> |
| |
| <ol> |
| <li style="margin-top:4px;"><a |
| href="{@docRoot}guide/practices/ui_guidelines/icon_design_1.html">Icon Design |
| Guidelines, Android 1.0</a></li> |
| </ol> |
| |
| <h2>Downloads</h2> |
| |
| <ol> |
| <li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon |
| Templates Pack, v2.0 »</a></li> |
| <li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon |
| Templates Pack, v1.0 »</a></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>Creating a unified look and feel throughout a user interface adds value to |
| your product. Streamlining the graphic style will also make the UI seem more |
| professional to users.</p> |
| |
| <p>This document provides information to help you create icons for various parts |
| of your application’s user interface that match the general styles used by the |
| Android 2.x framework. Following these guidelines will help you to create a |
| polished and unified experience for the user.</p> |
| |
| <p>To get started creating your icons more quickly, you can download |
| the Android Icon Templates Pack. For more information, see |
| <a href="#templatespack">Using the Android Icon Template Pack</a>.</p> |
| |
| |
| <h2 id="icon-sets">Providing Density-Specific Icon Sets</h2> |
| |
| <p>Android is designed to run on a variety of devices that offer a range of |
| screen sizes and resolutions. When you design the icons for your application, |
| it's important keep in mind that your application may be installed on any of |
| those devices. As described in the <a |
| href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a> document, the Android platform makes it straightforward for you to |
| provide icons in such a way that they will be displayed properly on any device, |
| regardless of the device's screen size or resolution.</p> |
| |
| <p>In general, the recommended approach is to create a separate set of icons for |
| each of the three generalized screen densities listed in Table 1, below, then |
| store them in density-specific resource directories in your application. When |
| your application runs, the Android platform will check the characteristics of |
| the device screen and load icons from the appropriate density-specific |
| resources. For more information about how to store density-specific resources in |
| your application, see <a |
| href="{@docRoot}guide/practices/screens_support.html#qualifiers">Resource |
| directory qualifiers for screen size and density</a>. </p> |
| |
| <p>The baseline screen density for Android devices is medium |
| (<code>mdpi</code>). For this reason, a recommended approach to creating icon |
| sets for multiple screen densities is to:</p> |
| |
| <ol> |
| <li>Design the icons for the baseline density first (see Table 1 for the actual |
| pixel dimensions at which to design the icons). </li> |
| <li>Place the icons in the application's default drawable resources, then run |
| 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. |
| |
| <ul> |
| <li>Scale the baseline icons up 150% to create the high-density assets.</li> |
| <li>Scale the baseline icons down 75% to create the low-density assets.</li> |
| </ul></li> |
| |
| <li>Place the icons in density-specific resource directories in your |
| application. For example: |
| <ul> |
| <li>Medium-density assets go in a <code>res/drawable-mdpi/</code> |
| directory (or in the default <code>res/drawable/</code> directory),</li> |
| <li>High-density assets go in a <code>res/drawable-hdpi/</code> directory, |
| and</li> |
| <li>Low-density assets go in a <code>res/drawable-ldpi/</code> |
| directory.</li> |
| </ul></li> |
| <li>Test and adjust the high- and low-density icons if needed</li> |
| </ol> |
| |
| <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" 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 style="margin-top:2em;"> |
| <tbody> |
| <tr> |
| <th>Icon Type</th><th colspan="3">Standard Asset Sizes (in Pixels), for |
| Generalized Screen Densities</th></tr> |
| <tr> |
| <td></td> |
| <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> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| Launcher |
| </th> |
| <td style="font-size:.9em;"> |
| 36 x 36 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| <td style="font-size:.9em;"> |
| 72 x 72 px |
| </td> |
| </tr> |
| |
| <tr> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| Menu |
| </th> |
| <td style="font-size:.9em;"> |
| 36 x 36 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| <td style="font-size:.9em;"> |
| 72 x 72 px |
| </td> |
| </tr> |
| |
| <tr> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| Status Bar |
| </th> |
| <td style="font-size:.9em;"> |
| 24 x 24 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 32 x 32 px |
| </td> |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| </tr> |
| <tr> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| Tab |
| </th> |
| <td style="font-size:.9em;"> |
| 24 x 24 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 32 x 32 px |
| </td> |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| </tr> |
| <tr> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| Dialog |
| </th> |
| <td style="font-size:.9em;"> |
| 24 x 24 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 32 x 32 px |
| </td> |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| </tr> |
| <tr> |
| <th style="background-color:#f3f3f3;font-weight:normal"> |
| List View |
| </th> |
| <td style="font-size:.9em;"> |
| 24 x 24 px |
| </td> |
| |
| <td style="font-size:.9em;"> |
| 32 x 32 px |
| </td> |
| <td style="font-size:.9em;"> |
| 48 x 48 px |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2 id="launcherstructure">Launcher Icon</h2> |
| |
| <p>A Launcher icon is a graphic that represents your application on the device’s |
| Home screen and in the Launcher window. </p> |
| |
| <p>The user opens the Launcher by touching the icon at the bottom of the Home |
| screen. The Launcher opens and exposes the icons for all of the installed |
| applications, which are arranged in a grid. The user selects an application and |
| opens it by touching the Launcher icon or by means of any hardware navigation |
| controls available, such as a trackball or d-pad. </p> |
| |
| <p>The user can also drag an icon out of the Launcher window and onto the Home |
| screen itself, for more convenient access to the application. In this case, the |
| system displays your application's Launcher icon against the Home screen |
| wallpaper, rendering it at the same dimensions as it is rendered inside the |
| Launcher.</p> |
| |
| <p>The system manages the scaling of all Launcher icons so that they rendered at |
| a uniform height and width. The actual pixel dimensions of the rendered Launcher |
| icons on any given device varies, based on the size and pixel-density |
| characteristics of the device's screen. To ensure the best possible rendering |
| for your icons, supply versions of the icons that are designed for low, medium, |
| and high density screens. For information, see <a |
| href="#icon_sets">Providing Density-Specific Icon Sets</a>, above, or <a |
| href="#design_tips">Tips for Designers</a>, below.</p> |
| |
| <h3 id="style">Style</h3> |
| |
| <p>The launcher icons that you create should follow the general style principles |
| below. The guidelines aren't meant to restrict what you can do with your icons, |
| but rather they are meant to emphasize the common approaches that your icons can |
| share with others on the device. Figure 1, at right, provides examples. </p> |
| |
| <div class="figure" style="padding:3em"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_Icons_i.png" |
| width="340"> |
| <p class="caption" style="margin:0;padding:0;margin-left:36px;"> |
| <strong>Figure 1.</strong> Illustration of Launcher icon style.</p> |
| </div> |
| |
| <p>Clean and contemporary:</p> |
| |
| <ul> |
| <li>Launcher icons should be current and sometimes quirky, but they should not |
| appear aged or ragged. You should avoid overused symbolic metaphors whenever |
| possible.</li> |
| </ul> |
| |
| <p>Simple and iconic:</p> |
| <ul> |
| <li> Android Launcher icons are caricatural in nature; your icons should be |
| highly simplified and exaggerated, so that they are appropriate for use at small |
| sizes. Your icons should not be overly complicated. </li> |
| <li>Try featuring a single part of an application as a symbolic |
| representation of the whole (for example, the Music icon features a speaker). |
| </li> |
| <li>Consider using natural outlines and shapes, both geometric and organic, |
| with a realistic (but never photorealistic) rendering. </li> |
| <li>Your icons <em>should not</em> present a cropped view of a larger |
| image.</li> |
| </ul> |
| |
| <p>Tactile and textured:</p> |
| <ul> |
| <li>Icons should feature non-glossy, textured material. See |
| <a href="#materials-colors">Materials and colors</a>, below, for more |
| information.</li> |
| </ul> |
| |
| <p>Forward-facing and top-lit:</p> |
| <ul> |
| <li><em>New for Android 2.0 and later platforms</em>: Android Launcher |
| icons should be forward-facing, with very little perspective, and they |
| should be top-lit.</li> |
| </ul> |
| |
| Additionally, note all icons will have separate text labels, so rather than |
| working to include embedded text in the design of of your icons, focus your |
| efforts on the icon's visual distinctiveness and memorability instead.</p> |
| |
| <p>To look at more examples of the Launcher icons used by built-in Android |
| applications, see <a href="#launcherapx">Standard Launcher Icons</a> in the |
| Icons Appendix of this document. </p> |
| |
| |
| |
| <h3 id="dodonts">Do's and Don'ts</h3> |
| |
| <p>Below are some "do and don't" examples to consider when creating icons for |
| your application. </p> |
| |
| |
| <table> |
| <tr> |
| <td style="border:0;width:50%;"> |
| |
| <h4>Android Launcher icons are...</h4> |
| |
| <ul> |
| <li>Modern, minimal, matte, tactile, and textured</li> |
| <li>Forward-facing and top-lit, whole, limited in color |
| palette</li> |
| </ul> |
| </td> |
| <td style="border:0;width:50%;"> |
| |
| <h4>Android Launcher icons are not...</h4> |
| |
| <ul> |
| <li>Antique, over-complicated, glossy, flat vector</li> |
| <li>Rotated, Cropped, Over-Saturated</li> |
| </ul> |
| </td> |
| </tr> |
| <tr> |
| </table> |
| |
| <div style="margin-left:2em"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_DosDonts.png" alt="Side-by-side examples |
| of good/bad icon design." /> |
| <p class="caption" style="margin-top:.5em;"> |
| <strong>Figure 2.</strong> Side-by-side examples of "do's and don'ts" for |
| Android launcher icons. </p> |
| </div> |
| |
| <h3 id="materials-colors">Materials and colors</h3> |
| |
| <p>Launcher icons should make use of tactile, top-lit, textured materials. Even |
| if your icon is just a simple shape, you should try to render in a way that |
| makes it appear to be sculpted from some real-world material.</p> |
| |
| <p>The Launcher icons for the platform's default applications use the set of |
| materials shown in Figure 3, below. Your icons can use these materials or you |
| can create new materials.</p> |
| |
| <p>Android launcher icons usually consist of a smaller shape within a |
| larger base shape and combine one neutral and one primary color. Icons may |
| use a combination of neutral colors but should maintain a fairly high level of |
| contrast. Icons should not use more than one primary color per icon, if |
| possible.</p> |
| |
| <p>Launcher icons should use a limited color palette that includes a range |
| of neutral and primary colors. The icons should not be over-saturated.</p> |
| |
| <p>The recommended color palette to use for Launcher icons is shown in Figure 4. |
| You can use elements of the palette for both the base color and the highlight |
| color. You can use the colors of the palette in conjunction with a |
| white-to-black vertical linear gradient overlay. This creates the impression |
| that the icon is lit from above and keeps the color less saturated.</p> |
| |
| |
| |
| <div style="margin:2em"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_Materials.png" width="450" style="padding-top:2px;"> |
| <p class="caption" style="margin-top:.5em;"> |
| <strong>Figure 3.</strong> Example materials that you can use to create |
| your icons.</p> |
| </div> |
| |
| <div style="margin:2em"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_AccentColor.png" width="450"> |
| <p class="caption" xstyle="margin-top:.5em;"> |
| <strong>Figure 4.</strong> Examples of materials combined with base |
| and highlight colors from the recommended palette.</p> |
| </div> |
| |
| |
| <p>When you combine the materials above with a color highlight from the |
| recommended pallete, you can create materials combinations such as those shown |
| in Figure 5. To get you started, the <a href="#templatespack">icons pack</a> |
| includes a Photoshop template file (<code>Launcher-icon-template.psd</code>) |
| that provides all of the default materials, colors, and gradients. </p> |
| |
| <div style="margin:2em"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_Colors.png" width="450" style="padding-top:2px;"> |
| <p class="caption" style="margin-top:.5em;"> |
| <strong>Figure 5.</strong> Recommended color palette for icons.</p> |
| </div> |
| |
| |
| <h3 id="size">Size and positioning</h3> |
| |
| <p>Launcher icons should use a variety of shapes and forms and those must be |
| scaled and positioned to create consistent visual weight.</p> |
| |
| <p>Launcher icons should use a variety of shapes and forms and those must be |
| scaled and positioned inside the asset to create consistent visual weight with |
| other </p> |
| |
| <p>Figure 6 illustrates various ways of positioning the icon inside the asset. |
| As detailed in the table below, you should size the icons <em>smaller than the |
| actual bounds of the asset</em>, to create a consistent visual weight and to |
| allow for the inclusion of shadows. If your icon is square or nearly square, it |
| should be scaled even smaller.</p> |
| |
| |
| <ul> |
| <li>The bounding box for the full asset is shown in red.</li> |
| <li>The recommended bounding box for the actual icon itself is shown in blue. |
| The icon box is sized smaller than the full asset box so that there is space to |
| include shadows and special icon treatments. </li> |
| <li>The recommended bounding box for an icon that is square is shown in orange. |
| The box for square icons is smaller than that for other icons to establish a |
| consistent visual weight across the two types.</li> |
| </ul> |
| |
| <table style="margin:2.5em 0 1em 0;"> |
| <tr> |
| |
| <td style="border:0;padding-left:72;"> |
| <ol class="nolist"> |
| <li>Icon dimensions for high-density (<code>hdpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 72 x 72 px</li> |
| <li>Icon: 60 x 60 px</li> |
| <li>Square Icon: 56 x 56 px</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| <td style="border:0;"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_OpticalSize_l.png" |
| style="padding:0;margin:0;" width="450"> |
| </td> |
| </tr> |
| <tr> |
| <td style="border:0;"> |
| <ol class="nolist"> |
| <li>Icon Dimensions for medium-density (<code>mdpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 48 x 48 px</li> |
| <li>Icon: 40 x 40 px</li> |
| <li>Square Icon: 38 x 38 px</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| |
| <td style="border:0;padding-left:72;"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_OpticalSize_s.png" |
| style="padding:0;margin:0;" width="450"> |
| </td> |
| </tr> |
| <tr> |
| <td style="border:0;"> |
| <ol class="nolist"> |
| <li>Icon Dimensions for low-density (<code>ldpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 36 x 36 px</li> |
| <li>Icon: 30 x 30 px</li> |
| <li>Square Icon: 28 x 28 px</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| |
| <td style="border:0;padding-left:72;"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_OpticalSize_ldpi.png" |
| style="padding:0;margin:0;" width="450"> |
| |
| <p class="caption" style="margin:0;padding:0;margin-top:1.5em;"><strong>Figure |
| 6.</strong> Icon sizing and positioning inside the bounds of the |
| icon asset.</p> |
| </td> |
| </tr> |
| |
| </table> |
| |
| |
| |
| <h3>Using the Launcher Icon Template</h3> |
| |
| <p>Included in the Android Icon Templates Pack 2.0 is a template containing |
| palettes for default icon materials and colors. The template is provided in .psd |
| format for Adobe Photoshop or similar raster image editor. </p> |
| |
| <p>To get started, first <a |
| href="{@docRoot}shareables/icon_templates-v2.0.zip">download the Android Icon |
| Templates Pack 2.0 »</a>. </p> |
| |
| <p>Once you've downloaded the pack, unzip it and open the file |
| <code>Launcher-icon-template.psd</code> in Adobe Photoshop or similar raster |
| image editing program. Notice the palettes for materials and colors. You can |
| use as the template as a starting point for creating your Launcher icons. </p> |
| |
| <p>After you create your icon, you can add a shadow effect according to the |
| specification below, as appropriate for the size of image you are creating. </p> |
| |
| |
| <table style="margin:2.5em 0 1em 0;"> |
| <tr> |
| |
| <td style="border:0;padding-left:72;"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_Shadow_WVGA.png" |
| style="padding:0;margin:0;" width="450"> |
| </td> |
| <td style="border:0;"> |
| <p style="padding-top:.5em;">Shadow for WVGA (high density) sreens:</p> |
| <ol class="nolist"> |
| <li>Effect: Drop Shadow</li> |
| <li>Color: #000000</li> |
| <li>Blend Mode: Multiply</li> |
| <li>Opacity: 75%</li> |
| <li>Angle: 90°</li> |
| <li>Distance: 2px</li> |
| <li>Spread: 0% </li> |
| <li>Size: 5px </li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| <tr> |
| <td style="border:0;padding-left:72;"> |
| <img src="{@docRoot}images/icon_design/IconGraphic_Shadow_HVGA.png" |
| style="padding:0;margin:0;" width="450"> |
| </td> |
| |
| <td style="border:0;"> |
| <p style="padding-top:.5em;">Shadow for HVGA (medium density) sreens:</p> |
| <ol class="nolist"> |
| <li>Effect: Drop Shadow</li> |
| <li>Color: #000000</li> |
| <li>Blend Mode: Multiply</li> |
| <li>Opacity: 75%</li> |
| <li>Angle: 90°</li> |
| <li>Distance: 1px</li> |
| <li>Spread: 0% </li> |
| <li>Size: 3px </li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| </tr> |
| </table> |
| |
| <p>When the shadow is added and the icon is complete, export it as a PNG file |
| with transparency enabled, ensuring that you size the icon at 72 x 72px for |
| high-density screens and 48 x 48px for medium density screens. For more |
| information about why you should provide different Launcher assets for high-, |
| medium, and low-density screens, see <a |
| href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a>.</p> |
| |
| |
| |
| <h2 id="menustructure">Menu icon</h2> |
| |
| <p>Menu icons are graphical elements placed in the pop-up menu shown to users |
| 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> |
| <li>In order to maintain consistency, all menu icons must use the same |
| primary palette and the same effects. For more information, see the |
| menu icon <a href="#menupalette">color palette</a>. </li> |
| |
| <li>Menu icons should include rounded corners, but only when logically |
| appropriate. For example, in Figure 7 the logical place for rounded corners is |
| the roof and not the rest of the building.</span></li> |
| |
| <li>All dimensions specified on this page are based on a 48x48 pixel artboard |
| size with a 6 pixel safeframe.</li> |
| |
| <li>The menu icon effect (the outer glow) described in <a |
| href="#menulight">Light, effects, and shadows</a> can overlap the 6px safeframe, |
| but only when necessary. The base shape must always stay inside the |
| safeframe.</li> |
| |
| <li><strong>Final art must be exported as a transparent PNG file.</strong></li> |
| |
| <li>Templates for creating menu icons in Adobe Photoshop are available in the |
| Icon Templates Pack.</li> |
| </ul> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <img src="{@docRoot}images/icon_design/menu_structure.png" alt="A view of menu |
| icon structure." /> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 7. </strong>Safeframe and corner-rounding for menu |
| icons. Icon size is 48x48.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h4 id="menulight">Light, effects, and shadows</h4> |
| |
| <p>Menu icons are flat and pictured face on. A slight deboss and some other |
| effects, which are shown below, are used to create depth.</p> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/menu_light.png" alt="A view of light, effects, and shadows for menu icons."/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 8. </strong>Light, effects, and shadows for menu icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> |
| <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20 % opacity<br>angle 90° | distance 2px<br>size 2px</td></tr> |
| <tr><td><em>3.</em></td><td>Outer glow:</td><td>white | 55% opacity <br>spread 10% | size 3px</td></tr> |
| <tr><td><em>5.</em></td><td>Inner bevel:</td><td>depth 1% | direction down size 0px<br>angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menupalette">Color palette</h4> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for outer glow and bevel highlight.</td> |
| </tr> |
| |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, medium gradient" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill.</td> |
| </tr> |
| |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for inner shadow and bevel shadow.</td> |
| </tr> |
| |
| </table> |
| |
| </td> |
| |
| <td style="border:0;width:350px"> |
| |
| <h4 id="menusteps">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 48x48 px on a transparent background. Mind the safeframe.</li> |
| <li>Add the effects seen as described in Figure 8.</li> |
| <li>Export the icon at 48x48 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |
| |
| <h4 id="dodonts_menu">"Do's and don'ts"</h4> |
| |
| <p>Below are some "do and don't" examples to consider when creating menu icons for |
| your application. </p> |
| |
| |
| <img src="{@docRoot}images/icon_design/do_dont_menuicons.png" style="padding:0;margin:0;padding-right:30%" width="400"> |
| |
| |
| <h2 id="statusbarstructure">Status bar icon</h2> |
| |
| <p>Status bar icons are used to represent notifications from your application in |
| 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> |
| <li>Rounded corners must always be applied to the base shape and to the details |
| of a status bar icon shown Figure 9.</li> |
| |
| <li>All dimensions specified are based on a 25x25 pixel artboard size with a 2 |
| pixel safeframe.</li> |
| |
| <li>Status bar icons can overlap the safeframe to the left and right when |
| necessary, but must not overlap the safeframe at the top and bottom.</li> |
| |
| <li><strong>Final art must be exported as a transparent PNG file.</strong></li> |
| |
| <li>Templates for creating status bar icons using Adobe Photoshop are available |
| in the Icon Templates Pack.</li> |
| </ul> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <img src="{@docRoot}images/icon_design/statusbar_structure.png" alt="A view of |
| status bar icon structure." /> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 9. </strong>Safeframe and corner-rounding for status bar |
| icons. Icon size is 25x25.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h4 id="statusbarlight">Light, effects, and shadows</h4> |
| |
| <p>Status bar icons are slightly debossed, high in contrast, and pictured |
| face-on to enhance clarity at small sizes.</p> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/statusbar_light.png" alt="A view of |
| light, effects, and shadows for status bar icons."/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 10. </strong>Light, effects, and shadows for status bar icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from primary color palette</td></tr> |
| <tr><td><em>2.</em></td><td>Inner bevel:</td><td>depth 100% | direction down<br>size 0px | angle 90° |<br>altitude 30°<br>highlight white 75% opacity<br>shadow black 75% opacity</td></tr> |
| <tr><td><em>3.</em></td><td>Detail:</td><td>white</td></tr> |
| <tr><td><em>4.</em></td><td>Disabled detail:</td><td>grey gradient from palette<br>+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | <br>altitude 42° | highlight white 70% | no shadow</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menupalette">Color palette</h4> |
| |
| <p>Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.</p> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png" alt="Color palette, white" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">White<br>r 255 | g 255 | b 255<br>Used for details within the icons and bevel highlight.</td> |
| </tr> |
| |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_grey.png" alt="Color palette, grey gradient" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Grey gradient<br><em>1: </em>r 169 | g 169 | b 169<br><em>2: </em>r 126 | g 126 | b 126<br>Used for disabled details within the icon.</td> |
| </tr> |
| |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_fill.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>1 r 105 | g 105 | b 105<br><em>2: </em>r 10 | g 10 | b 10<br>Used as color fill.</td> |
| </tr> |
| |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_black.png" alt="Color palette, black" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td> |
| </tr> |
| |
| </table> |
| |
| </td> |
| |
| <td style="border:0;width:350px"> |
| |
| <h4 id="menusteps">Step by step</h4> |
| |
| <ol> |
| <li>In a tool like Adobe Photoshop, create the base shape within a 25x25 px |
| image on a transparent background. Mind the safeframe, and keep the upper and |
| lower 2 pixels free.</li> |
| <li>Add rounded corners as specified in Figure 9.</li> |
| <li>Add light, effects, and shadows as specified in Figure 10.</li> |
| <li>Export the icon at 25x25 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h4 id="dodonts_status">"Do's and don'ts"</h4> |
| |
| <p>Below are some "do and don't" examples to consider when creating status bar icons for |
| your application. </p> |
| |
| |
| <img src="{@docRoot}images/icon_design/do_dont_statusicons.png" style="padding:0;margin:0;padding-right:30%" width="400"> |
| |
| |
| |
| <h2 id="tabstructure">Tab icon</h2> |
| |
| <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> |
| <li>Unselected tab icons have the same fill gradient and effects as menu icons, |
| but with no outer glow.</li> |
| |
| <li>Selected tab icons look just like unselected tab icons, but with a fainter |
| inner shadow, and have the same front part gradient as dialog icons.</li> |
| |
| <li>Tab icons have a 1 px safeframe which should only be overlapped for the edge |
| of the anti-alias of a round shape.</li> |
| |
| <li>All dimensions specified on this page are based on a 32x32 px artboard size. |
| Keep 1 px of padding around the bounding box inside the Photoshop template.</li> |
| |
| <li><strong>Final art must be exported as a 32x32 px transparent PNG |
| file.</strong></li> |
| |
| <li>Templates for creating tab icons in Adobe Photoshop are available in the |
| Icon Templates Pack.</li> |
| </ul> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <img src="{@docRoot}images/icon_design/tab_icon_unselected.png" alt="A view of |
| unselected tab icon structure." /> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 11. </strong>Safeframe and fill gradient for unselected tab |
| icons. Icon size is 32x32.</p> |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <img src="{@docRoot}images/icon_design/tab_icon_selected.png" alt="A view of |
| selected tab icon structure." /> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 12. </strong>Safeframe and fill gradient for tab icons in |
| selected state. Icon size is 32x32.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <h3 id="unselectedtabdetails">Unselected tab icon</h3> |
| |
| <h4 id="unselectedtablight">Light, effects, and shadows</h4> |
| |
| <p>Unselected tab icons look just like the selected tab icons, but with a |
| fainter inner shadow, and the same front part gradient as the dialog icons.</p> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/tab_unselected_light.png" alt="A view |
| of light, effects, and shadows for unselected tab icons."/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 13. </strong>Light, effects, and shadows for unselected |
| tab icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<br>bottom color: r 223 | g 223 | b 223<br>top color: 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 | 10 % opacity | angle 90° distance 2px | size 2px</td></tr> |
| <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menusteps">Step by step</h4> |
| |
| <ol> |
| <li>Create the basic shapes using a tool like Adobe Illustrator.</li> |
| <li>Import the shape to 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 13 for the unselected state filter.</li> |
| <li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |
| |
| <h3 id="selectedtabdetails">Selected tab icon</h3> |
| |
| <p>The selected tab icons have the same fill gradient and effects as the menu |
| icon, but with no outer glow.</p> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/tab_selected_light.png" alt="A view of |
| light, effects, and shadows for selected tab icons."/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 14. </strong>Light, effects, and shadows for selected tab |
| icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>Use fill gradient from color palette.</td></tr> |
| <tr><td><em>2.</em></td><td>Inner shadow:</td><td>black | 20% opacity | <br>angle 90° | distance 2px | <br>size 2px</td></tr> |
| <tr><td><em>3.</em></td><td>Inner bevel:</td><td>depth 1% | direction down | size 0px | angle 90° | <br>altitude 10°<br>highlight white 70% opacity<br>shadow black 25% opacity</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menupalette">Color palette</h4> |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/menu_palette_gradient_medium.png" alt="Color palette, fill gradient" style="margin:.5em 0 0 0;" /></td> |
| <td class="image-caption-c" style="padding-top:.5em;">Fill gradient<br><em>1: </em>r 163 | g 163 | b 163<br><em>2: </em>r 120 | g 120 | b 120<br>Used as color fill on unselected tab icons.</td> |
| </tr> |
| |
| </table> |
| |
| </td> |
| |
| <td style="border:0;width:350px"> |
| |
| <h4 id="menusteps">Step by step</h4> |
| |
| <ol> |
| <li>Create the basic shape using a tool like Adobe Illustrator.</li> |
| <li>Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 |
| px artboard with a transparent background. </li> |
| <li>Add the effects seen in Figure 14 for the selected state filter.</li> |
| <li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h2 id="dialogstructure">Dialog icon</h2> |
| |
| <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-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> |
| <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. <span |
| class="body-copy"></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> |
| |
| <li><strong>Final art must be exported as a transparent PNG file.</strong></li> |
| |
| <li>Templates for creating dialog icons in Adobe Photoshop are available in the |
| Icon Templates Pack.</li> |
| </ul> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <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 15. </strong>Safeframe and fill gradient for dialog icons. |
| Icon size is 32x32.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h4 id="dialoglight">Light, effects, and shadows</h4> |
| |
| <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 16. </strong>Light, effects, and shadows for dialog |
| icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Front part:</td><td>gradient overlay | angle 90°<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° | distance 1px | size 0px</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <table style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menusteps">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 16 for the proper filter.</li> |
| <li>Export the icon at 32x32 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h2 id="listviewstructure">List view icon</h2> |
| |
| <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 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> |
| <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> |
| |
| <li><strong>Final art must be exported as a transparent PNG file.</strong></li> |
| |
| <li>Templates for creating list view icons in Adobe Photoshop are available in |
| the Icon Templates Pack. </li> |
| </ul> |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i" style="padding-right:0"> |
| <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 17. </strong>Safeframe and fill gradient for list view |
| icons. Icon size is 32x32.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| <h4 id="listviewlight">Light, effects, and shadows</h4> |
| |
| <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 18. </strong>Light, effects, and shadows for list view |
| icons.</p> |
| <div class="image-caption-nested"> |
| <table style="margin-top:0;"> |
| <tr><td style="padding-right:1em"><em>1.</em></td><td>Inner shadow:</td><td>black | 57 % opacity | angle 120° | 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 style="margin:0px;padding:0px;"> |
| <tr> |
| <td style="border:0;width:350px;"> |
| |
| <h4 id="menusteps">Step by step</h4> |
| |
| <ol> |
| <li>Add the effects seen in Figure 18 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> |
| |
| <h2 id="design_tips">Tips for Designers</h2> |
| |
| <p>Here are some tips that you might find useful as you develop icons or other |
| drawable assets for your application. The tips assume that you are using |
| Photoshop or similar raster image-editing program.</p> |
| |
| <h4>Use common naming conventions for icon assets</h4> |
| |
| <p>Try to name files so that related assets will group together inside a |
| directory when they are sorted alphabetically. In particular, it helps to use a |
| common prefix for each icon type. For example:</p> |
| |
| <table> |
| <tr> |
| <th>Asset Type</th> |
| <th>Prefix</th> |
| <th>Example</th> |
| </tr> |
| <tr> |
| <td>Icons</td> |
| <td><code>ic_</code></td> |
| <td><code>ic_star.png</code></td> |
| </tr> |
| <tr> |
| <td>Launcher icons</td> |
| <td><code>ic_launcher</code></td> |
| <td><code>ic_launcher_calendar.png</code></td> |
| </tr> |
| <tr> |
| <td>Menu icons</td> |
| <td><code>ic_menu</code></td> |
| <td><code>ic_menu_archive.png</code></td> |
| </tr> |
| <tr> |
| <td>Status bar icons</td> |
| <td><code>ic_stat_sys</code> or <code>ic_stat_notify</code></td> |
| <td><code>ic_stat_notify_msg.png</code></td> |
| </tr> |
| <tr> |
| <td>Tab icons</td> |
| <td><code>ic_tab</code></td> |
| <td><code>ic_tab_recent.png</code></td> |
| </tr> |
| <tr> |
| <td>Dialog icons</td> |
| <td><code>ic_dialog</code></td> |
| <td><code>ic_dialog_info.png</code></td> |
| </tr> |
| </table> |
| |
| <p>Note that you are not required to use a shared prefix of any type — |
| doing so is for your convenience only.</p> |
| |
| |
| <h4>Set up a working space that organizes files for multiple densities</h4> |
| |
| <p>Developing multiple sets of assets for different screen densities means |
| creating multiple copies of files. To help keep the multiple copies of files |
| safe and easier to find, we recommend creating a directory structure in your |
| working space that organizes asset files per resolution. For example:</p> |
| |
| <pre>assets/... |
| ldpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png |
| mdpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png |
| hdpi/... |
| _pre_production/... |
| <em>working_file</em>.psd |
| <em>finished_asset</em>.png</pre> |
| |
| <p>This structure parallels the density-specific structure in which you will |
| ultimately store the finished assets in your application's resources. Because |
| the structure in your working space is similar to that of the application, you |
| can quickly determine which assets should be copied to each application |
| resources directory. Separating assets by density also helps you detect any |
| variances in filenames across densities, which is important because |
| corresponding assets for different densities must share the same filename.</p> |
| |
| <p>For comparison, here's the resources directory structure of a typical |
| application: </p> |
| |
| <pre>res/... |
| drawable-ldpi/... |
| <em>finished_asset</em>.png |
| drawable-mdpi/... |
| <em>finished_asset</em>.png |
| drawable-hdpi/... |
| <em>finished_asset</em>.png</pre> |
| |
| |
| <h4>Create medium-density assets first</h4> |
| |
| <p>Since medium density is the baseline for Android, begin your designing work |
| by creating the <code>mdpi</code> assets. See <a href="#screens-table">Table |
| 1</a>, above, for the actual pixel dimensions of various icon types. When |
| possible, use vector art or paths within Photoshop layers so that it will be |
| easier to scale the assets up or down later.</p> |
| |
| <p>For each discreet asset, or set of like assets that share the same bounding |
| box dimensions, create a working Photoshop file and save it in the |
| <code>_pre_production</code> directory. For example: |
| <code>ic_tabs_phone_mdpi.psd</code>. This will make it easier to locate and edit |
| individual assets if changes are required. It's also helpful to use a |
| density-specific suffix in the filename for the working file, to avoid confusion |
| when editing the files. For example: <code>_mdpi.psd</code>.</p> |
| |
| <p>From the <code>mdpi</code> working files, save individual flattened assets to |
| the corresponding density-specific resource directory (in this case, |
| <code>mdpi/</code>) in your working space.</p> |
| |
| |
| <h4>Create high- and low-density assets from the medium-density sources</h4> |
| |
| <p>When you are finished working with your medium-density assets, copy the |
| working files from the your workspace's <code>mdpi/_pre_production</code> |
| directory to the corresponding locations in the <code>ldpi</code> and |
| <code>hdpi</code> directories. If any of the working files use a |
| density-specific suffix, rename the suffix to match the intended density.</p> |
| |
| <p>Next, open each working file in the high- and low-density directories and |
| scale the image up or down to match the intended density. To create an |
| <code>hdpi</code> asset, scale the image by 150%. To create an <code>ldpi</code> |
| asset, scale the image down by 75%. To scale the images, follow these steps:</p> |
| |
| <ol> |
| <li>Open the working file in Photoshop or similar program.</li> |
| <li>Under the <strong>Image</strong> menu, choose <strong>Image Size</strong>.</li> |
| <li>On the Image Size panel, change the Width pop up menu to "percent."</li> |
| <li>Change the Width value to "150" for <code>hdpi</code> assets and "75" for <code>ldpi</code> assets.</li> |
| <li>Select the Scale Styles checkbox.</li> |
| <li>Select the Constrain Proportions checkbox.</li> |
| <li>Select the Resample Image checkbox and set the pop up menu to "Bicubic (Best for smooth gradients)."</li> |
| <li>Click <strong>OK</strong>.</li> |
| </ol> |
| |
| <p>After you scale each image, save it to the target density-specific resource |
| directory.</p> |
| |
| <p>If you are scaling a nine-patch image, see the section below for notes on how |
| to handle the tick marks at the edge of the image. </p> |
| |
| |
| <h4>After scaling, redraw bitmap layers as needed</h4> |
| |
| <p>If you scaled an image up from a bitmap layer, rather than from a vector |
| layer, those layers may need to be redrawn manually to accommodate the higher |
| density. For example if a 60x60 circle was painted as a bitmap for |
| <code>mdpi</code> it will need to be repainted as a 90x90 circle for |
| <code>hdpi</code>.</p> |
| |
| |
| <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 |
| scale a nine-patch image, the tick marks are also scaled, which produces an |
| inaccurate result. The recommended way to handle the scaling of nine-patch |
| images is to remove the tick marks from the source image before scaling and then |
| manually replace the tick marks at the proper size after scaling.</p> |
| |
| <p>To more easily determine the tick marks after the working file has been |
| scaled to a new resolution, first create a temporary duplicate flattened image |
| which includes the tick marks: </p> |
| |
| <ol> |
| <li>Under the <strong>Select</strong> menu choose <strong>All</strong>.</li> |
| <li>Under the <strong>Edit</strong> menu choose |
| <strong>Copy Merged</strong>.</li> |
| <li>Under the <strong>File</strong> menu choose <strong>New</strong> and then |
| click <strong>OK</strong> on the new panel.</li> |
| <li>Under the <strong>Edit</strong> choose <strong>Paste</strong>.</li> |
| </ol> |
| |
| <p>After creating the temporary copy, go back to the working file and crop |
| the tick marks out of the working file before scaling the image:</p> |
| <ol> |
| <li>Under the <strong>Image</strong> menu, choose the |
| <strong>Canvas Size</strong> command.</li> |
| <li>On the Canvas Size panel, subtract 2 pixels from the Width and |
| Height values.</li> |
| <li>Set the Anchor to "Center."</li> |
| <li>Click <strong>OK</strong></li> |
| </ol> |
| |
| <p>Scale the working file to the target density. With the working file scaled |
| and the canvas enlarged so that the tick marks can be repainted:</p> |
| |
| <ol> |
| <li>Under the <strong>Image</strong> menu, choose the |
| <strong>Canvas Size</strong> command.</li> |
| <li>On the <strong>Canvas Size</strong> panel, add 2 pixels to the Width |
| and Height values.</li> |
| <li>Set the Anchor to "Center."</li> |
| <li>Click <strong>OK</strong>.</li> |
| </ol> |
| |
| <p>To determine tick marks, go back to duplicate flattened image and scale it to |
| the target resolution. </p> |
| |
| <p>Copy the scaled duplicate flattened image into a new layer in the working |
| 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 nine-patch image |
| correctly. </p> |
| |
| <p>Using the scaled duplicate flattened image as reference paint new tick marks |
| in the new layer that align with the reference layer. Note round up pixels for |
| tick marks. Any pixels that are partially opaque in the reference layer should |
| be fully opaqe in the new layer.</p> |
| |
| |
| <h4>Adjust stroke and drop shadow after scaling an image</h4> |
| |
| <p>While it is desirable to scale layer styles for the most part (such as for |
| Gradient Overlay or Inner Glow), you may need to manually reset the Stroke and |
| Drop Shadow in the scaled image to 1 px before saving, especially when scaling |
| to <code>hdpi</code>. |
| |
| <h4>Save nine-patch images with the appropriate filename suffix</h4> |
| |
| <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> |
| |
| |
| <h4>When saving image assets, remove the Photoshop header</h4> |
| |
| <p>To help keep each image asset as small as possible, make sure to remove the |
| Photoshop headers from the file. To remove the Photoshop header, follow these |
| steps: </p> |
| |
| <ol> |
| <li>Under the <strong>File</strong> menu, choose the <strong>Save for Web & |
| Devices</strong> command </li> |
| <li>On the "Save for Web & Devices" panel, set the Preset pop-up to |
| "PNG-24," set the pop-up under Presets to "PNG-24" as well, and select the |
| Transparency box (if the image uses transparency)</li> |
| <li>Select <strong>Save</strong>.</li> |
| </ol> |
| |
| <h4>Make sure that corresponding assets for different densities use the same |
| 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 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> |
| |
| <h2 id="templatespack">Using the Android Icon Templates Pack</h2> |
| |
| <p>The Android Icon Templates Pack is a collection of template designs, filters, |
| and settings that make it easier for you to create icons that conform to the |
| general specifications given in this document. We recommend downloading the |
| template pack archive before you get started with your icon design.</p> |
| |
| <p>The icon templates are provided in Adobe Photoshop and Adobe Illustrator file |
| formats, which preserves the layers and design treatments we used when creating the |
| standard icons for the Android platform. You can load the template files into any |
| compatible image-editing program, although your ability to work directly with the |
| layers and treatments may vary based on the program you are using.</p> |
| |
| <p>You can obtain the Icon Templates Pack archive using the link below: </p> |
| |
| <p style="margin-left:2em"><a |
| href="{@docRoot}shareables/icon_templates-v2.0.zip">Download the Icon Templates |
| Pack »</a> |
| |
| |
| <h2 id="iconappendix">Icon appendix</p> |
| |
| <h3 id="launcherapx">Standard launcher icons</h3> |
| |
| <p>Shown below are examples of launcher icons used by Android applications. The |
| icons are provided for your reference only — please do not reuse these |
| icons in your applications.</code>. |
| |
| <img src="{@docRoot}images/icon_design/IconGraphic_Icons.png" style="margin-top:2em;" /> |
| |
| |
| <h3 id="menuapx">Standard menu icons</h3> |
| |
| <p>Shown below are standard menu icons that are used in the Android |
| system. Because these resources can change between platform versions, you |
| should not reference the system's copy of the resources. If you want |
| use any icons or other internal drawable resources, you should store a |
| local copy of those icons or drawables in your application resources, |
| then reference the local copy from your application code. In that way, you can |
| maintain control over the appearance of your icons, even if the system's |
| copy changes. Note that the list below is not intended to be complete.</p> |
| |
| |
| <table class="image-caption"> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_add.png" title="ic_menu_add" alt="Android asset" /> |
| <div class="caption">Add</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_call.png" title="ic_menu_call" alt="Android asset" /> |
| <div class="caption">Call</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_camera.png" title="ic_menu_camera" alt="Android asset" /> |
| <div class="caption">Camera</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_close_clear_cancel.png" title="ic_menu_close_clear_cancel" alt="Android asset" /> |
| <div class="caption">Clear / Close / Cancel / Discard </div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_compass.png" title="ic_menu_compass" alt="Android asset" /> |
| <div class="caption">Compass</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_delete.png" title="ic_menu_delete" alt="Android asset" /> |
| <div class="caption">Delete</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_directions.png" title="ic_menu_directions" alt="Android asset" /> |
| <div class="caption">Directions</div></td> |
| |
| </tr> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_edit.png" title="ic_menu_edit" alt="Android asset" /> |
| <div class="caption">Edit</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_gallery.png" title="ic_menu_gallery" alt="Android asset" /> |
| <div class="caption">Gallery</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_help.png" title="ic_menu_help" alt="Android asset" /> |
| <div class="caption">Help</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_info_details.png" title="ic_menu_info_details" alt="Android asset" /> |
| <div class="caption">Info / details</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_mapmode.png" title="ic_menu_mapmode" alt="Android asset" /> |
| <div class="caption">Map mode</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_mylocation.png" title="ic_menu_mylocation" alt="Android asset" /> |
| <div class="caption">My Location</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_more.png" title="ic_menu_more" alt="Android asset" /> |
| <div class="caption">More</div></td> |
| |
| </tr> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_preferences.png" title="ic_menu_preferences" alt="Android asset" /> |
| <div class="caption">Preferences</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_rotate.png" title="ic_menu_rotate" alt="Android asset" /> |
| <div class="caption">Rotate</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_save.png" title="ic_menu_save" alt="Android asset" /> |
| <div class="caption">Save</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_send.png" title="ic_menu_send" alt="Android asset" /> |
| <div class="caption">Send</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_search.png" title="ic_menu_search" alt="Android asset" /> |
| <div class="caption">Search</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_share.png" title="ic_menu_share" alt="Android asset" /> |
| <div class="caption">Share</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_upload.png" title="ic_menu_upload" alt="Android asset" /> |
| <div class="caption">Upload</div></td> |
| |
| </tr> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_view.png" title="ic_menu_view" alt="Android asset" /> |
| <div class="caption">View</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/ic_menu_zoom.png" title="ic_menu_zoom" alt="Android asset" /> |
| <div class="caption">Zoom</div></td> |
| |
| </tr> |
| </table> |
| |
| |
| <h3 id="statusbarapx">Standard status bar icons</h3> |
| |
| <p>Shown below are standard status bar icons that are used in the Android |
| platform. Because these resources can change between platform versions, you |
| should not reference the system's copy of the resources. If you want |
| use any icons or other internal drawable resources, you should store a |
| local copy of those icons or drawables in your application resources, |
| then reference the local copy from your application code. In that way, you can |
| maintain control over the appearance of your icons, even if the system's |
| copy changes. Note that the list below is not intended to be complete.</p> |
| |
| |
| <table class="image-caption"> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_sys_data_bluetooth.png" title="stat_sys_data_bluetooth" alt="Android asset" /> |
| <div class="caption">Bluetooth</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_notify_email_generic.png" title="stat_notify_email_generic" alt="Android asset" /> |
| <div class="caption">Email</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_notify_chat.png" title="stat_notify_chat" alt="Android asset" /> |
| <div class="caption">IM</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_notify_voicemail.png" title="stat_notify_voicemail" alt="Android asset" /> |
| <div class="caption">Voicemail</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_sys_warning.png" title="stat_sys_warning" alt="Android asset" /> |
| <div class="caption">Warning</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_sys_phone_call.png" title="stat_sys_phone_call" alt="Android asset" /> |
| <div class="caption">Call</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_sys_phone_call_forward.png" title="stat_sys_phone_call_forward" alt="Android asset" /> |
| <div class="caption">Call forward</div></td> |
| |
| </tr> |
| <tr> |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_sys_phone_call_on_hold.png" title="stat_sys_phone_call_on_hold" alt="Android asset" /> |
| <div class="caption">Call on hold</div></td> |
| |
| |
| <td class="image-caption-i image-list"> |
| <img src="{@docRoot}images/icon_design/stat_notify_missed_call.png" title="stat_notify_missed_call" alt="Android asset" /> |
| <div class="caption">Missed call</div></td> |
| |
| </tr> |
| </table> |
| |