Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 1 | page.title=Icon Design Guidelines |
| 2 | parent.title=UI Guidelines |
| 3 | parent.link=index.html |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 4 | @jd:body |
| 5 | |
| 6 | <div id="qv-wrapper"> |
| 7 | <div id="qv"> |
| 8 | |
Scott Main | ec80d7f | 2010-09-24 16:17:27 -0700 | [diff] [blame] | 9 | <h2>Quickview</h2> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 10 | |
| 11 | <ul> |
| 12 | <li>You can use several types of icons in an Android application.</li> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 13 | <li>Your icons should follow the general specification in this document.</li> |
| 14 | <li>You should create separate icon sets for high-, medium-, and low-density screens.</li> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 15 | </ul> |
| 16 | |
| 17 | <h2>In this document</h2> |
| 18 | |
| 19 | <ol> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 20 | <li><a href="#templatespack">Using the Icon Templates Pack</a></li> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 21 | <li><a href="#icon-sets">Providing Density-Specific Icon Sets</a></li> |
| 22 | <li><a href="#design-tips">Tips for Designers</a></li> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 23 | </ol> |
| 24 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 25 | <h2>Topics</h2> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 26 | |
| 27 | <ol> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 28 | <li><a href="icon_design_launcher.html">Launcher Icons</a></li> |
| 29 | <li><a href="icon_design_menu.html">Menu Icons</a></li> |
| 30 | <li><a href="icon_design_status_bar.html">Status Bar Icons</a></li> |
| 31 | <li><a href="icon_design_tab.html">Tab Icons</a></li> |
| 32 | <li><a href="icon_design_dialog.html">Dialog Icons</a></li> |
| 33 | <li><a href="icon_design_list.html">List View Icons</a></li> |
Scott Main | ec80d7f | 2010-09-24 16:17:27 -0700 | [diff] [blame] | 34 | </ol> |
| 35 | |
| 36 | <h2>Downloads</h2> |
| 37 | |
| 38 | <ol> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 39 | <li><a href="{@docRoot}shareables/icon_templates-v4.0.zip">Android Icon |
| 40 | Templates Pack, v4.0 »</a></li> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 41 | <li><a href="{@docRoot}shareables/icon_templates-v2.3.zip">Android Icon |
| 42 | Templates Pack, v2.3 »</a></li> |
Scott Main | ec80d7f | 2010-09-24 16:17:27 -0700 | [diff] [blame] | 43 | <li><a href="{@docRoot}shareables/icon_templates-v2.0.zip">Android Icon |
| 44 | Templates Pack, v2.0 »</a></li> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 45 | <li><a href="{@docRoot}shareables/icon_templates-v1.0.zip">Android Icon |
| 46 | Templates Pack, v1.0 »</a></li> |
| 47 | </ol> |
| 48 | |
Scott Main | ec80d7f | 2010-09-24 16:17:27 -0700 | [diff] [blame] | 49 | <h2>See also</h2> |
| 50 | |
| 51 | <ol> |
| 52 | <li><a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| 53 | Screens</a></li> |
| 54 | </ol> |
| 55 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 56 | |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 57 | </div> |
| 58 | </div> |
| 59 | |
| 60 | <p>Creating a unified look and feel throughout a user interface adds value to |
| 61 | your product. Streamlining the graphic style will also make the UI seem more |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 62 | professional to users.</p> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 63 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 64 | <p>This document provides information to help you create icons for various parts |
| 65 | of your application’s user interface that match the general styles used by the |
| 66 | Android 2.x framework. Following these guidelines will help you to create a |
| 67 | polished and unified experience for the user.</p> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 68 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 69 | <p>The following documents discuss detailed guidelines for the common types of |
| 70 | icons used throughout Android applications:</p> |
| 71 | |
| 72 | <dl> |
| 73 | <dt><strong><a href="icon_design_launcher.html">Launcher Icons</a></strong></dt> |
| 74 | <dd>A Launcher icon is a graphic that represents your application on the |
| 75 | device's Home screen and in the Launcher window.</dd> |
| 76 | <dt><strong><a href="icon_design_menu.html">Menu Icons</a></strong></dt> |
| 77 | <dd>Menu icons are graphical elements placed in the options menu shown to |
| 78 | users when they press the Menu button.</dd> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 79 | <dt><strong><a href="icon_design_action_bar.html">Action Bar Icons</a> |
| 80 | <span class="new">new!</span></strong></dt> |
| 81 | <dd>Action Bar icons are graphical elements representing action items in the |
| 82 | <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>.</dd> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 83 | <dt><strong><a href="icon_design_status_bar.html">Status Bar Icons</a></strong></dt> |
| 84 | <dd>Status bar icons are used to represent notifications from your |
| 85 | application in the status bar.</dd> |
| 86 | <dt><strong><a href="icon_design_tab.html">Tab Icons</a></strong></dt> |
| 87 | <dd>Tab icons are graphical elements used to represent individual tabs in a |
| 88 | multi-tab interface.</dd> |
| 89 | <dt><strong><a href="icon_design_dialog.html">Dialog Icons</a></strong></dt> |
| 90 | <dd>Dialog icons are shown in pop-up dialog boxes that prompt the user for |
| 91 | interaction.</dd> |
| 92 | <dt><strong><a href="icon_design_list.html">List View Icons</a></strong></dt> |
| 93 | <dd>List view icons are used with {@link android.widget.ListView} to |
| 94 | graphically represent list items. An example is the Settings application.</dd> |
| 95 | </dl> |
| 96 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 97 | <p>To get started creating your icons more quickly, you can download |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 98 | the Android Icon Templates Pack.</p> |
| 99 | |
| 100 | |
| 101 | |
| 102 | |
| 103 | |
| 104 | <h2 id="templatespack">Using the Android Icon Templates Pack</h2> |
| 105 | |
| 106 | <p>The Android Icon Templates Pack is a collection of template designs, |
| 107 | textures, and layer styles that make it easier for you to create icons that |
| 108 | conform to the guidelines given in this document. We recommend downloading the |
| 109 | template pack archive before you start designing your icons.</p> |
| 110 | |
| 111 | <p>The icon templates are provided in the Adobe Photoshop file format (.psd), |
| 112 | which preserves the layers and design treatments we used when creating the |
| 113 | standard icons for the Android platform. You can load the template files into |
| 114 | any compatible image-editing program, although your ability to work directly |
| 115 | with the layers and treatments may vary based on the program you are using.</p> |
| 116 | |
| 117 | <p>You can obtain the latest Icon Templates Pack archive using the link below: |
| 118 | </p> |
| 119 | |
| 120 | <p style="margin-left:2em"><a |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 121 | href="{@docRoot}shareables/icon_templates-v4.0.zip">Download the Icon Templates |
| 122 | Pack for Android 4.0 »</a> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 123 | |
| 124 | <p>For previous versions of the Icon Templates Pack, see the <em>Downloads</em> |
| 125 | section in the box at the top-right corner of this page.</p> |
| 126 | |
| 127 | |
| 128 | |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 129 | |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 130 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 131 | <h2 id="icon-sets">Providing Density-Specific Icon Sets</h2> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 132 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 133 | <p>Android is designed to run on a variety of devices that offer a range of |
| 134 | screen sizes and resolutions. When you design the icons for your application, |
| 135 | it's important keep in mind that your application may be installed on any of |
| 136 | those devices. As described in the <a |
| 137 | href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
| 138 | Screens</a> document, the Android platform makes it straightforward for you to |
| 139 | provide icons in such a way that they will be displayed properly on any device, |
| 140 | regardless of the device's screen size or resolution.</p> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 141 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 142 | <p>In general, the recommended approach is to create a separate set of icons for |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 143 | each generalized screen density. Then, |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 144 | store them in density-specific resource directories in your application. When |
| 145 | your application runs, the Android platform will check the characteristics of |
| 146 | the device screen and load icons from the appropriate density-specific |
| 147 | resources. For more information about how to store density-specific resources in |
| 148 | your application, see <a |
| 149 | href="{@docRoot}guide/practices/screens_support.html#qualifiers">Resource |
| 150 | directory qualifiers for screen size and density</a>. </p> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 151 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 152 | <p>For tips on how to create and manage icon sets for multiple densities, see |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 153 | <a href="#design-tips">Tips for Designers</a>.</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 154 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 155 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 156 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 157 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 158 | <h2 id="design-tips">Tips for Designers</h2> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 159 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 160 | <p>Here are some tips that you might find useful as you develop icons or other |
| 161 | drawable assets for your application. The tips assume that you are using |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 162 | Adobe Photoshop or a similar raster and vector image-editing program.</p> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 163 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 164 | <h3>Use common naming conventions for icon assets</h3> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 165 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 166 | <p>Try to name files so that related assets will group together inside a |
| 167 | directory when they are sorted alphabetically. In particular, it helps to use a |
| 168 | common prefix for each icon type. For example:</p> |
| 169 | |
| 170 | <table> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 171 | <tr> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 172 | <th>Asset Type</th> |
| 173 | <th>Prefix</th> |
| 174 | <th>Example</th> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 175 | </tr> |
| 176 | <tr> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 177 | <td>Icons</td> |
| 178 | <td><code>ic_</code></td> |
| 179 | <td><code>ic_star.png</code></td> |
| 180 | </tr> |
| 181 | <tr> |
| 182 | <td>Launcher icons</td> |
| 183 | <td><code>ic_launcher</code></td> |
| 184 | <td><code>ic_launcher_calendar.png</code></td> |
| 185 | </tr> |
| 186 | <tr> |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 187 | <td>Menu icons and Action Bar icons</td> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 188 | <td><code>ic_menu</code></td> |
| 189 | <td><code>ic_menu_archive.png</code></td> |
| 190 | </tr> |
| 191 | <tr> |
| 192 | <td>Status bar icons</td> |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 193 | <td><code>ic_stat_notify</code></td> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 194 | <td><code>ic_stat_notify_msg.png</code></td> |
| 195 | </tr> |
| 196 | <tr> |
| 197 | <td>Tab icons</td> |
| 198 | <td><code>ic_tab</code></td> |
| 199 | <td><code>ic_tab_recent.png</code></td> |
| 200 | </tr> |
| 201 | <tr> |
| 202 | <td>Dialog icons</td> |
| 203 | <td><code>ic_dialog</code></td> |
| 204 | <td><code>ic_dialog_info.png</code></td> |
| 205 | </tr> |
Dirk Dougherty | f3043db | 2009-05-26 08:40:42 -0700 | [diff] [blame] | 206 | </table> |
| 207 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 208 | <p>Note that you are not required to use a shared prefix of any type — |
| 209 | doing so is for your convenience only.</p> |
| 210 | |
| 211 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 212 | <h3>Set up a working space that organizes files for multiple densities</h3> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 213 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 214 | <p>Supporting multiple screen densities means you must create multiple versions |
| 215 | of the same icon. To help keep the multiple copies of files safe and easier to |
| 216 | find, we recommend creating a directory structure in your working space that |
| 217 | organizes asset files per resolution. For example:</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 218 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 219 | <pre>art/... |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 220 | ldpi/... |
| 221 | _pre_production/... |
| 222 | <em>working_file</em>.psd |
| 223 | <em>finished_asset</em>.png |
| 224 | mdpi/... |
| 225 | _pre_production/... |
| 226 | <em>working_file</em>.psd |
| 227 | <em>finished_asset</em>.png |
| 228 | hdpi/... |
| 229 | _pre_production/... |
| 230 | <em>working_file</em>.psd |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 231 | <em>finished_asset</em>.png |
| 232 | xhdpi/... |
| 233 | _pre_production/... |
| 234 | <em>working_file</em>.psd |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 235 | <em>finished_asset</em>.png</pre> |
| 236 | |
| 237 | <p>This structure parallels the density-specific structure in which you will |
| 238 | ultimately store the finished assets in your application's resources. Because |
| 239 | the structure in your working space is similar to that of the application, you |
| 240 | can quickly determine which assets should be copied to each application |
| 241 | resources directory. Separating assets by density also helps you detect any |
| 242 | variances in filenames across densities, which is important because |
| 243 | corresponding assets for different densities must share the same filename.</p> |
| 244 | |
| 245 | <p>For comparison, here's the resources directory structure of a typical |
| 246 | application: </p> |
| 247 | |
| 248 | <pre>res/... |
| 249 | drawable-ldpi/... |
| 250 | <em>finished_asset</em>.png |
| 251 | drawable-mdpi/... |
| 252 | <em>finished_asset</em>.png |
| 253 | drawable-hdpi/... |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 254 | <em>finished_asset</em>.png |
| 255 | drawable-xhdpi/... |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 256 | <em>finished_asset</em>.png</pre> |
| 257 | |
| 258 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 259 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 260 | <h3>Use vector shapes where possible</h3> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 261 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 262 | <p>Many image-editing programs such as Adobe Photoshop allow you to use a |
| 263 | combination of vector shapes and raster layers and effects. When possible, |
| 264 | use vector shapes so that if the need arises, assets can be scaled up without |
| 265 | loss of detail and edge crispness.</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 266 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 267 | <p>Using vectors also makes it easy to align edges and corners to pixel |
| 268 | boundaries at smaller resolutions.</li> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 269 | |
| 270 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 271 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 272 | <h3>Start with large artboards</h3> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 273 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 274 | <p>Because you will need to create assets for different screen densities, |
| 275 | it is best to start your icon |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 276 | designs on large artboards with dimensions that are multiples of the target icon |
| 277 | sizes. For example, <a |
| 278 | href="{@docRoot}guide/practices/ui_guidelines/icon_design_launcher.html">launcher |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 279 | icons</a> are 96, 72, 48, or 36 pixels wide, depending on screen density. If you |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 280 | initially draw launcher icons on an 864x864 artboard, it will be easier and |
| 281 | cleaner to tweak the icons when you scale the artboard down to the target |
| 282 | sizes for final asset creation.</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 283 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 284 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 285 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 286 | <h3>When scaling, redraw bitmap layers as needed</h3> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 287 | |
| 288 | <p>If you scaled an image up from a bitmap layer, rather than from a vector |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 289 | layer, those layers will need to be redrawn manually to appear crisp at higher |
| 290 | densities. For example if a 60x60 circle was painted as a bitmap for |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 291 | <code>mdpi</code> it will need to be repainted as a 90x90 circle for |
| 292 | <code>hdpi</code>.</p> |
| 293 | |
| 294 | |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 295 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 296 | <h3>When saving image assets, remove unnecessary metadata</h3> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 297 | |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 298 | <p>Although the Android SDK tools will automatically compress PNGs when packaging |
| 299 | application resources into the application binary, a good practice is to remove |
| 300 | unnecessary headers and metadata from your PNG assets. Tools such as <a |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 301 | href="http://optipng.sourceforge.net/">OptiPNG</a> or <a |
Roman Nurik | ced7edd | 2011-09-28 13:01:20 -0700 | [diff] [blame] | 302 | href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this |
| 303 | metadata is removed and that your image asset file sizes are optimized.</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 304 | |
Roman Nurik | d602b35 | 2010-10-17 21:33:05 -0700 | [diff] [blame] | 305 | |
| 306 | |
| 307 | <h3>Make sure that corresponding assets for different densities use the same |
| 308 | filenames</h3> |
| 309 | |
| 310 | <p>Corresponding icon asset files for each density <strong>must use the same |
| 311 | filename</strong>, but be stored in density-specific resource directories. This |
| 312 | allows the system to look up and load the proper resource according to the |
| 313 | screen characteristics of the device. For this reason, make sure that the set of |
| 314 | assets in each directory is consistent and that the files do not use |
| 315 | density-specific suffixes.</p> |
| 316 | |
| 317 | <p>For more information about density-specific resources |
| 318 | and how the system uses them to meet the needs of different devices, see <a |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 319 | href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple |
Dirk Dougherty | fe1ffc3 | 2010-04-01 09:50:15 -0700 | [diff] [blame] | 320 | Screens</a>.</p> |
Dirk Dougherty | 59e644e | 2010-03-24 17:45:02 -0700 | [diff] [blame] | 321 | |