diff options
Diffstat (limited to 'docs/html/design/style')
| -rw-r--r-- | docs/html/design/style/branding.jd | 128 | ||||
| -rw-r--r-- | docs/html/design/style/color.jd | 141 | ||||
| -rw-r--r-- | docs/html/design/style/iconography.jd | 601 | ||||
| -rw-r--r-- | docs/html/design/style/metrics-grids.jd | 90 | ||||
| -rw-r--r-- | docs/html/design/style/themes.jd | 53 | ||||
| -rw-r--r-- | docs/html/design/style/touch-feedback.jd | 95 | ||||
| -rw-r--r-- | docs/html/design/style/typography.jd | 78 | ||||
| -rw-r--r-- | docs/html/design/style/writing.jd | 322 |
8 files changed, 0 insertions, 1508 deletions
diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd deleted file mode 100644 index 5995d03..0000000 --- a/docs/html/design/style/branding.jd +++ /dev/null @@ -1,128 +0,0 @@ -page.title=Your Branding -page.tags=branding,logo -@jd:body - -<p>Following Android design patterns doesn't mean that your app has to look the same as -everyone else's. In Android, your app can shine as an extension of your brand. </p> - -<h2 id="color">Color</h2> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/color.html#color-ui-color-application"> - <div> - <h3>Material Design</h3> - <p>UI Color Application<p> - </div> -</a> - -<p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p> - -<p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p> -<p>When customizing colors, <a href="{@docRoot}design/style/touch-feedback.html">touch feedback</a> - should be subtle — just slightly lighter or darker than the untouched color.</p> - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6"> - <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> - <div class="figure-caption"> - The four colors of the Google Wallet logo provide a playful accent to the four dots - that appear as the user enters a PIN. - </div> - </div> - <div class="col-6"> - <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> - <div class="figure-caption"> - The Google Play Music app has an orange theme color, which is used for emphasis - in the action bar and for accent in the selected tab, scroll indicator, and - hyperlinks. - </div> - </div> -</div> - -<h2 id="logo">Logo</h2> - -<p>Your app's <a href="{@docRoot}design/style/iconography.html#launcher">launcher icon</a> is - a key place to incorporate your logo, because it's what - users will look for and touch to begin using your app. You can carry the launcher - icon through to all the screens in your app by showing it in the - <a href="{@docRoot}design/patterns/actionbar.html">action bar</a> along - with the name of the app.</p> - -<p>Another approach to consider is to have your logo take the place of the launcher icon -and app name in the action bar.</p> - - -<div class="vspace size-1"> </div> - -<div class="cols"> - <div class="col-6" style="padding-top:24px;"> - <img src="{@docRoot}design/media/branding_launcher_icon.png" style="width:60px;float:left;padding-right:1em;"> - <div class="figure-caption" style="width:290px;margin-left:20px;"> - Google+ reinforces its brand by carrying its launcher icon through to the action bar. - </div> - <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> - </div> - <div class="col-6"> - <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> - <div class="figure-caption" style="width:320px;"> - Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app. - </div> - </div> -</div> - -<h2 id="logo">Icons</h2> - -<a class="notice-designers-material" href="http://www.google.com/design/spec/style/icons.html"> - <div> - <h3>Material Design</h3> - <p>Icons<p> - </div> -</a> - -<p>If you have icons that you're already using for your app on other platforms -and they have a distinctive look intended to fit your brand, use them on your -Android app as well. <strong>If you take this approach, make sure your brand styling is -applied to every single icon in your app.</strong></p> - - -<div class="cols"> - <div class="col-6"> - <p>One exception: For any icon in your existing set where the symbol is different from - Android's, use Android's symbol but give it your brand's styling. That way, users will - understand what the purpose of the icon is based on what they've learned in other - Android apps (Design principle: - <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that - work everywhere</a>). But the icon will still look like it belongs with all of - your other icons as a part of your brand.</p> - - </div> - - <div class="col-6"> - <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> - </div> - </div> -</div> - -<div class="cols"> - <div class="col-6"> - <p><strong>Example</strong>:<br /> - </p> - <p>The brand's normal icon for sharing on other platforms is a right arrow. - </div> - - <div class="col-6 lasyout-with-list-item-margins"> - - <div style="margin-bottom:1em;"> - <span class="do-dont-label bad" style="margin-left:12px">Don't</span> - <span style="margin-left: 64px;" class="do-dont-label good"><strong>Do</strong></span> - </div> - <img src="{@docRoot}design/media/yourbranding_sharing.png" style="width:180px;"> - </div> -</div> - -<p>What if you don't already have your own icons — for example, if you're creating a -brand new app only for Android? In this case, use Android's standard icons and rely -more on color and logo for branding. Get the Action Bar Icon Pack, available for free -in <a href="{@docRoot}design/downloads/index.html">Downloads</a>.</p> diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd deleted file mode 100644 index 4c5f5ab..0000000 --- a/docs/html/design/style/color.jd +++ /dev/null @@ -1,141 +0,0 @@ -page.title=Color -@jd:body - -<style> - .color-row { - width: 760px; - margin:0; - - display: -webkit-box; - display: -moz-box; - display: box; - - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - box-orient: horizontal; - - cursor: pointer; - - -webkit-user-select: none; - user-select: none; - /* nested user-select in FF is broken as of Jan 2012, don't use it */ - } - - .color-row-container { - line-height: 0; /* to remove more top space in FF for -moz-box elements */ - } - - .color-row-container + .color-row-container { - margin-top: -10px !important; - } - - .color-row li { - margin-left: 0 !important; - position: relative; - list-style-type: none; - height: 80px; - display: block; - - -webkit-box-flex: 1; - -moz-box-flex: 1; - box-flex: 1; - } - - .color-row li:before { - display: none; - } - - .color-row li.thin { - height: 40px; - } - - .color-row li span { - display: none; - position: absolute; - top: -30px; - left: 50%; - margin-left: -2.5em; - width: 5em; - background-color: #fff; - padding: 10px; - font-weight: 600; - line-height: 20px; - text-align: center; - box-shadow: 0 5px 5px rgba(0,0,0,0.1); - cursor: text; - - -webkit-user-select: text; - user-select: text; - /* nested user-select in FF is broken as of Jan 2012, don't use it */ - } - - .color-row li:hover span { - display: block; - } - - /* triangle callout */ - .color-row li span:after { - content: ''; - display: block; - position: absolute; - left: 50%; - bottom: -16px; - border: 8px solid transparent; - border-top-color: #fff; - width: 0; - height: 0; - margin-left: -8px; - } -</style> - -<a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html"> - <div> - <h3>Material Design</h3> - <p>Color<p> - </div> -</a> - -<p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast -between visual components. Note that red and green may be indistinguishable to color-blind users.</p> - - <div class="color-row-container"> - <ul class="color-row"> - <li><span>#33b5e5</span></li> - <li><span>#aa66cc</span></li> - <li><span>#99cc00</span></li> - <li><span>#ffbb33</span></li> - <li><span>#ff4444</span></li> - </ul> - </div> - - <div class="color-row-container"> - <ul class="color-row"> - <li class="thin"><span>#0099cc</span></li> - <li class="thin"><span>#9933cc</span></li> - <li class="thin"><span>#669900</span></li> - <li class="thin"><span>#ff8800</span></li> - <li class="thin"><span>#cc0000</span></li> - </ul> - </div> - -<h2 id="palette">Palette</h2> - -<p>Blue is the standard accent color in Android's color palette. Each color has a corresponding darker -shade that can be used as a complement when needed.</p> -<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches (@color page)');" - href="{@docRoot}downloads/design/Android_Design_Color_Swatches_20120229.zip">Download the swatches</a></p> - -<img src="{@docRoot}design/media/color_spectrum.png"> - -<script> - $(document).ready(function() { - $('.color-row li').each(function() { - var color = $(this).text(); - $(this).css('background-color', color); - $(this).find('span') - .css('color', color) - .text(color.toUpperCase()); - }); - - }); -</script> diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd deleted file mode 100644 index 8b6f3ab..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="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_launcher_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-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="col-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="col-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="cols"> - <div class="col-4"> - - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/iconography_launcher_example.png"> - - </div> - <!-- 2 free columns --> -</div> - -<div class="cols"> - <div class="col-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="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_actionbar_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-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="col-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="col-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="cols"> - <div class="col-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="col-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="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_small_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-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="col-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="col-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="cols"> - <div class="col-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="col-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="cols"> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_size.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_focal.png"> - - </div> - <div class="col-4"> - - <img src="{@docRoot}design/media/iconography_notification_style.png"> - - </div> -</div> - -<div class="cols"> - <div class="col-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="col-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="col-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="cols"> - <div class="col-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="col-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> - - diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd deleted file mode 100644 index 97915b8..0000000 --- a/docs/html/design/style/metrics-grids.jd +++ /dev/null @@ -1,90 +0,0 @@ -page.title=Metrics and Grids -page.metaDescription=Optimize your app's UI by designing layouts based on density-independent grids. -page.tags="layout","screens" -meta.tags="multiple screens, layout, tablets" -page.image=/design/media/metrics_closeup.png -@jd:body - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/layout/metrics-keylines.html"> - <div> - <h3>Material Design</h3> - <p>Metrics and Keylines<p> - </div> -</a> - - -<p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per -inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as -falling into a particular size bucket and density bucket:</p> -<ul> - <li>The size buckets are <em>handset</em> (smaller than -600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi) -screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> - <li>The density buckets are <acronym -title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 -dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title -="Extra-high density (320 dpi)">XHDPI</acronym>, <acronym title -="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>, and <acronym title -="Extra-extra-extra!-high density (640 dpi)">XXXHDPI</acronym>.</li> -</ul> - -<p>Optimize your application's UI by designing -alternative layouts for some of the different size buckets, and provide alternative bitmap images -for different density buckets.</p> - -<p>Because it's important that you design and implement your layouts for multiple densities, -the guidelines below and throught the documentation -refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel -on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p> - - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/metrics_diagram.png"> - - </div> - <div class="col-5"> - -<h4>Space considerations</h4> -<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p> -<p>To see more, visit the -<a href="http://developer.android.com/resources/dashboard/screens.html" target="_blank"> -Screen Sizes and Densities Device Dashboard</a>.</p> - - </div> -</div> - - -<h2 id="48dp-rhythm">48dp Rhythm</h2> - -<p>Touchable UI components are generally laid out along 48dp units.</p> - -<img src="{@docRoot}design/media/metrics_48.png"> - -<div class="vspace size-2"> </div> - -<h4>Why 48dp?</h4> -<p>On average, 48dp translate to a physical size of about 9mm (with some variability). This is -comfortably in the range of recommended target sizes (7-10 mm) for touchscreen objects and users -will be able to reliably and accurately target them with their fingers.</p> -<p>If you design your elements to be at least 48dp high and wide you can guarantee that:</p> -<ul> -<li>your targets will never be smaller than the minimum recommended target size of 7mm regardless of - what screen they are displayed on.</li> -<li>you strike a good compromise between overall information density on the one hand, and - targetability of UI elements on the other.</li> -</ul> - -<img src="{@docRoot}design/media/metrics_closeup.png"> - -<div class="vspace size-2"> </div> - -<h4>Mind the gaps</h4> -<p>Spacing between each UI element is 8dp.</p> - -<h2 id="examples">Examples</h2> - -<img src="{@docRoot}design/media/metrics_forms.png"> diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd deleted file mode 100644 index 6c8169b..0000000 --- a/docs/html/design/style/themes.jd +++ /dev/null @@ -1,53 +0,0 @@ -page.title=Themes -@jd:body - -<div class="cols"> - <div class="col-5"> - - <img src="{@docRoot}design/media/themes_holo_light.png"> - <div class="figure-caption"> - Gmail in Holo Light. - </div> - - <img src="{@docRoot}design/media/themes_holo_dark.png"> - <div class="figure-caption"> - Settings in Holo Dark. - </div> - - </div> - <div class="col-7"> - - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/style/color.html#color-themes"> - <div> - <h3>Material Design</h3> - <p>Color Themes<p> - </div> -</a> - - -<p>Themes are Android's mechanism for applying a consistent style to an app or activity. -The style specifies the visual properties of the elements that make up your user interface, -such as color, height, padding and font size. To promote greater cohesion between all apps -on the platform, Android provides two system themes that you can choose from when building apps:</p> -<ul> -<li>Holo Light</li> -<li>Holo Dark</li> -</ul> -<p>Applying these themes will go a long way in helping you to build apps that fit right into the -general visual language of Android.</p> -<p>Pick the system theme that best matches the needs and design aesthetics for your app. If your -desire is to have a more distinct look for your app, using one of the system themes as a starting -point for your customizations is a good idea. The system themes provide a solid foundation on top -of which you can selectively implement your own visual stylings.</p> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to apply themes such as Holo Light and Dark, and - how to build your own themes, see the - <a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> API guide.</p> -</div> - - </div> -</div> diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd deleted file mode 100644 index e1fac2f..0000000 --- a/docs/html/design/style/touch-feedback.jd +++ /dev/null @@ -1,95 +0,0 @@ -page.title=Touch Feedback -page.tags=input,button -@jd:body - -<div class="cols" style="margin-bottom: -100px"> -<div class="col-7"> - -<a class="notice-designers-material" - href="http://www.google.com/design/spec/animation/responsive-interaction.html"> - <div> - <h3>Material Design</h3> - <p>Responsive Interaction<p> - </div> -</a> - - -<p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors -of gestures, and indicate what actions are enabled and disabled.</p> - -<p><strong>Be responsive to touches in a gentle way</strong>. Whenever a user touches an -actionable area in your app, let them know the app is "listening" by providing a visual -response. Make it subtle —just slightly lighter or darker than the untouched color. This -provides two benefits:</p> - -<ul> -<li><a href="{@docRoot}design/get-started/principles.html#sprinkle-encouragement">Sprinkles -of encouragement</a> are more pleasant than jolts.</li> -<li>Incorporating <a href="{@docRoot}design/style/branding.html">your branding</a> is much -easier because the default touch feedback works with whatever hue you choose.</li> -</ul> - -</div> - -<div class="col-6" style="float:right;"> - <video class="play-on-hover" width="268" height="442" autoplay style="border:1px solid #ddd;background-color:#f9f9f9;" poster=""> - <source src="{@docRoot}design/media/touch_feedback.mp4" type="video/mp4"> - <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm"> - <source src="{@docRoot}design/media/touch_feedback.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - <div style="color:#a3a3a3;margin-left:130px;"><em>Click image to replay...</em></div> - </div> -</div> - -<h4 style="clear:both;">States</h4> - - -<div class="vspace size-1"> </div> - -<img src="{@docRoot}design/media/touch_feedback_states.png"> -<div class="figure-caption"> - Most of Android's UI elements have touch feedback built in, including - states that indicate whether touching the element will have any effect. -</div> - -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <h4>Communication</h4> -<p>When your objects react to more complex gestures, help users -understand what the outcome will be.</p> - -<p>In Recents, when a user starts swiping a thumbnail left or right, it -begins to dim. This helps the user understand that swiping will cause the -item to be removed.</p> - </div> - <div class="col-7"> - - <img src="{@docRoot}design/media/touch_feedback_manipulation.png"> - - </div> -</div> -<div class="vspace size-3"> </div> - -<div class="cols"> - <div class="col-6"> - - <img src="{@docRoot}design/media/touch_feedback_communication.png"> - <p><em>If a user attempts to scroll past the last home screen panel, the screen - content tilts to the right to indicate that further navigation in this direction - isn’t possible.</em></p> - - </div> - <div class="col-6"> - -<h4>Boundaries</h4> -<p> - When users try to scroll past the beginning or end of a scrollable area, - communicate the boundary with a visual cue. Many of Android's scrollable UI - widgets, like lists and grid lists, have support for boundary feedback built - in. If you’re building custom widgets, keep boundary feedback in mind and - provide it from within your app. -</p> diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd deleted file mode 100644 index af76c40..0000000 --- a/docs/html/design/style/typography.jd +++ /dev/null @@ -1,78 +0,0 @@ -page.title=Typography -page.tags="textview","font" -page.metaDescription=How to use typography in your Android apps. -@jd:body - -<div class="cols"> - <div class="col-8"> - - <img src="{@docRoot}design/media/typography_main.png"> - - </div> - -<a class="notice-designers-material" - style="width: 278px;" - href="http://www.google.com/design/spec/style/typography.html"> - <div> - <h3>Material Design</h3> - <p>Typography<p> - </div> -</a> - -<div class="col-5"> - -<p> - <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" - href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a> -</p> - -<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm, -and alignment with an underlying grid. Successful deployment of these tools is essential to help -users quickly understand a screen of information. To support such use of typography, Ice Cream -Sandwich introduced a new type family named -<a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto</a>, created -specifically for the requirements of UI and high-resolution screens.</p> - -<p>The current {@link android.widget.TextView} framework offers Roboto in thin, light, regular and bold -weights, along with an italic style for each weight. The framework also offers the -<a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed</a> -variant in regular and bold weights, along with an italic style for each weight.</p> - - <img src="{@docRoot}design/media/typography_variants@2x.png" width="220"> - -<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specimen Book (@typography page)');" - href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p> - - </div> -</div> - -<hr> - -<div class="cols"> - <div class="col-6"> - -<h4>Default type colors</h4> -<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and -<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and -<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for -touch feedback states when used inside UI elements.</p> - - <img src="{@docRoot}design/media/typography_defaults.png"> - - </div> - <div class="col-6"> - -<h4>Typographic Scale</h4> -<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too -many different sizes in the same UI can be messy. The Android framework uses the following limited -set of type sizes:</p> - -<img src="{@docRoot}design/media/typography_sizes.png"> - -<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support -these accessibility features, type should be specified in scale-independent pixels -(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>) -wherever possible. Layouts supporting scalable types should be tested against these settings.</p> - - </div> -</div> diff --git a/docs/html/design/style/writing.jd b/docs/html/design/style/writing.jd deleted file mode 100644 index 0c62a55..0000000 --- a/docs/html/design/style/writing.jd +++ /dev/null @@ -1,322 +0,0 @@ -page.title=Writing Style -page.tags=dialog,toast,notification -@jd:body - -<h2 id="voa">Android's Voice</h2> - -<p>When writing text that appears in your app, keep it concise, simple, and friendly.</p> - -<h4 id="concise">Concise</h4> - -<ul> - <li>Describe only what the user needs to know.</li> - <li>Eliminate redundancy, such as titles that restate the body of an information box.</li> - <li>Keep text as short as possible.</li> -</ul> - -<p><em>Avoid wordy, stilted text</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Consult the documentation that came with your phone for further instructions. - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - Read the instructions that came with your phone. - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Don't provide unnecessary information</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">From a Setup Wizard screen</div> - - <table class="ui-table bad"> - <thead> - <tr> - <th> - Signing in... - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Your phone needs to communicate with<br> - Google servers to sign in to your account.<br> - This may take up to five minutes. - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">From a Setup Wizard screen</div> - - <table class="ui-table good"> - <thead> - <tr> - <th> - Signing in... - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Your phone is contacting Google.<br> - This can take up to 5 minutes. - </td> - </tr> - </tbody> - </table> - - </div> -</div> - -<h4 id="simple">Simple</h4> - -<ul> - <li>Use short words, active verbs, and common nouns.</li> - <li>Put the most important thing first. “Front-load” the first 11 characters - with the most salient information in the string.</li> - <li>Don’t try to explain subtle differences. They are lost on most users.</li> -</ul> - -<p><em>Focus on the user's concern, not technical details</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Manually control GPS to prevent other apps from using it - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - To save power, switch Location mode to Battery saving - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Put top news first</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - 77 other people +1’d this, including Larry Page - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - Larry Page and 76 others +1’d this - </td></tr></tbody></table> - - </div> -</div> - -<p><em>Put the user's goal first</em></p> - -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - - <div class="do-dont-label bad">Don't</div> - - <table class="ui-table good"><tbody><tr><td> - Touch Next to complete setup using a Wi-Fi connection - </td></tr></tbody></table> - - </div> - <div class="col-6"> - - <div class="do-dont-label good">Do</div> - - <table class="ui-table good"><tbody><tr><td> - To finish setup using Wi-Fi, touch Next - </td></tr></tbody></table> - - </div> -</div> - - -<h4 id="friendly">Friendly</h4> - -<ul> - <li>Use contractions.</li> - <li>Talk directly to the reader. Use “you” to refer to the reader.</li> - <li>Keep your tone casual and conversational, but avoid slang.</li> -</li> -</ul> - -<p><em>Avoid being confusing or annoying</em></p> -<div class="cols"> - <div class="col-6 layout-with-list-item-margins"> - <div class="do-dont-label bad">Don't</div> - <table class="ui-table bad"> - <thead> - <tr> - <th> - Sorry! - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Activity MyAppActivity (in application<br /> - MyApp) is not responding - </td> - </tr> - </tbody> - </table> - - </div> - <div class="col-6"> - <div class="do-dont-label good">Do</div> - <table class="ui-table good"> - <thead> - <tr> - <th> - MyApp isn’t responding - </th> - </tr> - </thead> - <tbody> - <tr> - <td> - Do you want to close it? - </td> - </tr> - </tbody> - </table> - </div> -</div> - - -<h4>Words to avoid</h4> - -<div style="padding:5px 2.1em;"> -<table> - <tr> - <td class="do-dont-label bad" style="width:40%">Don't use</td> - <td class="do-dont-label good" style="width:40%">Use</td> - </tr> - <tr> - <td>one, two, three, four, ...</td> - <td>1, 2, 3, 4, ...</td> - </tr> - <tr> - <td>application</td> - <td>app</td> - </tr> - <tr> - <td>cannot, could not, do not, did not -will not, you will</td> - <td><em>Contractions:</em> can’t, couldn’t, don’t, didn’t won’t, you’ll, and so on</td> - </tr> - <tr> - <td>okay, ok</td> - <td>OK</td> - </tr> - <tr> - <td>please, sorry, thank you</td> - <td><em>Attempts at politeness can annoy the user, especially in messages that say - something has gone wrong.<br /> - Exception: In Japanese, “please” is mandatory and imperative verbs should - be localized accordingly (turn on -> please turn on). - </em></td> - </tr> - <tr> - <td>there is, there are, it is<br /> - <em>and other “disappeared” subjects (grammatical expletives)</em></td> - <td><em>Use a noun as the subject</em></td> - </tr> - <tr> - <td>abort, kill, terminate</td> - <td>stop, cancel, end, exit</td> - </tr> - <tr> - <td>fail, failed, <em>negative language</em></td> - <td><em>In general, use positive phrasing<br /> - (for example, “do” rather than “don’t,” except in cases such as “Don’t show - again,” “Can’t connect,” and so on.)</em></td> - </tr> - <tr> - <td>me, I, my, mine</td> - <td>you, your, yours</td> - </tr> - <tr> - <td>Are you sure? Warning!</td> - <td><em>Tell user the consequence instead, for example, “You’ll lose all photos - and media”</em></td> - </tr> -</table> - -</div> - -<h2 id="formatting_text">Formatting text</h2> - -<h4 id="capitalization">Capitalization</h4> - -<ul> - <li>Use sentence-style capitalization for all UI strings: “Words to live by.”</li> - <li>Capitalize all important words in: - <ul> - <li>App names (Calendar, Google Drive)</li> - <li>Named features (Android Beam, Face Unlock)</li> - <li>Proper nouns (Statue of Liberty, San Francisco Giants)</li> - </ul> - </li> - <li>Be conservative. Don't capitalize words that aren't part of a formal feature name: - <ul> - <li>Sim card lock, Home screen, not Sim Card Lock, Home Screen.</li> - </ul> - </li> -</ul> - - -<h4 id="punctuation">Punctuation</h4> -<ul> - <li><strong>Period.</strong> Don't use a period after a single sentence or - phrase used in isolation, such as in a toast, label, or notification. Wherever two or - more sentences run together, use a period for each sentence. </li> - <li><strong>Ellipsis.</strong> Use the ellipsis character (…) (Option-; on MacOS and &hellip; - in HTML) to indicate - <ul> - <li>Incompleteness, such as an action in progress (“Downloading...”) or truncated text.</li> - <li>That a menu item (such as Print… or Share…) leads to further UI involving significant - choices. Exception: Commands whose wording already implies further (but limited) UI, such - as <strong>Find in page</strong> or <strong>Pick a date</strong>, do not require an - ellipsis. </li> - </ul> - </li> -</ul> |