diff options
Diffstat (limited to 'docs/html/design/style/iconography.jd')
| -rw-r--r-- | docs/html/design/style/iconography.jd | 601 |
1 files changed, 0 insertions, 601 deletions
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd deleted file mode 100644 index e2cdf3f..0000000 --- a/docs/html/design/style/iconography.jd +++ /dev/null @@ -1,601 +0,0 @@ -page.title=Iconography -page.tags="icons" -meta.tags="icons, googleplay, listing, branding" -page.titleFriendly=Guidelines for creating your app's icons -@jd:body - -<img src="{@docRoot}design/media/iconography_overview.png"> - - -<p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, -intuitive representation of an action, a status, or an app.</p> - -<p>When you design icons for your app, it's important to keep in mind that your -app may be installed on a variety of devices that offer a range of -pixel densities, as mentioned in -<a href="{@docRoot}design/style/devices-displays.html">Devices -and Displays</a>. But you can make your icons look great on all devices -by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of -the device screen and loads the appropriate density-specific assets for your app. </p> - -<p>Because you will deliver each icon in multiple sizes to support different densities, -the design guidelines below -refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym> -units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p> - -<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> - -<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6:8 -scaling ratio</strong> between the five primary densities (medium, high, x-high, xx-high, and -xxx-high respectively). For example, consider that the size for a launcher icon is specified to be -48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the -high-density(HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high -density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p> - -<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens, -but you normally don't need to create custom assets at this size because Android -effectively down-scales your HDPI assets by 1/2 to match the expected size.</p> - - - - -<h2 id="launcher">Launcher</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-product-icons"> - <div> - <h3>Material Design</h3> - <p>Product Icons<p> - </div> -</a> - -<p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the -user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on -any type of background.</p> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_launcher_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Launcher icons on a mobile device must be <strong>48x48 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - <li class="no-bullet with-icon web"> - <p>Launcher icons for display on Google Play must be <strong>512x512 pixels</strong>.</p></li> - </ul> - - </div> - <div class="layout-content-col span-4"> - - <h4>Proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>48x48 dp</strong></p> - </li> - </ul> - - </div> - <div class="layout-content-col span-4"> - -<h4>Style</h4> -<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed -from above, so that users perceive some depth.</p> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/iconography_launcher_example.png"> - - </div> - <!-- 2 free columns --> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-12"> - - <img src="{@docRoot}design/media/iconography_launcher_example2.png"> - - <div class="vspace size-2"> </div> - - </div> - <!-- 1 free columns --> -</div> - - -<h2 id="action-bar">Action Bar</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - -<p> - -Action bar icons are graphic buttons that represent the most important actions people can take -within your app. Each one should employ a simple metaphor representing a single concept that most -people can grasp at a glance. - -</p> -<p> - -Pre-defined glyphs should be used for certain common actions such as "refresh" and "share." The -download link below provides a package with icons that are scaled for various screen densities and -are suitable for use with the Holo Light and Holo Dark themes. The package also includes unstyled -icons that you can modify to match your theme, in addition to Adobe® Illustrator® source -files for further customization. - -</p> -<p> -<a onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons (@iconography page)');" - href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> -</p> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Action bar icons for phones should be <strong>32x32 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="layout-content-col span-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>32x32 dp</strong></p> - <p>Optical square, <strong>24x24 dp</strong></p> - </li> - </ul> - - </div> - <div class="layout-content-col span-4"> - -<h4>Style</h4> -<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, -rotate it 45° left or right to fill the focal space. The thickness of the strokes and negative -spaces should be a minimum of 2 dp.</p> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-3"> - -<h4>Colors</h4> -<p>Colors: <strong>#333333</strong><br /> -Enabled: <strong>60%</strong> opacity<br /> -Disabled: <strong>30%</strong> opacity</p> -<div class="vspace size-1"> </div> - -<p>Colors: <strong>#FFFFFF</strong><br /> -Enabled: <strong>80%</strong> opacity<br /> -Disabled: <strong>30%</strong> opacity</p> - - </div> - <div class="layout-content-col span-9"> - - <img src="{@docRoot}design/media/iconography_actionbar_colors.png"> - - </div> -</div> - - -<h2 id="small-contextual">Small / Contextual Icons</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - -<p>Within the body of your app, use small icons to surface actions and/or provide status for specific -items. For example, in the Gmail app, each message has a star icon that marks the message as -important.</p> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Small icons should be <strong>16x16 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="layout-content-col span-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>16x16 dp</strong></p> - <p>Optical square, <strong>12x12 dp</strong></p> - </li> - </ul> - - </div> - <div class="layout-content-col span-4"> - -<h4>Style</h4> -<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual -metaphor so that a user can easily recognize and understand its purpose.</p> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_small_colors.png"> - - <div class="vspace size-2"> </div> - -<h4>Colors</h4> -<p>Use non-neutral colors sparingly and with purpose. For example, Gmail uses yellow in the star icon -to indicate a bookmarked message. If an icon is actionable, choose a color that contrasts well with -the background.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/iconography_small_example.png"> - - </div> - <!-- 2 free columns --> -</div> - - -<h2 id="notification">Notification Icons</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/icons.html#icons-system-icons"> - <div> - <h3>Material Design</h3> - <p>System Icons<p> - </div> -</a> - - -<p>If your app generates notifications, provide an icon that the system can display in the status bar -whenever a new notification is available.</p> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_size.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_focal.png"> - - </div> - <div class="layout-content-col span-4"> - - <img src="{@docRoot}design/media/iconography_notification_style.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <h4>Sizes & scale</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Notification icons must be <strong>24x24 <acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym></strong>.</p></li> - </ul> - - </div> - <div class="layout-content-col span-4"> - - <h4>Focal area & proportions</h4> - - <ul> - <li class="no-bullet with-icon tablet"> - <p>Full asset, <strong>24x24 dp</strong></p> - <p>Optical square, <strong>22x22 dp</strong></p> - </li> - </ul> - - </div> - <div class="layout-content-col span-4"> - -<h4>Style</h4> -<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - -<h4>Colors</h4> -<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/iconography_notification_example.png"> - - </div> - <!-- 2 free columns --> -</div> - - - - - - - - - - -<h2 id="DesignTips">Design Tips</h2> - -<p>Here are some tips you might find useful as you create icons or other -drawable assets for your application. These tips assume you are using -Adobe® Photoshop® or a similar raster and vector image-editing program.</p> - - - - -<h3>Use vector shapes where possible</h3> - -<p>Many image-editing programs such as Adobe® Photoshop® allow you to use a -combination of vector shapes and raster layers and effects. When possible, -use vector shapes so that if the need arises, assets can be scaled up without -loss of detail and edge crispness.</p> - -<p>Using vectors also makes it easy to align edges and corners to pixel -boundaries at smaller resolutions.</li> - - - -<h3>Start with large artboards</h3> - -<p>Because you will need to create assets for different screen densities, -it is best to start your icon -designs on large artboards with dimensions that are multiples of the target icon -sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, -depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you -initially draw launcher icons on an 864x864 artboard, it will be easier and -cleaner to adjust the icons when you scale the artboard down to the target -sizes for final asset creation.</p> - - - -<h3>When scaling, redraw bitmap layers as needed</h3> - -<p>If you scaled an image up from a bitmap layer, rather than from a vector -layer, those layers will need to be redrawn manually to appear crisp at higher -densities. For example if a 60x60 circle was painted as a bitmap for -mdpi it will need to be repainted as a 90x90 circle for hdpi.</p> - - - -<h3>Use common naming conventions for icon assets</h3> - -<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 and Action Bar 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_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> - - -<h3>Set up a working space that organizes files by density</h3> - -<p>Supporting multiple screen densities means you must create multiple versions -of the same icon. 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 based on the target density. For example:</p> - -<pre> -art/... - 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 - xhdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png - xxhdpi/... - _pre_production/... - <em>working_file</em>.psd - <em>finished_asset</em>.png -</pre> - -<p>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 -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 - drawable-xhdpi/... - <em>finished_asset</em>.png - drawable-xxhdpi/... - <em>finished_asset</em>.png - - mipmap-ldpi/... - <em>finished_launcher_asset</em>.png - mipmap-mdpi/... - <em>finished_launcher_asset</em>.png - mipmap-hdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xhdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xxhdpi/... - <em>finished_launcher_asset</em>.png - mipmap-xxxhdpi/... - <em>finished_launcher_asset</em>.png -</pre> - -<p>For more information about how to save resources in the application project, -see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>. -</p> - -<p> For more information about using the mipmap folders, see -<a href="{@docRoot}tools/projects/index.html#mipmap">Managing Projects Overview</a>.</p> - -<h3 id="xxxhdpi-launcher">Provide an xxx-high-density launcher icon</h3> - -<p>Some devices scale-up the launcher icon by as much as 25%. For example, if your highest density -launcher icon image is already extra-extra-high density, the scaling process will make it appear -less crisp. So you should provide a higher density launcher icon in the <code>mipmap-xxxhdpi -</code> directory, which the system uses instead of scaling up a smaller version of the icon.</p> - -<p class="note"><strong>Note:</strong> The <code>mipmap-xxxhdpi</code> qualifier is necessary -only to provide a launcher icon that can appear larger than usual on an xxhdpi device. It is best -practice to place all your launcher icons in the <code>res/mipmap-[density]/</code> folders. This -enables your app to display launcher icons that have a higher density than the device, without -scaling up a lower density version of the icon. You do not need to provide xxxhdpi assets for all -your app's images.</p> - -<p>See <a href="{@docRoot}guide/practices/screens_support.html">Supporting Multiple Screens</a> for -more information.</p> - - -<h3>Remove unnecessary metadata from final assets</h3> - -<p>Although the Android SDK tools will automatically compress PNGs when packaging -application resources into the application binary, a good practice is to remove -unnecessary headers and metadata from your PNG assets. Tools such as <a -href="http://optipng.sourceforge.net/">OptiPNG</a> or <a -href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this -metadata is removed and that your image asset file sizes are optimized.</p> - - |