| page.title=Status Bar Icons |
| excludeFromSuggestions=true |
| 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="#icon11">Android 3.0 and Later</a> |
| <ol> |
| <li><a href="#overview11">Overview of changes</a></li> |
| <li><a href="#size11">Size and format</a></li> |
| <li><a href="#style11">Style, colors, and effects</a></li> |
| <li><a href="#dimming11">Automatic dimming</a></li> |
| <li><a href="#examples11">Example icons</a></li> |
| </ol> |
| </li> |
| <li><a href="#icon9">Android 2.3</a> |
| <ol> |
| <li><a href="#size9">Size</a></li> |
| <li><a href="#style9">Style, color, and effects</a></li> |
| <li><a href="#dosdonts9">Do's and don'ts</a></li> |
| <li><a href="#examples9">Example icons</a></li> |
| </ol> |
| </li> |
| <li><a href="#icon1">Android 2.2 and Earlier</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> |
| |
| |
| <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>Status bar icons are used to represent notifications from your application in |
| the status bar.</p> |
| |
| <p>As described in <a |
| href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#icon-sets">Providing Density-Specific |
| Icon Sets</a> and <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| Screens</a>, you should create separate icons for all generalized screen densities, including low-, |
| medium-, high-, and extra-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="{@docRoot}guide/practices/ui_guidelines/icon_design.html#design-tips">Tips for Designers</a> |
| for suggestions on how to work with multiple sets of icons.</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> |
| |
| |
| <div class="warning"> |
| |
| <p><strong>Warning:</strong>The style and dimensions of status bar icons have changed dramatically |
| in Android 3.0 and 2.3 compared to <a href="#icon1">previous versions</a>. <strong>To |
| provide support for all Android versions</strong>, developers should:</p> |
| |
| <ol> |
| <li>Place status bar icons for Android 3.0 and later in the |
| <code>drawable-xhdpi-v11</code>, <code>drawable-hdpi-v11</code>,<code>drawable-mdpi-v11</code>, |
| and <code>drawable-ldpi-v11</code> directories.</li> |
| <li>Place status bar icons for Android 2.3 in the |
| <code>drawable-xhdpi-v9</code>, <code>drawable-hdpi-v9</code>, <code>drawable-mdpi-v9</code>, |
| and <code>drawable-ldpi-v9</code> directories.</li> |
| <li>Place status bar icons for previous versions in |
| <code>drawable-xhdpi</code>, <code>drawable-hdpi</code>, <code>drawable-mdpi</code>, |
| and <code>drawable-ldpi</code> directories.</li> |
| </ol> |
| |
| </div> |
| |
| |
| |
| |
| <h2 id="icon11">Android 3.0 and Later</h2> |
| |
| <p>The following guidelines describe how to design status bar icons for Android |
| 3.0 (API Level 11) and later.</p> |
| |
| |
| <h3 id="overview11">Overview of changes</h3> |
| |
| <p>The design for status bar (notification) icons has been revised in Android 3.0. Status bar icons |
| used in Android 3.0 and later are easier to create, and they allow for more flexible presentation |
| in a variety of situations:</p> |
| |
| <ul> |
| <li>Status bar icons are composed simply of <strong>white pixels on a transparent |
| backdrop</strong>, with alpha blending used for smooth edges and internal texture where |
| appropriate.</li> |
| <li>Icons are square icon contents should <strong>fill the available space</strong>, although a |
| small amount of internal padding can help maintain balance across status bar icons. See |
| <a href="#size11">Size and format</a> below for details.</li> |
| </ul> |
| |
| <p>These larger and brighter icons, while highly legible, are too intense for use on dark phone |
| status bars. These icons would be too distracting if used directly in the status bar. Therefore: |
| </p> |
| |
| <ul> |
| <li><strong>The system automatically resizes and dims</strong> these icons in such situations and |
| developers do not need to supply a separate icon for this purpose. See |
| <a href="#dimming11">Automatic dimming</a> below for more on this behavior.</li> |
| </ul> |
| |
| |
| <h3 id="size11">Size and format</h2> |
| |
| <p>Status bar icons should be 32-bit PNGs with an alpha channel for transparency. The finished |
| status bar icon dimensions corresponding to a given generalized screen density are shown in the |
| table below.</p> |
| |
| <p class="note"><strong>Note:</strong> The system will shrink and dim status bar icons to minimize |
| distractions, allowing users to focus on the foreground activity.</p> |
| |
| |
| <p class="table-caption" id="screens_table"><strong>Table 1.</strong> Summary of |
| finished icon dimensions for each generalized screen density.</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> |
| Status Bar Icon Size<br><small>(Android 3.0 and Later)</small> |
| </th> |
| <td> |
| 18 x 18 px |
| </td> |
| <td> |
| 24 x 24 px |
| </td> |
| <td> |
| 36 x 36 px |
| </td> |
| <td> |
| 48 x 48 px |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p>You can also include a few pixels of padding in status bar icons to maintain a |
| consistent visual weight with adjacent icons. For example, a 48 x 48 pixel <code>xhdpi</code> |
| status bar icon can contain a 44 x 44 pixel shape with 2 pixels on each side for padding.</p> |
| |
| |
| <h3 id="style11">Style, colors, and effects</h3> |
| |
| <p>Status bar icons are flat, pictured face on, and must be white on a transparent background.</p> |
| |
| <p>In order to maintain consistency across all status bar notifications, status bar icons should |
| use the styling shown in Figure 1.</p> |
| |
| |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/status_bar_honeycomb_style.png" |
| alt="A view of effects for status bar icons."> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 1. </strong>Style for status bar icons.</p> |
| <div class="image-caption-nested"> |
| <table> |
| <tr><td><em>1.</em></td><td nowrap>Fill color:</td><td><code>#ffffff</code><br><br></td></tr> |
| <tr><td><em>2.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from |
| the outer shape and consist purely of transparent pixels.</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h3 id="dimming11">Automatic dimming</h3> |
| |
| <p>The system may dim and shrink status bar icons to allow users to focus on the foreground |
| activity. For example, in Android 4.0, the platform-standard status bar for handset-size devices |
| reduces icons to 18 x 18 dip and 40% opacity in the status bar, while drawing them full-size and at |
| full intensity in the expanded notification panel. An example of what this looks like is shown below |
| in Figure 2.</p> |
| |
| |
| <img src="{@docRoot}images/icon_design/status_bar_honeycomb_dimming.png" |
| alt="Automatic shrinking and dimming behavior in Android 3.0 and later"> |
| <p class="img-caption"> |
| <strong>Figure 2.</strong> Automatic shrinking and dimming behavior in Android 3.0 and later. |
| </p> |
| |
| |
| <h3 id="examples11">Example icons</h3> |
| |
| <p>Shown below are example extra-high-density status bar icons that are used throughout Android |
| system applications.</p> |
| |
| <p class="warning"><strong>Warning:</strong> Because resources can change between platform versions, |
| you should not reference built-in icons using the Android platform resource IDs (i.e. status bar |
| icons under <code>android.R.drawable</code>). If you want to 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 grid |
| below is not intended to be complete.</p> |
| |
| <img src="{@docRoot}images/icon_design/status_bar_honeycomb_examples.png" /> |
| |
| |
| |
| |
| |
| <h2 id="icon9">Android 2.3</h2> |
| |
| <p>The following guidelines describe how to design status bar icons for Android |
| 2.3 (API Levels 9 and 10).</p> |
| |
| <h3 id="size9">Size and positioning</h3> |
| |
| <p>Status bar icons should use simple shapes and forms and those must be |
| scaled and positioned inside the final asset.</p> |
| |
| <p>Figure 3 illustrates various ways of positioning the icon inside the |
| asset. You should size the icons <em>smaller than the actual bounds of the |
| asset</em>. <strong>Status bar icons may vary in width, but only |
| minimally.</strong></p> |
| |
| <p>In order to indicate the recommended size for the icon, each example in |
| Figure 3 includes two different guide rectangles:</p> |
| |
| <ul> |
| <li>The red box is the bounding box for the full asset.</li> |
| <li>The blue box is the recommended bounding box for the actual icon. |
| The icon box is sized smaller vertically than the full asset box to allow for |
| varying icon shapes while maintaining a consistent visual weight.</li> |
| </ul> |
| |
| <table> |
| <tr> |
| |
| <td style="border:0;"> |
| <ol class="nolist"> |
| <li>Status bar icon dimensions for high-density (<code>hdpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 24w x 38h px (preferred, width may vary)</li> |
| <li>Icon: 24w x 24h px (preferred, width may vary)</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| <td style="border:0;"> |
| <img src="{@docRoot}images/icon_design/statusbar_size_hdpi.png" width="318"> |
| </td> |
| </tr> |
| <tr> |
| <td style="border:0;"> |
| <ol class="nolist"> |
| <li>Status bar icon dimensions for medium-density (<code>mdpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 16w x 25 px (preferred, width may vary)</li> |
| <li>Icon: 16w x 16w px (preferred, width may vary)</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| |
| <td style="border:0;"> |
| <img src="{@docRoot}images/icon_design/statusbar_size_mdpi.png" width="318"> |
| </td> |
| </tr> |
| <tr> |
| <td style="border:0;"> |
| <ol class="nolist"> |
| <li>Status bar icon dimensions for low-density (<code>ldpi</code>) screens:</li> |
| <ol class="nolist"> |
| <li>Full Asset: 12w x 19h px (preferred, width may vary)</li> |
| <li>Icon: 12w x 12h px (preferred, width may vary)</li> |
| </ol> |
| </li> |
| </ol> |
| </td> |
| |
| <td style="border:0;"> |
| <img src="{@docRoot}images/icon_design/statusbar_size_ldpi.png" width="318"> |
| </td> |
| </tr> |
| |
| <tr> |
| <td style="border:0;"></td> |
| <td style="border:0;"> |
| <p class="table-caption"><strong>Figure 3.</strong> |
| Status bar icon sizing and positioning inside the bounds of the |
| icon asset.</p> |
| </td> |
| </tr> |
| |
| </table> |
| |
| |
| |
| |
| <h3 id="style9">Style, colors, and effects</h3> |
| |
| <p>Status bar icons are flat, matte, and pictured face-on.</p> |
| |
| |
| <table class="image-caption"> |
| <tr> |
| <td class="image-caption-i"> |
| <img src="{@docRoot}images/icon_design/statusbar_style.png" alt="A view of effects for status bar icons."/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 4. </strong>Style and effects for status icons.</p> |
| <div class="image-caption-nested"> |
| <p><em>Note: all pixel dimensions are for medium density and should be scaled appropriately for other densities.</em></p> |
| <table> |
| <tr><td><em>1.</em></td><td nowrap>Fill gradient:</td><td>90°, from <code>#828282</code> to <code>#919191</code><br><br></td></tr> |
| <tr><td><em>2.</em></td><td nowrap>Inner shadow:</td><td><code>#FFFFFF</code>, 10% opacity<br>angle 90°<br>distance 1px<br>size 0px<br><br></td></tr> |
| <tr><td><em>3.</em></td><td nowrap>Inner content:</td><td>Inner content should subtract from the outer shape and consist purely of transparent pixels.</td></tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| |
| |
| <h3 id="dosdonts9">Do's and don'ts</h3> |
| |
| <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"> |
| |
| |
| |
| |
| <h3 id="examples9">Example icons</h3> |
| |
| <p>Shown below are standard high-density status bar icons that are used in |
| the Android platform.</p> |
| |
| <p class="warning"><strong>Warning:</strong> Because these resources can change |
| between platform versions, you should not reference these icons using the |
| Android platform resource IDs (i.e. status bar icons under |
| <code>android.R.drawable</code>). If you want to 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 grid below is not intended to |
| be complete.</p> |
| |
| <img src="{@docRoot}images/icon_design/statusbar_standard.png" /> |
| |
| |
| |
| <h2 id="icon1">Android 2.2 and Earlier</h2> |
| |
| <p>The following guidelines describe how to design status bar icons for Android |
| 2.2 (API Level 8) and earlier.</p> |
| |
| <h3 id="structure1">Structure</h3> |
| |
| <ul> |
| <li>Rounded corners must always be applied to the base shape and to the details |
| of a status bar icon shown Figure 5.</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"> |
| <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 5. </strong>Safeframe and corner-rounding for status bar |
| icons. Icon size is 25x25.</p> |
| </div> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h3 id="style1">Light, effects, and shadows</h3> |
| |
| <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"/> |
| </td> |
| <td class="image-caption-c"> |
| <div class="caption grad-rule-top"> |
| <p><strong>Figure 6. </strong>Light, effects, and shadows for status bar icons.</p> |
| <div class="image-caption-nested"> |
| <table> |
| <tr><td><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> |
| <tr> |
| <td style="border:0"> |
| |
| <h4 id="palette1">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> |
| <tr> |
| <td class="image-caption-i"><img src="{@docRoot}images/icon_design/statusbar_palette_white.png"/></td> |
| <td class="image-caption-c">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"/></td> |
| <td class="image-caption-c">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"/></td> |
| <td class="image-caption-c">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"/></td> |
| <td class="image-caption-c">Black<br>r 0 | g 0 | b 0<br>Used for bevel shadow.</td> |
| </tr> |
| |
| </table> |
| |
| </td> |
| |
| <td style="border:0"> |
| |
| <h4 id="steps1">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 5.</li> |
| <li>Add light, effects, and shadows as specified in Figure 6.</li> |
| <li>Export the icon at 25x25 as a PNG file with transparency enabled.</li> |
| </ol> |
| |
| </td> |
| </tr> |
| </table> |