Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge "Doc change: merge landing page and header/footer designs." into mnc-preview-docs

Browse Source
This commit is contained in:
Dirk Dougherty
2015-05-05 02:27:46 +00:00
committed by Android (Google) Code Review
parent 39220a7e92 6c1c263efa
commit ecfed34d3e
117 changed files with 1465 additions and 1221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/html/auto/index.jd
View File

@@ -3,7 +3,7 @@ page.viewport_width=970
fullpage=true fullpage=true
no_footer_links=true no_footer_links=true
page.type=about page.type=about
page.image=/auto/images/hero.jpg page.image=/images/cards/android-auto_2x.png
@jd:body @jd:body
@@ -12,9 +12,6 @@ page.image=/auto/images/hero.jpg
#jd-content>.content-footer.wrap { #jd-content>.content-footer.wrap {
display:none; display:none;
} }
#hero-height {
height:calc(100% - 100px);
}
.img-logo { .img-logo {
margin:0 auto; margin:0 auto;
display:block; display:block;

28
docs/html/design/building-blocks/buttons.jd
View File

@@ -21,27 +21,27 @@ page.tags=button,input
will occur when the user touches it. A button can have an image, text, or both. will occur when the user touches it. A button can have an image, text, or both.
</p> </p>
<div class="layout-content-row" style="margin-top:22px"> <div class="cols" style="margin-top:22px">
<div class="layout-content-col span-3"> <div class="col-3">
<img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">
</div> </div>
<div class="layout-content-col span-3"> <div class="col-3">
<img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;">
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:0;"> <div class="cols" style="margin-top:0;">
<div class="layout-content-col span-3"> <div class="col-3">
<p>An image alone works best when the action can be represented by a symbol that's well understood.</p> <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>
</div> </div>
<div class="layout-content-col span-3"> <div class="col-3">
<p>Text alone is most appropriate for actions that would be difficult to <p>Text alone is most appropriate for actions that would be difficult to
represent visually, or are critical to convey in words to avoid any ambiguity.</p> represent visually, or are critical to convey in words to avoid any ambiguity.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<p> <p>
Both an icon and text is most appropriate when they complement each other: Both an icon and text is most appropriate when they complement each other:
each carrying its own bit of information, but together making a larger whole. each carrying its own bit of information, but together making a larger whole.
@@ -57,24 +57,24 @@ page.tags=button,input
<h3>What about button backgrounds?</h3> <h3>What about button backgrounds?</h3>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>For <strong>image-only</strong> buttons, a background isn't necessary because <p>For <strong>image-only</strong> buttons, a background isn't necessary because
users are accustomed to interacting with objects.</p> users are accustomed to interacting with objects.</p>
<div class="layout-content-row" style="margin-left:72px"> <div class="cols" style="margin-left:72px">
<div class="layout-content-col span-2"> <div class="col-2">
<div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>
<img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">
</div> </div>
<div class="layout-content-col span-2" style="width:29px;margin-left:10px;"> <div class="col-2" style="width:29px;margin-left:10px;">
<div class="do-dont-label good"><strong>Do</strong></div> <div class="do-dont-label good"><strong>Do</strong></div>
<img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">
</div> </div>
</div> </div>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<p> <p>
For buttons <strong>with text</strong>, a background is also usually For buttons <strong>with text</strong>, a background is also usually
unnecessary. To invite users to touch, phrase it as a clear action (e.g. unnecessary. To invite users to touch, phrase it as a clear action (e.g.

26
docs/html/design/building-blocks/dialogs.jd
View File

@@ -62,13 +62,13 @@ user to adjust settings or enter text.</p>
proceeding. They differ slightly in appearance based upon the severity and impact of the message proceeding. They differ slightly in appearance based upon the severity and impact of the message
conveyed.</p> conveyed.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/dialogs_w_no_title.png"> <img src="{@docRoot}design/media/dialogs_w_no_title.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Alerts without title bars</h4> <h4>Alerts without title bars</h4>
<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed <p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
@@ -79,13 +79,13 @@ this conversation?") or make a clear statement whose relationship to the action
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/dialogs_w_title.png"> <img src="{@docRoot}design/media/dialogs_w_title.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Alerts with title bars</h4> <h4>Alerts with title bars</h4>
<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving <p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
@@ -99,8 +99,8 @@ available based on the title and the text of the action buttons.</p>
</div> </div>
<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
<table class="ui-table bad"> <table class="ui-table bad">
<thead> <thead>
@@ -112,7 +112,7 @@ available based on the title and the text of the action buttons.</p>
</thead> </thead>
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
<table class="ui-table bad"> <table class="ui-table bad">
<thead> <thead>
@@ -124,7 +124,7 @@ available based on the title and the text of the action buttons.</p>
</thead> </thead>
</table> </table>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
<table class="ui-table good"> <table class="ui-table good">
<thead> <thead>
@@ -151,8 +151,8 @@ advances the workflow, and simply touching outside the popup dismisses it.</p>
<h2 id="toasts">Toasts</h2> <h2 id="toasts">Toasts</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<div class="vspace size-3"></div> <div class="vspace size-3"></div>
@@ -177,7 +177,7 @@ continue editing later. Toasts automatically disappear after a timeout.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/dialogs_toasts.png"> <img src="{@docRoot}design/media/dialogs_toasts.png">

18
docs/html/design/building-blocks/grid-lists.jd
View File

@@ -36,13 +36,13 @@ cutting off grid items to communicate where the overflow is located.</p>
<p>Avoid creating grid lists that scroll in two dimensions.</p> <p>Avoid creating grid lists that scroll in two dimensions.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/gridview_vertical.png"> <img src="{@docRoot}design/media/gridview_vertical.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Vertical scrolling</h4> <h4>Vertical scrolling</h4>
<p>Vertically scrolling grid list items are sorted in traditional western reading direction: <p>Vertically scrolling grid list items are sorted in traditional western reading direction:
@@ -53,13 +53,13 @@ scheme when the user rotates the screen.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/gridview_horizontal.png"> <img src="{@docRoot}design/media/gridview_horizontal.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Horizontal scrolling</h4> <h4>Horizontal scrolling</h4>
<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically <p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
@@ -80,13 +80,13 @@ navigation.</p>
<p>Use labels to display additional contextual information for your grid list items.</p> <p>Use labels to display additional contextual information for your grid list items.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/gridview_style.png"> <img src="{@docRoot}design/media/gridview_style.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Style</h4> <h4>Style</h4>
<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to <p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to

6
docs/html/design/building-blocks/lists.jd
View File

@@ -15,13 +15,13 @@ well as drilldown navigation.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row clearfix"> <div class="cols clearfix">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/lists_main.png"> <img src="{@docRoot}design/media/lists_main.png">
</div> </div>
<div class="layout-content-col span-4 with-callouts"> <div class="col-4 with-callouts">
<ol style="margin-bottom: 60px;"> <ol style="margin-bottom: 60px;">
<li> <li>

6
docs/html/design/building-blocks/pickers.jd
View File

@@ -13,13 +13,13 @@ page.tags=datepicker,timepicker
up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe
gesture.</p> gesture.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/picker_space.png"> <img src="{@docRoot}design/media/picker_space.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Space considerations</h4> <h4>Space considerations</h4>
<p>Pickers can be used inline on a form, but their relatively large footprint is best suited for <p>Pickers can be used inline on a form, but their relatively large footprint is best suited for

18
docs/html/design/building-blocks/progress.jd
View File

@@ -32,13 +32,13 @@ page.tags=progressbar,download,network
<p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p> <p>Two styles are available: a bar and a circle. Each is offered in a variety of sizes, in both Holo Light and Holo Dark themes. Choose the appropriate style and size for the surrounding context. For example, the largest activity circle works well when displayed in a blank content area, but not in a smaller dialog box. Each operation should only be represented by one activity indicator.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/progress_activity.png"> <img src="{@docRoot}design/media/progress_activity.png">
</div> </div>
<div class="layout-content-col span-7 with-callouts"> <div class="col-7 with-callouts">
<ol> <ol>
<li class="value-1"><h4>Activity bar</h4> <li class="value-1"><h4>Activity bar</h4>
@@ -49,13 +49,13 @@ page.tags=progressbar,download,network
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/progress_activity2.png"> <img src="{@docRoot}design/media/progress_activity2.png">
</div> </div>
<div class="layout-content-col span-7 with-callouts"> <div class="col-7 with-callouts">
<ol> <ol>
<li class="value-2"><h4>Activity circle</h4> <li class="value-2"><h4>Activity circle</h4>
@@ -91,11 +91,11 @@ In all of the Google Play apps (Music, Books, Movies, Magazines), we wanted the
<p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p> <p>The color indicates whether it's downloaded (blue) or not (gray). The appearance of the pin indicates whether the download is permanent (white, upright) or temporary (gray, diagonal). And when state is in the process of changing, progress is indicated by a moving pie chart.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/progress_activity_custom_app.png"> <img src="{@docRoot}design/media/progress_activity_custom_app.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="figure-caption"> <div class="figure-caption">
Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design. Across Google Play apps with different layouts, the same custom indicator appears with each item. It communicates download state as well as progress, in a compact package that can be incorporated into any screen design.
</div> </div>

12
docs/html/design/building-blocks/seek-bars.jd
View File

@@ -15,13 +15,13 @@ by moving the slider thumb. The smallest value is to the left, the largest to th
interactive nature of the slider makes it a great choice for settings that reflect intensity levels, interactive nature of the slider makes it a great choice for settings that reflect intensity levels,
such as volume, brightness, or color saturation.</p> such as volume, brightness, or color saturation.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/seekbar_example.png"> <img src="{@docRoot}design/media/seekbar_example.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
@@ -32,8 +32,8 @@ such as volume, brightness, or color saturation.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/seekbar_style.png"> <img src="{@docRoot}design/media/seekbar_style.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -41,5 +41,5 @@ such as volume, brightness, or color saturation.</p>
</div> </div>
</div> </div>
<div class="layout-content-col span-4">&nbsp;</div> <div class="col-4">&nbsp;</div>
</div> </div>

6
docs/html/design/building-blocks/spinners.jd
View File

@@ -22,8 +22,8 @@ its currently selected value. Touching the spinner displays a dropdown menu with
values, from which the user can select a new one.</p> values, from which the user can select a new one.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/spinners_form.png"> <img src="{@docRoot}design/media/spinners_form.png">
@@ -34,7 +34,7 @@ fields. For example, a text field might let you edit an email address for a cont
associated spinner allows you to select whether it's a Home or Work address.</p> associated spinner allows you to select whether it's a Home or Work address.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/spinners_actionbar.png"> <img src="{@docRoot}design/media/spinners_actionbar.png">

6
docs/html/design/building-blocks/tabs.jd
View File

@@ -27,14 +27,14 @@ aspects of your app, or to browse categorized data sets.</p>
<h2 id="scrollable">Scrollable Tabs</h2> <h2 id="scrollable">Scrollable Tabs</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate <p>Scrolling tab controls can contain a larger number of items than a standard tab control. To navigate
to the next/previous view, swipe left or right.</p> to the next/previous view, swipe left or right.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<video width="400" class="with-shadow play-on-hover" autoplay> <video width="400" class="with-shadow play-on-hover" autoplay>
<source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4"> <source src="{@docRoot}design/media/tabs_scrolly.mp4" type="video/mp4">

16
docs/html/design/building-blocks/text-fields.jd
View File

@@ -24,8 +24,8 @@ typing, text fields allow for a variety of other activities, such as text select
paste) and data lookup via auto-completion.</p> paste) and data lookup via auto-completion.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-12"> <div class="col-12">
<img src="{@docRoot}design/media/text_input_singlevsmultiline.png"> <img src="{@docRoot}design/media/text_input_singlevsmultiline.png">
@@ -39,8 +39,8 @@ overflow text and scroll vertically when the cursor reaches the lower edge.</p>
<img src="{@docRoot}design/media/text_input_typesandtypedown.png"> <img src="{@docRoot}design/media/text_input_typesandtypedown.png">
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Text field types</h4> <h4>Text field types</h4>
<p>Text fields can have different types, such as number, message, or email address. The type determines <p>Text fields can have different types, such as number, message, or email address. The type determines
@@ -48,7 +48,7 @@ what kind of characters are allowed inside the field, and may prompt the virtual
optimize its layout for frequently used characters.</p> optimize its layout for frequently used characters.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Auto-complete text fields</h4> <h4>Auto-complete text fields</h4>
<p>Use auto-complete text fields to present real-time completions or search results in popups, so users <p>Use auto-complete text fields to present real-time completions or search results in popups, so users
@@ -63,13 +63,13 @@ can enter information more accurately and efficiently.</p>
mode that facilitates extending the selection or choosing an action to perform on the selected text. mode that facilitates extending the selection or choosing an action to perform on the selected text.
Selection mode includes:</p> Selection mode includes:</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/text_input_textselection.png"> <img src="{@docRoot}design/media/text_input_textselection.png">
</div> </div>
<div class="layout-content-col span-4 with-callouts"> <div class="col-4 with-callouts">
<ol> <ol>
<li> <li>

3
docs/html/design/devices.jd
View File

@@ -1,8 +1,9 @@
page.title=Devices page.title=Android devices
page.viewport_width=970 page.viewport_width=970
section.landing=true section.landing=true
header.hide=1 header.hide=1
footer.hide=1 footer.hide=1
page.image=images/cards/android-devices_2x.jpg
@jd:body @jd:body
<style> <style>

98
docs/html/design/downloads/index.jd
View File

@@ -9,8 +9,8 @@ and implementation.</p>
<h2 id="stencils">Phone &amp; Tablet Stencils</h2> <h2 id="stencils">Phone &amp; Tablet Stencils</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<p>Drag and drop your way to beautifully designed Android apps. The stencils feature the <p>Drag and drop your way to beautifully designed Android apps. The stencils feature the
@@ -19,13 +19,13 @@ phone and tablet outlines to frame your creations. Source files for icons and co
available.</p> available.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_stencils.png"> <img src="{@docRoot}design/media/downloads_stencils.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="notice-designers-material" <a class="notice-designers-material"
style="width:218px;" style="width:218px;"
href="http://www.google.com/design/spec/resources/layout-templates.html"> href="http://www.google.com/design/spec/resources/layout-templates.html">
@@ -36,7 +36,7 @@ available.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="notice-designers-material" <a class="notice-designers-material"
style="width:218px;" style="width:218px;"
href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
@@ -47,7 +47,7 @@ available.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p> <p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Photoshop Sources');"
href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a> href="{@docRoot}downloads/design/Android_Design_Stencils_Sources_20131106.zip">Adobe&reg; Photoshop&reg; Stencils and Sources</a>
@@ -63,8 +63,8 @@ available.</p>
<h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2> <h2 id="action-bar-icon-pack">Action Bar Icon Pack</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<p>Action bar icons are graphic buttons that represent the most important actions people can take <p>Action bar icons are graphic buttons that represent the most important actions people can take
within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p> within your app. <a href="{@docRoot}design/style/iconography.html">More on Action Bar Iconography</a></p>
@@ -73,13 +73,13 @@ use with the Holo Light and Holo Dark themes. The package also includes unstyled
modify to match your theme, plus source files.</p> modify to match your theme, plus source files.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_actionbar_style.png"> <img src="{@docRoot}design/media/iconography_actionbar_style.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="notice-designers-material" <a class="notice-designers-material"
style="width:218px;" style="width:218px;"
href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html"> href="http://www.google.com/design/spec/resources/sticker-sheets-icons.html">
@@ -90,7 +90,7 @@ modify to match your theme, plus source files.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p> <p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Action Bar Icons');"
@@ -106,18 +106,18 @@ modify to match your theme, plus source files.</p>
<h2 id="Wear">Android Wear Materials</h2> <h2 id="Wear">Android Wear Materials</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>UI toolkit</h4> <h4>UI toolkit</h4>
<p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p> <p>The toolkit contains detailed specs and measurements of all of the primary Android Wear UI components. Available in PDF and Illustrator formats.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220"> <img src="{@docRoot}design/media/downloads_wear_toolkit.png" width="220">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Toolkit AI');"
href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe&reg; Illustrator&reg; Toolkit</a> href="{@docRoot}downloads/design/Android_Wear_Toolkit_20140722.ai">Adobe&reg; Illustrator&reg; Toolkit</a>
@@ -127,18 +127,18 @@ modify to match your theme, plus source files.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Sample user flow patterns</h4> <h4>Sample user flow patterns</h4>
<p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities. <p>Examples of how to chain together simple Android Wear UI components into common user flow patterns, from simple notifications to complex interactions involving full screen activities.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_flows.png" width="220"> <img src="{@docRoot}design/media/downloads_wear_flows.png" width="220">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns AI');"
href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe&reg; Illustrator&reg; App Patterns</a> href="{@docRoot}downloads/design/Android_Wear_Patterns_20140722.ai">Adobe&reg; Illustrator&reg; App Patterns</a>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear App Patterns PDF');"
@@ -147,99 +147,99 @@ modify to match your theme, plus source files.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Sample app design mocks</h4> <h4>Sample app design mocks</h4>
<p>Stream cards and UI elements for some example apps in fully editable PSD format. <p>Stream cards and UI elements for some example apps in fully editable PSD format.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_psds.png" width="220"> <img src="{@docRoot}design/media/downloads_wear_psds.png" width="220">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Sample PSD Mocks');"
href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe&reg; Photoshop&reg; mocks</a> href="{@docRoot}downloads/design/Android_Wear_Sample_Assets.zip">Adobe&reg; Photoshop&reg; mocks</a>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Watch faces UI toolkit</h4> <h4>Watch faces UI toolkit</h4>
<p>Detailed specifications and measurements for the the background canvas, notification cards, and <p>Detailed specifications and measurements for the the background canvas, notification cards, and
system indicators. system indicators.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220"> <img src="{@docRoot}design/media/downloads_wear_DesignSpec_Icon.png" width="220">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Specifications');"
href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a> href="{@docRoot}downloads/design/AndroidWear_DesignSpec_11.13.pdf">PDF Toolkit</a>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Slide watch face</h4> <h4>Slide watch face</h4>
<p>Example of a watch face design in AI format. <p>Example of a watch face design in AI format.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150" <img src="{@docRoot}design/media/downloads_wear_Slide_Ai_Icon.png" width="150"
style="width:150px;margin:0 auto;display:block"> style="width:150px;margin:0 auto;display:block">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example');"
href="{@docRoot}downloads/design/Slide.ai">Adobe&reg; Illustrator&reg; Design</a> href="{@docRoot}downloads/design/Slide.ai">Adobe&reg; Illustrator&reg; Design</a>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Slide watch face specifications</h4> <h4>Slide watch face specifications</h4>
<p>Design specifications for the Slide watch face in PSD format. <p>Design specifications for the Slide watch face in PSD format.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150" <img src="{@docRoot}design/media/downloads_wear_Slide_Psd_Icon.png" width="150"
style="width:150px;margin:0 auto;display:block"> style="width:150px;margin:0 auto;display:block">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
href="{@docRoot}downloads/design/Slide.psd">Adobe&reg; Photoshop&reg; Specifications</a> href="{@docRoot}downloads/design/Slide.psd">Adobe&reg; Photoshop&reg; Specifications</a>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Watch face icon example</h4> <h4>Watch face icon example</h4>
<p>Template for creating watch face icons for the carousel on Android Wear devices. <p>Template for creating watch face icons for the carousel on Android Wear devices.
</p> </p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150" <img src="{@docRoot}design/media/downloads_wear_Slide_IconExample.png" width="150"
style="width:150px;margin:0 auto;display:block"> style="width:150px;margin:0 auto;display:block">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Wear Watch Face Example Specifications');"
href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe&reg; Photoshop&reg; Icon</a> href="{@docRoot}downloads/design/Slide_IconExample.psd">Adobe&reg; Photoshop&reg; Icon</a>
</div> </div>
@@ -250,8 +250,8 @@ system indicators.
<h2 id="style">Style</h2> <h2 id="style">Style</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4 id="roboto">Roboto</h4> <h4 id="roboto">Roboto</h4>
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the <p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
@@ -262,13 +262,13 @@ requirements of UI and high-resolution screens.</p>
<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p> <p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png"> <img src="{@docRoot}design/media/downloads_roboto_specimen_preview.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="notice-designers-material" <a class="notice-designers-material"
style="width:218px;" style="width:218px;"
href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html"> href="http://www.google.com/design/spec/resources/roboto-noto-fonts.html">
@@ -279,7 +279,7 @@ requirements of UI and high-resolution screens.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p> <p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
@@ -291,8 +291,8 @@ requirements of UI and high-resolution screens.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Color</h4> <h4>Color</h4>
<p>In Android's color palette, each color has a corresponding darker <p>In Android's color palette, each color has a corresponding darker
@@ -300,13 +300,13 @@ shade that can be used as a complement when needed.</p>
<p><a href="{@docRoot}design/style/color.html">More on Color</a></p> <p><a href="{@docRoot}design/style/color.html">More on Color</a></p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/downloads_color_swatches.png"> <img src="{@docRoot}design/media/downloads_color_swatches.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<a class="notice-designers-material" <a class="notice-designers-material"
style="width:218px;" style="width:218px;"
href="http://www.google.com/design/spec/resources/color-palettes.html"> href="http://www.google.com/design/spec/resources/color-palettes.html">
@@ -317,7 +317,7 @@ shade that can be used as a complement when needed.</p>
</a> </a>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p> <p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Color Swatches');"

9
docs/html/design/get-started/creative-vision.jd
View File

@@ -1,4 +1,5 @@
page.title=Creative Vision page.title=Creative Vision
page.image=images/cards/design-creative-vision_2x.jpg
@jd:body @jd:body
<img src="{@docRoot}design/media/creative_vision_main.png"> <img src="{@docRoot}design/media/creative_vision_main.png">
@@ -14,8 +15,8 @@ page.title=Creative Vision
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Enchant me</h4> <h4>Enchant me</h4>
<p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels. <p>Beauty is more than skin deep. Android apps are sleek and aesthetically pleasing on multiple levels.
@@ -24,7 +25,7 @@ of art in their own right. Just like a well-made tool, your app should strive to
simplicity and purpose to create a magical experience that is effortless and powerful.</p> simplicity and purpose to create a magical experience that is effortless and powerful.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Simplify my life</h4> <h4>Simplify my life</h4>
<p>Android apps make life easier and are easy to understand. When people use your app for the first <p>Android apps make life easier and are easy to understand. When people use your app for the first
@@ -35,7 +36,7 @@ of all ages and cultures feel firmly in control, and are never overwhelmed by to
irrelevant flash.</p> irrelevant flash.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Make me amazing</h4> <h4>Make me amazing</h4>
<p>It's not enough to make an app that is easy to use. Android apps empower people to try new things <p>It's not enough to make an app that is easy to use. Android apps empower people to try new things

102
docs/html/design/get-started/principles.jd
View File

@@ -14,8 +14,8 @@ creativity and design thinking. Deviate with purpose.
<h2 id="enchant-me">Enchant Me</h2> <h2 id="enchant-me">Enchant Me</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="delight-me">Delight me in surprising ways</h4> <h4 id="delight-me">Delight me in surprising ways</h4>
<p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to <p>A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to
@@ -23,7 +23,7 @@ experience. Subtle effects contribute to a feeling of effortlessness and a sense
force is at hand.</p> force is at hand.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_delight.png"> <img src="{@docRoot}design/media/principles_delight.png">
@@ -32,15 +32,15 @@ force is at hand.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4> <h4 id="real-objects-more-fun">Real objects are more fun than buttons and menus</h4>
<p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort <p>Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort
needed to perform a task while making it more emotionally satisfying.</p> needed to perform a task while making it more emotionally satisfying.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_real_objects.png"> <img src="{@docRoot}design/media/principles_real_objects.png">
@@ -49,8 +49,8 @@ needed to perform a task while making it more emotionally satisfying.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="make-it-mine">Let me make it mine</h4> <h4 id="make-it-mine">Let me make it mine</h4>
<p>People love to add personal touches because it helps them feel at home and in control. Provide <p>People love to add personal touches because it helps them feel at home and in control. Provide
@@ -58,7 +58,7 @@ sensible, beautiful defaults, but also consider fun, optional customizations tha
primary tasks.</p> primary tasks.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_make_it_mine.png"> <img src="{@docRoot}design/media/principles_make_it_mine.png">
@@ -67,15 +67,15 @@ primary tasks.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="get-to-know-me">Get to know me</h4> <h4 id="get-to-know-me">Get to know me</h4>
<p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and <p>Learn peoples' preferences over time. Rather than asking them to make the same choices over and
over, place previous choices within easy reach.</p> over, place previous choices within easy reach.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_get_to_know_me.png"> <img src="{@docRoot}design/media/principles_get_to_know_me.png">
@@ -84,14 +84,14 @@ over, place previous choices within easy reach.</p>
<h2 id="simplify-my-life">Simplify My Life</h2> <h2 id="simplify-my-life">Simplify My Life</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="keep-it-brief">Keep it brief</h4> <h4 id="keep-it-brief">Keep it brief</h4>
<p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p> <p>Use short phrases with simple words. People are likely to skip sentences if they're long.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_keep_it_brief.png"> <img src="{@docRoot}design/media/principles_keep_it_brief.png">
@@ -100,15 +100,15 @@ over, place previous choices within easy reach.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="pictures-faster-than-words">Pictures are faster than words</h4> <h4 id="pictures-faster-than-words">Pictures are faster than words</h4>
<p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient <p>Consider using pictures to explain ideas. They get people's attention and can be much more efficient
than words.</p> than words.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_pictures.png"> <img src="{@docRoot}design/media/principles_pictures.png">
@@ -117,15 +117,15 @@ than words.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="decide-for-me">Decide for me but let me have the final say</h4> <h4 id="decide-for-me">Decide for me but let me have the final say</h4>
<p>Take your best guess and act rather than asking first. Too many choices and decisions make people <p>Take your best guess and act rather than asking first. Too many choices and decisions make people
unhappy. Just in case you get it wrong, allow for 'undo'.</p> unhappy. Just in case you get it wrong, allow for 'undo'.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_decide_for_me.png"> <img src="{@docRoot}design/media/principles_decide_for_me.png">
@@ -134,15 +134,15 @@ unhappy. Just in case you get it wrong, allow for 'undo'.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4> <h4 id="only-show-when-i-need-it">Only show what I need when I need it</h4>
<p>People get overwhelmed when they see too much at once. Break tasks and information into small, <p>People get overwhelmed when they see too much at once. Break tasks and information into small,
digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p> digestible chunks. Hide options that aren't essential at the moment, and teach people as they go.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_information_when_need_it.png"> <img src="{@docRoot}design/media/principles_information_when_need_it.png">
@@ -151,15 +151,15 @@ digestible chunks. Hide options that aren't essential at the moment, and teach p
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="always-know-where-i-am">I should always know where I am</h4> <h4 id="always-know-where-i-am">I should always know where I am</h4>
<p>Give people confidence that they know their way around. Make places in your app look distinct and <p>Give people confidence that they know their way around. Make places in your app look distinct and
use transitions to show relationships among screens. Provide feedback on tasks in progress.</p> use transitions to show relationships among screens. Provide feedback on tasks in progress.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_navigation.png"> <img src="{@docRoot}design/media/principles_navigation.png">
@@ -168,8 +168,8 @@ use transitions to show relationships among screens. Provide feedback on tasks i
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="never-lose-my-stuff">Never lose my stuff</h4> <h4 id="never-lose-my-stuff">Never lose my stuff</h4>
<p>Save what people took time to create and let them access it from anywhere. Remember settings, <p>Save what people took time to create and let them access it from anywhere. Remember settings,
@@ -177,7 +177,7 @@ personal touches, and creations across phones, tablets, and computers. It makes
easiest thing in the world.</p> easiest thing in the world.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_never_lose_stuff.png"> <img src="{@docRoot}design/media/principles_never_lose_stuff.png">
@@ -186,15 +186,15 @@ easiest thing in the world.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4> <h4 id="looks-same-should-act-same">If it looks the same, it should act the same</h4>
<p>Help people discern functional differences by making them visually distinct rather than subtle. <p>Help people discern functional differences by making them visually distinct rather than subtle.
Avoid modes, which are places that look similar but act differently on the same input.</p> Avoid modes, which are places that look similar but act differently on the same input.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_looks_same.png"> <img src="{@docRoot}design/media/principles_looks_same.png">
@@ -203,15 +203,15 @@ Avoid modes, which are places that look similar but act differently on the same
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4> <h4 id="interrupt-only-if-important">Only interrupt me if it's important</h4>
<p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay <p>Like a good personal assistant, shield people from unimportant minutiae. People want to stay
focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p> focused, and unless it's critical and time-sensitive, an interruption can be taxing and frustrating.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_important_interruption.png"> <img src="{@docRoot}design/media/principles_important_interruption.png">
@@ -220,8 +220,8 @@ focused, and unless it's critical and time-sensitive, an interruption can be tax
<h2 id="make-me-amazing">Make Me Amazing</h2> <h2 id="make-me-amazing">Make Me Amazing</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="give-me-tricks">Give me tricks that work everywhere</h4> <h4 id="give-me-tricks">Give me tricks that work everywhere</h4>
<p>People feel great when they figure things out for themselves. Make your app easier to learn by <p>People feel great when they figure things out for themselves. Make your app easier to learn by
@@ -229,7 +229,7 @@ leveraging visual patterns and muscle memory from other Android apps. For exampl
may be a good navigational shortcut.</p> may be a good navigational shortcut.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_tricks.png"> <img src="{@docRoot}design/media/principles_tricks.png">
@@ -238,8 +238,8 @@ may be a good navigational shortcut.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="its-not-my-fault">It's not my fault</h4> <h4 id="its-not-my-fault">It's not my fault</h4>
<p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your <p>Be gentle in how you prompt people to make corrections. They want to feel smart when they use your
@@ -247,7 +247,7 @@ app. If something goes wrong, give clear recovery instructions but spare them th
If you can fix it behind the scenes, even better.</p> If you can fix it behind the scenes, even better.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_error.png"> <img src="{@docRoot}design/media/principles_error.png">
@@ -256,15 +256,15 @@ If you can fix it behind the scenes, even better.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="sprinkle-encouragement">Sprinkle encouragement</h4> <h4 id="sprinkle-encouragement">Sprinkle encouragement</h4>
<p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions, <p>Break complex tasks into smaller steps that can be easily accomplished. Give feedback on actions,
even if it's just a subtle glow.</p> even if it's just a subtle glow.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_sprinkle_encouragement.png"> <img src="{@docRoot}design/media/principles_sprinkle_encouragement.png">
@@ -273,8 +273,8 @@ even if it's just a subtle glow.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4> <h4 id="do-heavy-lifting-for-me">Do the heavy lifting for me</h4>
<p>Make novices feel like experts by enabling them to do things they never thought they could. For <p>Make novices feel like experts by enabling them to do things they never thought they could. For
@@ -282,7 +282,7 @@ example, shortcuts that combine multiple photo effects can make amateur photogra
only a few steps.</p> only a few steps.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_heavy_lifting.png"> <img src="{@docRoot}design/media/principles_heavy_lifting.png">
@@ -291,15 +291,15 @@ only a few steps.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4 id="make-important-things-fast">Make important things fast</h4> <h4 id="make-important-things-fast">Make important things fast</h4>
<p>Not all actions are equal. Decide what's most important in your app and make it easy to find and <p>Not all actions are equal. Decide what's most important in your app and make it easy to find and
fast to use, like the shutter button in a camera, or the pause button in a music player.</p> fast to use, like the shutter button in a camera, or the pause button in a music player.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/principles_make_important_fast.png"> <img src="{@docRoot}design/media/principles_make_important_fast.png">

20
docs/html/design/handhelds/index.jd
View File

@@ -20,8 +20,8 @@ and tablets.
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/ui_overview_home_screen.png"> <img src="{@docRoot}design/media/ui_overview_home_screen.png">
@@ -34,7 +34,7 @@ regardless of which panel is currently showing.</p>
the Favorites Tray.</p> the Favorites Tray.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/ui_overview_all_apps.png"> <img src="{@docRoot}design/media/ui_overview_all_apps.png">
@@ -45,7 +45,7 @@ device.</p>
any Home screen.</p> any Home screen.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/ui_overview_recents.png"> <img src="{@docRoot}design/media/ui_overview_recents.png">
@@ -94,13 +94,13 @@ provide updates, reminders, or information that's important, but not critical en
interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a interrupting the user. Open the notifications drawer by swiping down on the status bar. Touching a
notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p> notification opens the associated app. <a href="{@docRoot}design/patterns/notifications.html">More on Notifications</a></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/ui_overview_notifications.png"> <img src="{@docRoot}design/media/ui_overview_notifications.png">
</div> </div>
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/notifications_dismiss.png"> <img src="{@docRoot}design/media/notifications_dismiss.png">
@@ -116,13 +116,13 @@ notification opens the associated app. <a href="{@docRoot}design/patterns/notifi
<h2 id="app">Common App UI</h2> <h2 id="app">Common App UI</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/app_structure_drawer.png"> <img src="{@docRoot}design/media/app_structure_drawer.png">
</div> </div>
<div class="layout-content-col span-6 with-callouts"> <div class="col-6 with-callouts">
<p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p> <p>A typical Android app uses action bars, and many apps will include a navigation drawer.</p>
<ol> <ol>

98
docs/html/design/index.jd
View File

@@ -1,3 +1,4 @@
fullpage=true
page.title=Design page.title=Design
page.viewport_width=970 page.viewport_width=970
section.landing=true section.landing=true
@@ -6,43 +7,70 @@ header.hide=1
footer.hide=1 footer.hide=1
@jd:body @jd:body
<style> <section class="dac-expand dac-hero dac-light">
#landing-graphic-container { <div class="wrap">
position: relative; <div class="cols dac-hero-content">
} <div class="col-1of2 col-push-1of2 dac-hero-figure">
<img class="dac-hero-image" src="/design/media/hero-material-design.png">
#text-overlay {
position: absolute;
left: 0;
top: 42px;
width: 266px;
}
#hero-image {
padding-left:68px;
}
</style>
<div id="landing-graphic-container">
<div id="text-overlay">
<span itemprop="description">Welcome to <strong>Android Design</strong>, your place for
learning how to design exceptional Android apps.</span>
<br><br>
Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
<a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
</div> </div>
<a id="hero-image" href="/design/get-started/creative-vision.html"> <div class="col-1of2 col-pull-1of2">
<img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt="" <h1 class="dac-hero-title">Up and running with Material Design</h1>
srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/> <p class="dac-hero-description">
</a> Android 5.0 introduces a design metaphor inspired by paper and ink that provides a reassuring sense of tactility.
<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;">
<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2>
<p>Android 5.0 introduces a design
metaphor inspired by paper and ink that provides a reassuring sense of tactility.
</p> </p>
<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p> <a class="dac-hero-cta" href="https://www.google.com/design/spec/material-design/introduction.html">
<span class="dac-sprite dac-auto-chevron"></span>
Introducing Material Design
</a><br>
<a class="dac-hero-cta" href="/design/material/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Material Design for Android
</a><br>
<a class="dac-hero-cta" href="https://www.google.com/design/spec/resources/color-palettes.html">
<span class="dac-sprite dac-auto-chevron"></span>
Downloads for designers
</a><br>
<a class="dac-hero-cta" href="https://google.com/design/articles/">
<span class="dac-sprite dac-auto-chevron"></span>
Articles
</a>
</div> </div>
</div> </div>
<div class="dac-section dac-small">
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:design/landing/materialdesign"
data-cardSizes="6x2"
data-maxResults="6"></div>
</div>
</div>
</section>
<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap">
<h2 class="norule">Latest</h2>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:design/landing/latest"
data-cardSizes="6x6"
data-maxResults="3"></div>
</div></section>
<section class="dac-section dac-light"><div class="wrap">
<h1 class="dac-section-title">Pure Android</h1>
<div class="dac-section-subtitle">
This is a place holder paragraph. Some text here would povide some context.
</div>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:design/landing/pureandroid"
data-cardSizes="6x6"
data-maxResults="6"></div>
</div></section>
<section class="dac-section dac-gray"><div class="wrap">
<h1 class="dac-section-title">Resources</h1>
<div class="dac-section-subtitle">
This is a place holder paragraph. Some text here would povide some context.
</div>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:design/landing/resources"
data-cardSizes="6x2"
data-maxResults="6"></div>
</div></section>

4
docs/html/design/material/index.jd
View File

@@ -1,7 +1,7 @@
page.title=Material Design page.title=Material Design for Android
page.tags=Material,design page.tags=Material,design
page.type=design page.type=design
page.image=design/material/images/MaterialLight.png page.image=images/cards/design-material-for-android_2x.jpg
@jd:body @jd:body

BIN
docs/html/design/media/hero-material-design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

6
docs/html/design/patterns/accessibility.jd
View File

@@ -48,11 +48,11 @@ page.metaDescription=Design an app that's universally accessible to people with
<h4>Label visual UI elements meaningfully</h4> <h4>Label visual UI elements meaningfully</h4>
<p>In your wireframes, <a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">label functional UI components</a> that have no visible text. Those components might be buttons, icons, tabs with icons, and icons with state (like stars). Developers can use the <code><a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">contentDescription</a></code> attribute to set the label.</p> <p>In your wireframes, <a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">label functional UI components</a> that have no visible text. Those components might be buttons, icons, tabs with icons, and icons with state (like stars). Developers can use the <code><a href="{@docRoot}guide/topics/ui/accessibility/apps.html#label-ui">contentDescription</a></code> attribute to set the label.</p>
<div class ="layout-content-row"> <div class ="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/accessibility_contentdesc.png"> <img src="{@docRoot}design/media/accessibility_contentdesc.png">
</div> </div>
<div class="layout-content-col span-5 with-callouts"> <div class="col-5 with-callouts">
<ol> <ol>
<li class="value-1">group</li> <li class="value-1">group</li>
<li class="value-2">all contacts</li> <li class="value-2">all contacts</li>

26
docs/html/design/patterns/actionbar.jd
View File

@@ -34,8 +34,8 @@ page.metaDescription=The Action bar is an essential design element for all apps.
<p>The action bar is split into four different functional areas that apply to most apps.</p> <p>The action bar is split into four different functional areas that apply to most apps.</p>
<img src="{@docRoot}design/media/action_bar_basics.png"> <img src="{@docRoot}design/media/action_bar_basics.png">
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7 with-callouts"> <div class="col-7 with-callouts">
<ol> <ol>
<li class="value-1"><h4>App icon</h4> <li class="value-1"><h4>App icon</h4>
@@ -57,7 +57,7 @@ Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navig
</ol> </ol>
</div> </div>
<div class="layout-content-col span-6 with-callouts"> <div class="col-6 with-callouts">
<ol> <ol>
<li class="value-2"><h4>View control</h4> <li class="value-2"><h4>View control</h4>
@@ -107,8 +107,8 @@ content across multiple bars located below the main action bar or at the bottom
<h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2> <h2 id="considerations-split-action-bars">Layout Considerations for Split Action Bars</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8 with-callouts"> <div class="col-8 with-callouts">
<p>When splitting up content across multiple action bars, you generally have three possible locations <p>When splitting up content across multiple action bars, you generally have three possible locations
for action bar content:</p> for action bar content:</p>
@@ -124,7 +124,7 @@ the top bar.</p>
<p>To display actions and, if necessary, the action overflow, use the bottom bar.</p> <p>To display actions and, if necessary, the action overflow, use the bottom bar.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> <img src="{@docRoot}design/media/action_bar_pattern_considerations.png">
@@ -144,8 +144,8 @@ action overflow. The action bar should show only those actions that are availabl
<p>For guidance on prioritizing actions, use the FIT scheme.</p> <p>For guidance on prioritizing actions, use the FIT scheme.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<p><strong>F &mdash; Frequent</strong></p> <p><strong>F &mdash; Frequent</strong></p>
<ul> <ul>
@@ -155,7 +155,7 @@ action overflow. The action bar should show only those actions that are availabl
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p><strong>I &mdash; Important</strong></p> <p><strong>I &mdash; Important</strong></p>
<ul> <ul>
@@ -164,7 +164,7 @@ action overflow. The action bar should show only those actions that are availabl
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<p><strong>T &mdash; Typical</strong></p> <p><strong>T &mdash; Typical</strong></p>
<ul> <ul>
@@ -194,8 +194,8 @@ files for further customization.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Action overflow</h4> <h4>Action overflow</h4>
<p>The action overflow in the action bar provides access to your app's less frequently used actions. <p>The action overflow in the action bar provides access to your app's less frequently used actions.
@@ -203,7 +203,7 @@ The overflow icon only appears on phones that have no menu hardware keys. Phones
display the action overflow when the user presses the key.</p> display the action overflow when the user presses the key.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> <img src="{@docRoot}design/media/action_bar_pattern_overflow.png">
<div class="figure-caption"> <div class="figure-caption">

48
docs/html/design/patterns/app-structure.jd
View File

@@ -25,13 +25,13 @@ page.tags=navigation,layout,tablet
<p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is <p>A typical Android app consists of top level and detail/edit views. If the navigation hierarchy is
deep and complex, category views connect top level and detail views.</p> deep and complex, category views connect top level and detail views.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/app_structure_overview.png"> <img src="{@docRoot}design/media/app_structure_overview.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Top level views</h4> <h4>Top level views</h4>
<p>The top level of the app typically consists of the different views that your app supports. The views <p>The top level of the app typically consists of the different views that your app supports. The views
@@ -57,8 +57,8 @@ visitors alike.</p>
<p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure <p>Ask yourself: "What are my typical users most likely going to want to do in my app?", and structure
your start screen experience accordingly.</p> your start screen experience accordingly.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Put content forward</h4> <h4>Put content forward</h4>
<p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to <p>Many apps focus on the content display. Avoid navigation-only screens and instead let people get to
@@ -66,7 +66,7 @@ the meat of your app right away by making content the centerpiece of your start
layouts that are visually engaging and appropriate for the data type and screen size.</p> layouts that are visually engaging and appropriate for the data type and screen size.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/app_structure_market.png"> <img src="{@docRoot}design/media/app_structure_market.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -80,8 +80,8 @@ layouts that are visually engaging and appropriate for the data type and screen
<h4>Set up action bars for navigation and actions</h4> <h4>Set up action bars for navigation and actions</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<p>All screens in your app should display action bars to provide consistent navigation and surface <p>All screens in your app should display action bars to provide consistent navigation and surface
important actions.</p> important actions.</p>
@@ -96,7 +96,7 @@ important actions.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/app_structure_gmail.png"> <img src="{@docRoot}design/media/app_structure_gmail.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -111,8 +111,8 @@ important actions.</p>
<p>The top level communicates your app’s capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs:</p> <p>The top level communicates your app’s capabilities by introducing the user to the major functional areas. In many cases the top level will consist of multiple views, and you need to make sure that the user can navigate between them efficiently. Android supports a number of view controls for this task. Use the control that best matches your app's navigation needs:</p>
<h4>Fixed tabs</h4> <h4>Fixed tabs</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p><em>Fixed tabs</em> display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. <em>Fixed tabs</em> should always allow the user to navigate between the views by swiping left or right on the content area.</p> <p><em>Fixed tabs</em> display top-level views concurrently and make it easy to explore and switch between them. They are always visible on the screen, and can't be moved out of the way like scrollable tabs. <em>Fixed tabs</em> should always allow the user to navigate between the views by swiping left or right on the content area.</p>
<p><strong>Use tabs if</strong>:</p> <p><strong>Use tabs if</strong>:</p>
<ul> <ul>
@@ -122,7 +122,7 @@ important actions.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/app_structure_default_tabs.png"> <img src="{@docRoot}design/media/app_structure_default_tabs.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -132,8 +132,8 @@ important actions.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Spinners</h4> <h4>Spinners</h4>
<p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p> <p>A <em>spinner</em> is a drop-down menu that allows users to switch between views of your app. </p>
@@ -144,7 +144,7 @@ important actions.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/app_structure_spinner.png"> <img src="{@docRoot}design/media/app_structure_spinner.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -155,8 +155,8 @@ important actions.</p>
</div> </div>
<h4>Navigation drawers</h4> <h4>Navigation drawers</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>A <em>navigation drawer</em> is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. Navigation drawers show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps.</p> <p>A <em>navigation drawer</em> is a slide-out menu that allows users to switch between views of your app. It can hold a large number of items and is accessible from anywhere in your app. Navigation drawers show your app's top-level views, but can also provide navigation to lower-level screens. This makes them particularly suitable for complex apps.</p>
<p><strong>Use navigation drawers if</strong>:</p> <p><strong>Use navigation drawers if</strong>:</p>
@@ -169,7 +169,7 @@ important actions.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/app_structure_drawer.png"> <img src="{@docRoot}design/media/app_structure_drawer.png">
<div class="figure-caption"> <div class="figure-caption">
Navigation drawer from the Keep app. Navigation drawer from the Keep app.
@@ -196,8 +196,8 @@ experience than to an explicit navigation step.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all <p>If the categories are familiar, predictable, or closely related, use scrolling tabs (where not all
items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to
@@ -210,7 +210,7 @@ minimize navigational effort. Rule of thumb: no more than 5&ndash;7 tabs.</p>
</div> </div>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are <p>If the categories in the tabs are not closely related, favor fixed tabs, so that all categories are
in view at the same time.</p> in view at the same time.</p>
@@ -257,14 +257,14 @@ design guide.</p>
<p>The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.</p> <p>The detail view allows you to view and act on your data. The layout of the detail view depends on the data type being displayed, and therefore differs widely among apps.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Layout</h4> <h4>Layout</h4>
<p>Consider the activities people will perform in the detail view and arrange the layout accordingly.</p> <p>Consider the activities people will perform in the detail view and arrange the layout accordingly.</p>
</div> </div>
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/app_structure_people_detail.png"> <img src="{@docRoot}design/media/app_structure_people_detail.png">

10
docs/html/design/patterns/buttons.jd
View File

@@ -19,13 +19,13 @@ page.tags=buttons
back into view. back into view.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Lean Back</h4> <h4>Lean Back</h4>
<p>Touch the screen anywhere to bring back system bars. </p> <p>Touch the screen anywhere to bring back system bars. </p>
<img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Immersive</h4> <h4>Immersive</h4>
<p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p>
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
@@ -69,8 +69,8 @@ page.tags=buttons
interrupted by accidental touches and swipes. interrupted by accidental touches and swipes.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
</div> </div>

18
docs/html/design/patterns/compatibility.jd
View File

@@ -20,8 +20,8 @@ page.metaDescription=Notes on how Android 4.x adapts UI designed for older hardw
<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2> <h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Phones with virtual navigation controls</h4> <h4>Phones with virtual navigation controls</h4>
<p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't <p>Android apps written for Android 3.0 and later display actions in the action bar. Actions that don't
@@ -30,15 +30,15 @@ action overflow.</p>
<p>Users access the action overflow by touching it in the action bar.</p> <p>Users access the action overflow by touching it in the action bar.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/compatibility_virtual_nav.png"> <img src="{@docRoot}design/media/compatibility_virtual_nav.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Phones with physical navigation keys</h4> <h4>Phones with physical navigation keys</h4>
<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at <p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at
@@ -46,15 +46,15 @@ the bottom of the screen. Instead, the action overflow is available from the men
resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p> resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/compatibility_physical_buttons.png"> <img src="{@docRoot}design/media/compatibility_physical_buttons.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Legacy apps on phones with virtual navigation controls</h4> <h4>Legacy apps on phones with virtual navigation controls</h4>
<p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation <p>When you run an app that was built for Android 2.3 or earlier on a phone with virtual navigation
@@ -62,7 +62,7 @@ controls, an action overflow control appears at the right side of the virtual na
can touch the control to display the app's actions in the traditional Android menu styling.</p> can touch the control to display the app's actions in the traditional Android menu styling.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/compatibility_legacy_apps.png"> <img src="{@docRoot}design/media/compatibility_legacy_apps.png">

24
docs/html/design/patterns/confirming-acknowledging.jd
View File

@@ -4,12 +4,12 @@ page.tags=dialog,toast,notification
<p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p> <p>In some situations, when a user invokes an action in your app, it's a good idea to <em>confirm</em> or <em>acknowledge</em> that action through text.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/confirm_ack_confirming.png"> <img src="{@docRoot}design/media/confirm_ack_confirming.png">
<p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p> <p><strong>Confirming</strong> is asking the user to verify that they truly want to proceed with an action they just invoked. In some cases, the confirmation is presented along with a warning or critical information related to the action that they need to consider.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/confirm_ack_acknowledge.png"> <img src="{@docRoot}design/media/confirm_ack_acknowledge.png">
<p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p> <p><strong>Acknowledging</strong> is displaying text to let the user know that the action they just invoked has been completed. This removes uncertainty about implicit operations that the system is taking. In some cases, the acknowledgment is presented along with an option to undo the action.</p>
</div> </div>
@@ -22,14 +22,14 @@ page.tags=dialog,toast,notification
<img src="{@docRoot}design/media/confirm_ack_flowchart.png"> <img src="{@docRoot}design/media/confirm_ack_flowchart.png">
<h2>Confirming</h2> <h2>Confirming</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Example: Google Play Books</h4> <h4>Example: Google Play Books</h4>
<img src="{@docRoot}design/media/confirm_ack_ex_books.png"> <img src="{@docRoot}design/media/confirm_ack_ex_books.png">
<p>In this example, the user has requested to delete a book from their Google Play library. An <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alert</a> appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p> <p>In this example, the user has requested to delete a book from their Google Play library. An <a href="{@docRoot}design/building-blocks/dialogs.html#alerts">alert</a> appears to confirm this action because it's important to understand that the book will no longer be available from any device.</p>
<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p> <p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<h4>Example: Android Beam</h4> <h4>Example: Android Beam</h4>
<img src="{@docRoot}design/media/confirm_ack_ex_beam.png"> <img src="{@docRoot}design/media/confirm_ack_ex_beam.png">
<p>Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p> <p>Confirmations don't necessarily have to be presented in an alert with two buttons. After initiating Android Beam, the user is prompted to touch the content to be shared (in this example, it's a photo). If they decide not to proceed, they simply move their phone away.</p>
@@ -37,15 +37,15 @@ page.tags=dialog,toast,notification
</div> </div>
<h2>Acknowledging</h2> <h2>Acknowledging</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Example: Abandoned Gmail draft saved</h4> <h4>Example: Abandoned Gmail draft saved</h4>
<img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png"> <img src="{@docRoot}design/media/confirm_ack_ex_draftsave.png">
<p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p> <p>In this example, if the user navigates back or up from the Gmail compose screen, something possibly unexpected happens: the current draft is automatically saved. An acknowledgment in the form of a toast makes that apparent. It fades after a few seconds.</p>
<p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p> <p>Undo isn't appropriate here because saving was initiated by the app, not the user. And it's quick and easy to resume composing the message by navigating to the list of drafts.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Example: Gmail conversation deleted</h4> <h4>Example: Gmail conversation deleted</h4>
<img src="{@docRoot}design/media/confirm_ack_draft_deleted.png"> <img src="{@docRoot}design/media/confirm_ack_draft_deleted.png">
<p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p> <p>After the user deletes a conversation from the list in Gmail, an acknowledgment appears with an undo option. The acknowledgment remains until the user takes an unrelated action, such as scrolling the list.</p>
@@ -53,14 +53,14 @@ page.tags=dialog,toast,notification
</div> </div>
<h2>No Confirmation or Acknowledgment</h2> <h2>No Confirmation or Acknowledgment</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Example: +1'ing</h4> <h4>Example: +1'ing</h4>
<img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png"> <img style="padding: 33px 0 30px;" src="{@docRoot}design/media/confirm_ack_ex_plus1.png">
<p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p> <p><strong>Confirmation is unnecessary</strong>. If the user +1'd by accident, it's not a big deal. They can just touch the button again to undo the action.</p>
<p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p> <p><strong>Acknowledgment is unnecessary</strong>. The user will see the +1 button bounce and turn red. That's a very clear signal.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<h4>Example: Removing an app from the Home Screen</h4> <h4>Example: Removing an app from the Home Screen</h4>
<img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png"> <img src="{@docRoot}design/media/confirm_ack_ex_removeapp.png">
<p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p> <p><strong>Confirmation is unnecessary</strong>. This is a deliberate action: the user must drag and drop an item onto a relatively large and isolated target. Therefore, accidents are highly unlikely. But if the user regrets the decision, it only takes a few seconds to bring it back again.</p>

10
docs/html/design/patterns/fullscreen.jd
View File

@@ -19,13 +19,13 @@ page.tags=full screen,immersive,leanback
back into view. back into view.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Lean Back</h4> <h4>Lean Back</h4>
<p>Touch the screen anywhere to bring back system bars. </p> <p>Touch the screen anywhere to bring back system bars. </p>
<img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;"> <img src="{@docRoot}design/media/fullscreen_leanback.png" style="width:311px;">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Immersive</h4> <h4>Immersive</h4>
<p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p> <p>Swipe from the any edge of the screen with a hidden bar to bring back system bars. </p>
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
@@ -69,8 +69,8 @@ page.tags=full screen,immersive,leanback
interrupted by accidental touches and swipes. interrupted by accidental touches and swipes.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_bottom.png" style="width:160px;float:right">
<img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px"> <img src="{@docRoot}design/media/fullscreen_immersive_swipe_top.png" style="width:160px">
</div> </div>

22
docs/html/design/patterns/gestures.jd
View File

@@ -15,9 +15,9 @@ following table shows the core gesture set that is supported in Android.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_touch.png"> <img src="{@docRoot}design/media/gesture_touch.png">
<h4>Touch</h4> <h4>Touch</h4>
<p>Triggers the default functionality for a given item.</p> <p>Triggers the default functionality for a given item.</p>
@@ -28,7 +28,7 @@ following table shows the core gesture set that is supported in Android.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_longtouch.png"> <img src="{@docRoot}design/media/gesture_longtouch.png">
<h4>Long press</h4> <h4>Long press</h4>
<p>Enters data selection mode. Allows you to select one or more items in a view and act upon <p>Enters data selection mode. Allows you to select one or more items in a view and act upon
@@ -40,7 +40,7 @@ following table shows the core gesture set that is supported in Android.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_swipe.png"> <img src="{@docRoot}design/media/gesture_swipe.png">
<h4>Swipe or drag</h4> <h4>Swipe or drag</h4>
<p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are <p>Scrolls overflowing content, or navigates between views in the same hierarchy. Swipes are
@@ -57,9 +57,9 @@ following table shows the core gesture set that is supported in Android.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_drag.png"> <img src="{@docRoot}design/media/gesture_drag.png">
<h4>Long press drag</h4> <h4>Long press drag</h4>
<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> <p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p>
@@ -70,7 +70,7 @@ following table shows the core gesture set that is supported in Android.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_doubletouch.png"> <img src="{@docRoot}design/media/gesture_doubletouch.png">
<h4>Double touch </h4> <h4>Double touch </h4>
<p> Scales up a standard amount around the target with each repeated gesture until reaching <p> Scales up a standard amount around the target with each repeated gesture until reaching
@@ -84,7 +84,7 @@ following table shows the core gesture set that is supported in Android.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
<h4>Double touch drag</h4> <h4>Double touch drag</h4>
<p>Scales content by pushing away or pulling closer, centered around gesture.</p> <p>Scales content by pushing away or pulling closer, centered around gesture.</p>
@@ -106,9 +106,9 @@ following table shows the core gesture set that is supported in Android.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px"> <img src="{@docRoot}design/media/gesture_pinchopen.png" style="margin-left:-4px">
<h4>Pinch open</h4> <h4>Pinch open</h4>
<p>Zooms into content.</p> <p>Zooms into content.</p>
@@ -119,7 +119,7 @@ following table shows the core gesture set that is supported in Android.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/gesture_pinchclose.png"> <img src="{@docRoot}design/media/gesture_pinchclose.png">
<h4>Pinch close</h4> <h4>Pinch close</h4>
<p>Zooms out of content.</p> <p>Zooms out of content.</p>

28
docs/html/design/patterns/help.jd
View File

@@ -21,8 +21,8 @@ page.tags=settings,preferences
<em>To teach high value functionality that's only available through a gesture.</em></p> <em>To teach high value functionality that's only available through a gesture.</em></p>
<p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p> <p>For example, we use help content to teach users how to place apps on their Home screen. This functionality is:</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<ul> <ul>
<li><strong>High value</strong> <li><strong>High value</strong>
<p style="margin-top:0;">Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.</p></li> <p style="margin-top:0;">Without it, users wouldn't be able to customize the most frequently visited Android screen to meet their needs.</p></li>
@@ -31,7 +31,7 @@ page.tags=settings,preferences
</ul> </ul>
<p>However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.</p> <p>However, not all high value gesture-only functionality needs a tutorial. For example, don't teach users how to scroll content. They already know how because it's a fundamental, system-wide interaction.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/help_cling.png"> <img src="{@docRoot}design/media/help_cling.png">
<div class="figure-caption"> <div class="figure-caption">
The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture. The first time each user visits the All Apps screen, a semi-transparent overlay appears to teach an important gesture.
@@ -44,11 +44,11 @@ page.tags=settings,preferences
<p>On every screen in your app, offer help in the <a href="{@docRoot}design/patterns/actionbar.html">action overflow</a>. Always make it the very last item in the menu and label it "Help".</p> <p>On every screen in your app, offer help in the <a href="{@docRoot}design/patterns/actionbar.html">action overflow</a>. Always make it the very last item in the menu and label it "Help".</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/help_overflow.png"> <img src="{@docRoot}design/media/help_overflow.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/help_solo_overflow.png"> <img src="{@docRoot}design/media/help_solo_overflow.png">
<div class="figure-caption"> <div class="figure-caption">
Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar. Even if your screen has no other action overflow items, "Help" should appear there and not be promoted to the action bar.
@@ -67,28 +67,28 @@ page.tags=settings,preferences
<p>When someone chooses "Help":</p> <p>When someone chooses "Help":</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/help_dont.png"> <img src="{@docRoot}design/media/help_dont.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/help_better.png"> <img src="{@docRoot}design/media/help_better.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/help_evenbetter.png"> <img src="{@docRoot}design/media/help_evenbetter.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4 class="do-dont-label bad">Don't</h4> <h4 class="do-dont-label bad">Don't</h4>
<p>Present a dialog asking them to choose between help and other options.</p> <p>Present a dialog asking them to choose between help and other options.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4 class="do-dont-label good">Better</h4> <h4 class="do-dont-label good">Better</h4>
<p>Immediately launch a web browser with help content. Place other options in a footer.</p> <p>Immediately launch a web browser with help content. Place other options in a footer.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4 class="do-dont-label good">Even Better</h4> <h4 class="do-dont-label good">Even Better</h4>
<p>Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.</p> <p>Build a help screen in your app and offer other options in the action bar. For example, you could let users contact you with questions or feedback through an action button. The action overflow is the ideal place for non-help information that users rarely need.</p>
<p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p> <p>This requires more development work than launching a web browser, but it's a nicer experience for users because they don't leave your app to get the help they need and doesn't require a network connection.</p>

24
docs/html/design/patterns/multi-pane-layouts.jd
View File

@@ -51,13 +51,13 @@ relationship between the panels.</p>
one orientation, try not to split it up when the user rotates the screen. There are several techniques one orientation, try not to split it up when the user rotates the screen. There are several techniques
you can use to adjust the layout after orientation change while keeping functional parity intact.</p> you can use to adjust the layout after orientation change while keeping functional parity intact.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/multipane_stretch.png"> <img src="{@docRoot}design/media/multipane_stretch.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Stretch/compress</h4> <h4>Stretch/compress</h4>
<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> <p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p>
@@ -65,13 +65,13 @@ you can use to adjust the layout after orientation change while keeping function
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/multipane_stack.png"> <img src="{@docRoot}design/media/multipane_stack.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Stack</h4> <h4>Stack</h4>
<p>Rearrange the panels on your screen to match the orientation.</p> <p>Rearrange the panels on your screen to match the orientation.</p>
@@ -79,13 +79,13 @@ you can use to adjust the layout after orientation change while keeping function
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/multipane_expand.png"> <img src="{@docRoot}design/media/multipane_expand.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Expand/collapse</h4> <h4>Expand/collapse</h4>
<p>When the device rotates, collapse the left pane view to only show the most important information.</p> <p>When the device rotates, collapse the left pane view to only show the most important information.</p>
@@ -93,13 +93,13 @@ you can use to adjust the layout after orientation change while keeping function
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/multipane_show.png"> <img src="{@docRoot}design/media/multipane_show.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Show/hide</h4> <h4>Show/hide</h4>
<p>If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.</p> <p>If your screen cannot accommodate the compound view on rotation show the right pane in full screen view on rotation to portrait. Use the Up icon in action bar to show the parent screen.</p>

30
docs/html/design/patterns/navigation-drawer.jd
View File

@@ -112,8 +112,8 @@ likely visit often and make those navigation hubs as well.</p>
screens as well as important lower-level screens. screens as well as important lower-level screens.
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<p> To facilitate access to the navigation drawer on navigation hubs, all screens that <p> To facilitate access to the navigation drawer on navigation hubs, all screens that
correspond to an entry in your navigation drawer should show the navigation drawer indicator correspond to an entry in your navigation drawer should show the navigation drawer indicator
next to the application icon in the action bar. Touching the app icon causes the navigation next to the application icon in the action bar. Touching the app icon causes the navigation
@@ -121,7 +121,7 @@ likely visit often and make those navigation hubs as well.</p>
<p> All other lower-level screens show the traditional Up indicator next to the application <p> All other lower-level screens show the traditional Up indicator next to the application
icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p> icon. The drawer is still accessible with an edge-swipe, but is not featured in the action bar.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/navigation_drawer_indicator_big.png"> <img src="{@docRoot}design/media/navigation_drawer_indicator_big.png">
<div class="figure-caption"> <div class="figure-caption">
App icon with navigation drawer indicator. App icon with navigation drawer indicator.
@@ -135,8 +135,8 @@ likely visit often and make those navigation hubs as well.</p>
<p> Keep the content of the navigation drawer focused on app navigation. Expose the navigation <p> Keep the content of the navigation drawer focused on app navigation. Expose the navigation
hubs of your app as list items inside the navigation drawer - one item per row. hubs of your app as list items inside the navigation drawer - one item per row.
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<h4>Titles, icons, and counters</h4> <h4>Titles, icons, and counters</h4>
<p> You can structure navigation targets by adding titles. The titles are not interactive, <p> You can structure navigation targets by adding titles. The titles are not interactive,
but just organize navigation targets into functional topics. If you have many navigation but just organize navigation targets into functional topics. If you have many navigation
@@ -144,7 +144,7 @@ hubs of your app as list items inside the navigation drawer - one item per row.
<p> Navigation targets can have optional leading icons as well as trailing counters. Use <p> Navigation targets can have optional leading icons as well as trailing counters. Use
the counters to inform users about a changed state of data in the corresponding view.</p> the counters to inform users about a changed state of data in the corresponding view.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png">
<div class="figure-caption"> <div class="figure-caption">
Use titles and icons to organize your drawer. Use titles and icons to organize your drawer.
@@ -152,15 +152,15 @@ hubs of your app as list items inside the navigation drawer - one item per row.
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/navigation_drawer_collapse.png"> <img src="{@docRoot}design/media/navigation_drawer_collapse.png">
<div class="figure-caption"> <div class="figure-caption">
Collapsible navigation items are split. Use the left side for navigation and the right Collapsible navigation items are split. Use the left side for navigation and the right
to collapse and expand items. to collapse and expand items.
</div> </div>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Collapsible navigation items</h4> <h4>Collapsible navigation items</h4>
<p>If you have many views with some subordinate to others, consider collapsing them into one <p>If you have many views with some subordinate to others, consider collapsing them into one
expandable item to conserve space. expandable item to conserve space.
@@ -201,27 +201,27 @@ is fully expanded:</p>
</div> </div>
<h4>Actions</h4> <h4>Actions</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png"> <img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png">
<div class="figure-caption"> <div class="figure-caption">
Keep actions on the right side of the action bar and in the overflow Keep actions on the right side of the action bar and in the overflow
</div> </div>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<p> Don’t place actions in the navigation drawer. Actions belong in the action bar, and the <p> Don’t place actions in the navigation drawer. Actions belong in the action bar, and the
user expects to see them there. Keep in mind that not all applications use the navigation user expects to see them there. Keep in mind that not all applications use the navigation
drawer pattern. It may be tempting to expose all your app’s capabilities in a single place, drawer pattern. It may be tempting to expose all your app’s capabilities in a single place,
but keep the bigger picture in mind. Place your actions where all apps display them.</p> but keep the bigger picture in mind. Place your actions where all apps display them.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p> This also applies to common navigation targets, such as access to Help or the app’s <p> This also applies to common navigation targets, such as access to Help or the app’s
Settings. As per style guide convention Help and Settings are always located in the action Settings. As per style guide convention Help and Settings are always located in the action
overflow.</p> overflow.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/navigation_drawer_settings_help.png"> <img src="{@docRoot}design/media/navigation_drawer_settings_help.png">
<div class="figure-caption"> <div class="figure-caption">
Keep Help and Settings in the overflow. Keep Help and Settings in the overflow.

49
docs/html/design/patterns/new.jd
View File

@@ -1,5 +1,6 @@
page.title=New in Android page.title=New in Android
page.tags=KitKat,Android 4.4 page.tags=KitKat,Android 4.4
page.image=images/cards/design-new-in-android_2x.jpg
@jd:body @jd:body
@@ -92,8 +93,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<h3> <h3>
Gestures Gestures
</h3> </h3>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p> <p>
The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a> The updated <a href="{@docRoot}design/patterns/gestures.html">Gestures</a>
page covers new and updated gestures introduced in Android KitKat: page covers new and updated gestures introduced in Android KitKat:
@@ -101,7 +102,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
gestures are used for changing the viewing size of content. gestures are used for changing the viewing size of content.
</p> </p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/gesture_doubletouch.png"> <img src="{@docRoot}design/media/gesture_doubletouch.png">
<img src="{@docRoot}design/media/gesture_doubletouchdrag.png"> <img src="{@docRoot}design/media/gesture_doubletouchdrag.png">
</div> </div>
@@ -111,8 +112,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<h2>Android 4.1 Jelly Bean</h2> <h2>Android 4.1 Jelly Bean</h2>
<h4>Notifications</h4> <h4>Notifications</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>Notifications have received some notable enhancements in Android 4.1:</p> <p>Notifications have received some notable enhancements in Android 4.1:</p>
<ul> <ul>
<li>Users can act on notifications immediately from the drawer</li> <li>Users can act on notifications immediately from the drawer</li>
@@ -126,7 +127,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for href="{@docRoot}design/patterns/notifications.html">Notifications</a> page for
more details.</p> more details.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/new_notifications.png"> <img src="{@docRoot}design/media/new_notifications.png">
</div> </div>
</div> </div>
@@ -134,8 +135,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<h4>Resizable Application Widgets</h4> <h4>Resizable Application Widgets</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>Widgets are an essential aspect of home screen customization, allowing <p>Widgets are an essential aspect of home screen customization, allowing
"at-a-glance" views of an app's most important data and functionality right from "at-a-glance" views of an app's most important data and functionality right from
the user's home screen. Android 4.1 introduces improved App Widgets that can the user's home screen. Android 4.1 introduces improved App Widgets that can
@@ -152,7 +153,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful href="{@docRoot}design/patterns/widgets.html">Application Widgets</a> page has useful
details about widget types, limitations, and design considerations.</p> details about widget types, limitations, and design considerations.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/new_widgets.png"> <img src="{@docRoot}design/media/new_widgets.png">
</div> </div>
</div> </div>
@@ -160,8 +161,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<h4>Accessibility</h4> <h4>Accessibility</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-11"> <div class="col-11">
<p>One of Android's missions is to organize the world's information and <p>One of Android's missions is to organize the world's information and
make it universally accessible and useful. Our mission applies to all make it universally accessible and useful. Our mission applies to all
users-including people with disabilities such as visual impairment, color users-including people with disabilities such as visual impairment, color
@@ -183,7 +184,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has <a href="{@docRoot}design/patterns/widgets.html">Widgets</a> page has
useful details about widget types, limitations, and design considerations.</p> useful details about widget types, limitations, and design considerations.</p>
</div> </div>
<div class="layout-content-col span-2"> <div class="col-2">
<img src="{@docRoot}design/media/new_accessibility.png"> <img src="{@docRoot}design/media/new_accessibility.png">
</div> </div>
</div> </div>
@@ -191,8 +192,8 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<h2>Android 4.0 Ice Cream Sandwich</h2> <h2>Android 4.0 Ice Cream Sandwich</h2>
<h4>Navigation bar</h4> <h4>Navigation bar</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>Android 4.0 removes the need for traditional hardware keys on <p>Android 4.0 removes the need for traditional hardware keys on
phones by replacing them with a virtual navigation bar that houses phones by replacing them with a virtual navigation bar that houses
the Back, Home and Recents buttons. Read the the Back, Home and Recents buttons. Read the
@@ -200,7 +201,7 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
pattern to learn how the OS adapts to phones with hardware buttons and pattern to learn how the OS adapts to phones with hardware buttons and
how pre-Android 3.0 apps that rely on menu keys are supported.</p> how pre-Android 3.0 apps that rely on menu keys are supported.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/whats_new_nav_bar.png"> <img src="{@docRoot}design/media/whats_new_nav_bar.png">
</div> </div>
</div> </div>
@@ -208,13 +209,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<h4>Action bar</h4> <h4>Action bar</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>The action bar is the most important structural element of an Android <p>The action bar is the most important structural element of an Android
app. It provides consistent navigation across the platform and allows your app. It provides consistent navigation across the platform and allows your
app to surface actions.</p> app to surface actions.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/whats_new_action_bar.png"> <img src="{@docRoot}design/media/whats_new_action_bar.png">
</div> </div>
</div> </div>
@@ -222,14 +223,14 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<h4>Multi-pane layouts</h4> <h4>Multi-pane layouts</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>Creating apps that scale well across different form factors and screen <p>Creating apps that scale well across different form factors and screen
sizes is important in the Android world. Multi-pane layouts allow you to sizes is important in the Android world. Multi-pane layouts allow you to
combine different activities that show separately on smaller devices into combine different activities that show separately on smaller devices into
richer compound views for tablets.</p> richer compound views for tablets.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/whats_new_multipanel.png"> <img src="{@docRoot}design/media/whats_new_multipanel.png">
</div> </div>
</div> </div>
@@ -238,13 +239,13 @@ lockscreen, priority notifications, and cloud-synced notifications.</p>
<h4>Selection</h4> <h4>Selection</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<p>The long press gesture which was traditionally used to show contextual <p>The long press gesture which was traditionally used to show contextual
actions for objects is now used for data selection. When selecting data, actions for objects is now used for data selection. When selecting data,
contextual action bars allow you to surface actions.</p> contextual action bars allow you to surface actions.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/whats_new_multiselect.png"> <img src="{@docRoot}design/media/whats_new_multiselect.png">
</div> </div>
</div> </div>

40
docs/html/design/patterns/notifications_k.jd
View File

@@ -22,8 +22,8 @@ paying attention.</p>
<h2>Anatomy of a notification</h2> <h2>Anatomy of a notification</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Base Layout</h4> <h4>Base Layout</h4>
<p>At a minimum, all notifications consist of a base layout, including:</p> <p>At a minimum, all notifications consist of a base layout, including:</p>
<ul> <ul>
@@ -34,7 +34,7 @@ paying attention.</p>
image is shown for the main icon</li> image is shown for the main icon</li>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> <img src="{@docRoot}design/media/notifications_pattern_anatomy.png">
<div class="figure-caption"> <div class="figure-caption">
Base layout of a notification Base layout of a notification
@@ -54,8 +54,8 @@ for you to re-use in your application.</p>
<img src="{@docRoot}design/media/notifications_pattern_expandable.png"> <img src="{@docRoot}design/media/notifications_pattern_expandable.png">
<h4>Actions</h4> <h4>Actions</h4>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>Android supports optional actions that are displayed at the bottom of <p>Android supports optional actions that are displayed at the bottom of
the notification. With actions, users can handle the most common tasks for a the notification. With actions, users can handle the most common tasks for a
particular notification from within the notification shade without having to particular notification from within the notification shade without having to
@@ -80,7 +80,7 @@ displaying</li>
or "Open")</li> or "Open")</li>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/notifications_pattern_two_actions.png"> <img src="{@docRoot}design/media/notifications_pattern_two_actions.png">
<div class="figure-caption"> <div class="figure-caption">
Calendar reminder notification with two actions Calendar reminder notification with two actions
@@ -96,11 +96,11 @@ otherwise hidden, you must make sure that any action a user can invoke from a
notification is available from within the associated application as well.</p> notification is available from within the associated application as well.</p>
<h2>Design guidelines</h2> <h2>Design guidelines</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/notifications_pattern_personal.png"> <img src="{@docRoot}design/media/notifications_pattern_personal.png">
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<h4>Make it personal</h4> <h4>Make it personal</h4>
<p>For notifications of items sent by another user (such as a message or <p>For notifications of items sent by another user (such as a message or
status update), include that person's image.</p> status update), include that person's image.</p>
@@ -264,8 +264,8 @@ other people.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h4>When not to display a notification</h4> <h4>When not to display a notification</h4>
<p>There are however many other cases where notifications should not be <p>There are however many other cases where notifications should not be
@@ -312,20 +312,20 @@ develop a widget that they can choose to place on their home screen.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> <img src="{@docRoot}design/media/notifications_pattern_social_fail.png">
</div> </div>
</div> </div>
<h2 id="interacting-with-notifications">Interacting With Notifications</h2> <h2 id="interacting-with-notifications">Interacting With Notifications</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<p>Notifications are indicated by icons in the notification area and can be <p>Notifications are indicated by icons in the notification area and can be
accessed by opening the notification drawer.</p> accessed by opening the notification drawer.</p>
@@ -337,8 +337,8 @@ removes it from the drawer.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p><h4>Ongoing notifications</h4> <p><h4>Ongoing notifications</h4>
<p>Ongoing notifications keep users informed about an ongoing process in the <p>Ongoing notifications keep users informed about an ongoing process in the
@@ -349,15 +349,15 @@ downloading a file, or encoding a video. Ongoing notifications cannot be
manually removed from the notification drawer.</p></p> manually removed from the notification drawer.</p></p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-12"> <div class="col-12">
<h4>Dialogs and toasts are for feedback not notification</h4> <h4>Dialogs and toasts are for feedback not notification</h4>
<p>Your app should not create a dialog or toast if it is not currently on <p>Your app should not create a dialog or toast if it is not currently on
screen. Dialogs and Toasts should only be displayed as the immediate response screen. Dialogs and Toasts should only be displayed as the immediate response

37
docs/html/design/patterns/pure-android.jd
View File

@@ -1,4 +1,5 @@
page.title=Pure Android page.title=Pure Android
page.image=images/cards/design-pure-android_2x.png
@jd:body @jd:body
<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for <p>Most developers want to distribute their apps on multiple platforms. As you plan your app for
@@ -10,8 +11,8 @@ guidelines to avoid the most common traps and pitfalls.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't mimic UI elements from other platforms</h4> <h4>Don't mimic UI elements from other platforms</h4>
<p>Platforms typically provide a carefully designed set of UI elements that are themed in a very <p>Platforms typically provide a carefully designed set of UI elements that are themed in a very
@@ -28,7 +29,7 @@ elements, customize carefully according to your specific branding - and not acco
conventions of a different platform.</p> conventions of a different platform.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_ui_elements.png"> <img src="{@docRoot}design/media/migrating_ui_elements.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -40,8 +41,8 @@ conventions of a different platform.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't carry over platform-specific icons</h4> <h4>Don't carry over platform-specific icons</h4>
<p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new <p>Platforms typically provide sets of icons for common functionality, such as sharing, creating a new
@@ -52,7 +53,7 @@ counterparts.</p>
<a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p> <a href="{@docRoot}design/downloads/index.html">Downloads</a> page.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_icons.png"> <img src="{@docRoot}design/media/migrating_icons.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -64,8 +65,8 @@ counterparts.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't use bottom tab bars</h4> <h4>Don't use bottom tab bars</h4>
<p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention, <p>Other platforms use the bottom tab bar to switch between the app's views. Per platform convention,
@@ -77,7 +78,7 @@ platform and to avoid confusion between actions and view switching on Android.</
<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p> <a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_ios_dialers.png"> <img src="{@docRoot}design/media/migrating_ios_dialers.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -87,8 +88,8 @@ platform and to avoid confusion between actions and view switching on Android.</
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't hardcode links to other apps</h4> <h4>Don't hardcode links to other apps</h4>
<p>In some cases you might want your app to take advantage of another app's feature set. For <p>In some cases you might want your app to take advantage of another app's feature set. For
@@ -101,7 +102,7 @@ Action Provider</em> in your action bar to provide faster access to the user's m
sharing target.</p> sharing target.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_intents.png"> <img src="{@docRoot}design/media/migrating_intents.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -114,8 +115,8 @@ sharing target.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't use labeled back buttons on action bars</h4> <h4>Don't use labeled back buttons on action bars</h4>
<p>Other platforms use an explicit back button with label to allow the user to navigate up the <p>Other platforms use an explicit back button with label to allow the user to navigate up the
@@ -125,7 +126,7 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation
<p>Follow this guideline to provide a consistent navigation experience across the platform.</p> <p>Follow this guideline to provide a consistent navigation experience across the platform.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_ios_galleries.png"> <img src="{@docRoot}design/media/migrating_ios_galleries.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -135,8 +136,8 @@ please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Don't use right-pointing carets on line items</h4> <h4>Don't use right-pointing carets on line items</h4>
<p>A common pattern on other platforms is the display of right-pointing carets on line items that allow <p>A common pattern on other platforms is the display of right-pointing carets on line items that allow
@@ -145,7 +146,7 @@ the user to drill deeper into additional content.</p>
the platform and in order to not have the user guess as to what the meaning of those carets may be.</p> the platform and in order to not have the user guess as to what the meaning of those carets may be.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/migrating_ios_settings.png"> <img src="{@docRoot}design/media/migrating_ios_settings.png">
<div class="figure-caption"> <div class="figure-caption">

18
docs/html/design/patterns/selection.jd
View File

@@ -23,8 +23,8 @@ handle multi-select and contextual actions in your apps.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>What has changed?</h4> <h4>What has changed?</h4>
<p>In previous versions of Android, the long press gesture was universally used to display contextual <p>In previous versions of Android, the long press gesture was universally used to display contextual
@@ -34,7 +34,7 @@ contextual actions and selection management functions for selected data into a n
the contextual action bar (CAB).</p> the contextual action bar (CAB).</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/selection_context_menu.png"> <img src="{@docRoot}design/media/selection_context_menu.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -52,8 +52,8 @@ is selected. It appears after the user long-presses on a selectable data item.</
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>From here the user can:</p> <p>From here the user can:</p>
<ul> <ul>
@@ -65,15 +65,15 @@ is selected. It appears after the user long-presses on a selectable data item.</
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/selection_cab_example.png"> <img src="{@docRoot}design/media/selection_cab_example.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Selecting CAB actions</h4> <h4>Selecting CAB actions</h4>
<p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar <p>You can decide which actions and elements appear in the CAB. Use the guidelines in the <a href="actionbar.html">Action Bar
@@ -85,7 +85,7 @@ the selection. Actions that apply to a single selected data item don't necessari
selected data items of the same kind.</p> selected data items of the same kind.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/selection_adjusting_actions.png"> <img src="{@docRoot}design/media/selection_adjusting_actions.png">
<div class="figure-caption"> <div class="figure-caption">

128
docs/html/design/patterns/settings.jd
View File

@@ -64,8 +64,8 @@ meets the bar:</p>
<div class="vspace size-3">&nbsp;</div> <div class="vspace size-3">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5 with-callouts"> <div class="col-5 with-callouts">
<h4 id="group-settings">If you still have lots of settings, group related settings together</h4> <h4 id="group-settings">If you still have lots of settings, group related settings together</h4>
@@ -89,7 +89,7 @@ to a subscreen of related settings. In addition, the items themselves are groupe
dividers.</p> dividers.</p>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/settings_grouping.png"> <img src="{@docRoot}design/media/settings_grouping.png">
@@ -101,26 +101,26 @@ on the total number of settings in your app.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-2"> <div class="col-2">
<h4>7 or fewer</h4> <h4>7 or fewer</h4>
</div> </div>
<div class="layout-content-col span-11"> <div class="col-11">
<p>Don't group them at all. It won't benefit users and will seem like overkill.</p> <p>Don't group them at all. It won't benefit users and will seem like overkill.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-2"> <div class="col-2">
<h4>8 to 10</h4> <h4>8 to 10</h4>
</div> </div>
<div class="layout-content-col span-11"> <div class="col-11">
<p>Try grouping related settings under 1 or 2 section dividers. If you have any "singletons" <p>Try grouping related settings under 1 or 2 section dividers. If you have any "singletons"
(settings that don't relate to any other settings and can't be grouped under your section (settings that don't relate to any other settings and can't be grouped under your section
@@ -136,13 +136,13 @@ importance.</li>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-2"> <div class="col-2">
<h4>11 to 15</h4> <h4>11 to 15</h4>
</div> </div>
<div class="layout-content-col span-11"> <div class="col-11">
<p>Same advice as above, but try 2 to 4 section dividers.</p> <p>Same advice as above, but try 2 to 4 section dividers.</p>
@@ -161,13 +161,13 @@ setting.</li>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-2"> <div class="col-2">
<h4>16 or more</h4> <h4>16 or more</h4>
</div> </div>
<div class="layout-content-col span-11"> <div class="col-11">
<p>If you have any instances of 4 or more related settings, group them under a subscreen. Then use <p>If you have any instances of 4 or more related settings, group them under a subscreen. Then use
the advice suggested above for the reduced list size.</p> the advice suggested above for the reduced list size.</p>
@@ -178,66 +178,66 @@ the advice suggested above for the reduced list size.</p>
<h2 id="patterns">Design Patterns</h2> <h2 id="patterns">Design Patterns</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Checkbox</h4> <h4>Checkbox</h4>
<p>Use this pattern for a setting that is either selected or not selected.</p> <p>Use this pattern for a setting that is either selected or not selected.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_checkbox.png"> <img src="{@docRoot}design/media/settings_checkbox.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Multiple choice</h4> <h4>Multiple choice</h4>
<p>Use this pattern for a setting that needs to present a discrete set of options, from which the <p>Use this pattern for a setting that needs to present a discrete set of options, from which the
user can choose only one.</p> user can choose only one.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_multiple_choice.png"> <img src="{@docRoot}design/media/settings_multiple_choice.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Slider</h4> <h4>Slider</h4>
<p>Use this pattern for a setting where the range of values are not discrete and fall along a <p>Use this pattern for a setting where the range of values are not discrete and fall along a
continuum.</p> continuum.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_slider.png"> <img src="{@docRoot}design/media/settings_slider.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Date/time</h4> <h4>Date/time</h4>
<p>Use this pattern for a setting that needs to collect a date and/or time from the user.</p> <p>Use this pattern for a setting that needs to collect a date and/or time from the user.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_date_time.png"> <img src="{@docRoot}design/media/settings_date_time.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Subscreen navigation</h4> <h4>Subscreen navigation</h4>
<p>Use this pattern for navigating to a subscreen or sequence of subscreens that guide the user <p>Use this pattern for navigating to a subscreen or sequence of subscreens that guide the user
@@ -250,15 +250,15 @@ first step in the sequence.</li>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_subscreen_navigation.png"> <img src="{@docRoot}design/media/settings_subscreen_navigation.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>List subscreen</h4> <h4>List subscreen</h4>
<p>Use this pattern for a setting or category of settings that contains a list of equivalent items. <p>Use this pattern for a setting or category of settings that contains a list of equivalent items.
@@ -268,15 +268,15 @@ example, status is reinforced with an icon to the right of the label.) Any actio
the list appear in the action bar rather than the list itself.</p> the list appear in the action bar rather than the list itself.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_list_subscreen.png"> <img src="{@docRoot}design/media/settings_list_subscreen.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Master on/off switch</h4> <h4>Master on/off switch</h4>
<p>Use this pattern for a category of settings that need a mechanism for turning on or off as a <p>Use this pattern for a category of settings that need a mechanism for turning on or off as a
@@ -286,15 +286,15 @@ is turned off, the items in the list disappear, replaced by text that describes
empty. If any actions require the switch to be on, they become disabled.</p> empty. If any actions require the switch to be on, they become disabled.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_master_on_off.png"> <img src="{@docRoot}design/media/settings_master_on_off.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
@@ -303,15 +303,15 @@ However, you should only do this in cases where users rarely need to access the
it's initially set up and more often just want to toggle the switch.</p> it's initially set up and more often just want to toggle the switch.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_master_on_off_2.png"> <img src="{@docRoot}design/media/settings_master_on_off_2.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Individual on/off switch</h4> <h4>Individual on/off switch</h4>
<p>Use this pattern for an individual setting that requires a more elaborate description than can <p>Use this pattern for an individual setting that requires a more elaborate description than can
@@ -323,15 +323,15 @@ reflect the current selection.</p>
does, we made the status more descriptive than just "On".</p> does, we made the status more descriptive than just "On".</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_individual_on_off.png"> <img src="{@docRoot}design/media/settings_individual_on_off.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Dependency</h4> <h4>Dependency</h4>
<p>Use this pattern for a setting that changes availability based on the value of another setting. <p>Use this pattern for a setting that changes availability based on the value of another setting.
@@ -344,7 +344,7 @@ master on/off switch so that your main settings screen isn't cluttered by lots o
</p> </p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<img src="{@docRoot}design/media/settings_dependency.png"> <img src="{@docRoot}design/media/settings_dependency.png">
@@ -408,8 +408,8 @@ they'll fit everywhere.</p>
it or provide instructions. Starting in Ice Cream Sandwich, we're using secondary text for status. it or provide instructions. Starting in Ice Cream Sandwich, we're using secondary text for status.
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad emulate-content-left-padding">Before</div> <div class="do-dont-label bad emulate-content-left-padding">Before</div>
@@ -431,7 +431,7 @@ it or provide instructions. Starting in Ice Cream Sandwich, we're using secondar
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label good">After</div> <div class="do-dont-label good">After</div>
@@ -490,8 +490,8 @@ provide a description. Only include one if necessary.</p>
<p>The following are examples of changes we made to labels and secondary text in the Settings app <p>The following are examples of changes we made to labels and secondary text in the Settings app
in Ice Cream Sandwich.</p> in Ice Cream Sandwich.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad emulate-content-left-padding">Before</div> <div class="do-dont-label bad emulate-content-left-padding">Before</div>
@@ -506,7 +506,7 @@ in Ice Cream Sandwich.</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label good">After</div> <div class="do-dont-label good">After</div>
@@ -521,7 +521,7 @@ in Ice Cream Sandwich.</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<p>In this checkbox setting, we eliminated the throwaway word "Use" and rephrased the label to be <p>In this checkbox setting, we eliminated the throwaway word "Use" and rephrased the label to be
more direct and understandable.</p> more direct and understandable.</p>
@@ -530,8 +530,8 @@ more direct and understandable.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad emulate-content-left-padding">Before</div> <div class="do-dont-label bad emulate-content-left-padding">Before</div>
@@ -553,7 +553,7 @@ more direct and understandable.</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label good">After</div> <div class="do-dont-label good">After</div>
@@ -575,7 +575,7 @@ more direct and understandable.</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<p>In this multiple choice setting, we changed the label to a friendlier term and also replaced <p>In this multiple choice setting, we changed the label to a friendlier term and also replaced
the description with status. We put some descriptive words around the selected value, "10 the description with status. We put some descriptive words around the selected value, "10
@@ -584,8 +584,8 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad emulate-content-left-padding">Before</div> <div class="do-dont-label bad emulate-content-left-padding">Before</div>
@@ -607,7 +607,7 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label good">After</div> <div class="do-dont-label good">After</div>
@@ -629,7 +629,7 @@ minutes", because on its own, the meaning could be misinterpreted as "sleep for
</table> </table>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<p>This setting navigates to a a sequence of subscreens that allow users to choose a type of <p>This setting navigates to a a sequence of subscreens that allow users to choose a type of
screen lock and then set it up. We eliminated the throwaway word "Change" in the label, and screen lock and then set it up. We eliminated the throwaway word "Change" in the label, and
@@ -639,8 +639,8 @@ hasn't set up a screen lock, the secondary text says "None".</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label bad emulate-content-left-padding">Before</div> <div class="do-dont-label bad emulate-content-left-padding">Before</div>
@@ -662,7 +662,7 @@ hasn't set up a screen lock, the secondary text says "None".</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<div class="do-dont-label good">After</div> <div class="do-dont-label good">After</div>
@@ -684,7 +684,7 @@ hasn't set up a screen lock, the secondary text says "None".</p>
</table> </table>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<p>In this checkbox setting&mdash;although it's technical jargon&mdash;we kept the "NFC" label <p>In this checkbox setting&mdash;although it's technical jargon&mdash;we kept the "NFC" label
because: (1) we couldn't find a clear, concise alternative, and (2) user familiarity with the because: (1) we couldn't find a clear, concise alternative, and (2) user familiarity with the

6
docs/html/design/patterns/swipe-views.jd
View File

@@ -42,8 +42,8 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
<h2 id="between-tabs">Swiping Between Tabs</h2> <h2 id="between-tabs">Swiping Between Tabs</h2>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<div class="framed-nexus5-port-span-5"> <div class="framed-nexus5-port-span-5">
<video class="play-on-hover" autoplay> <video class="play-on-hover" autoplay>
@@ -58,7 +58,7 @@ using the swipe gesture to navigate to the next/previous detail view.</p>
</div> </div>
</div> </div>
<div class="layout-content-col span-8"> <div class="col-8">
<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> <p>If your app uses action bar tabs, use swipe to navigate between the different views.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>

20
docs/html/design/patterns/widgets.jd
View File

@@ -21,18 +21,18 @@ page.metaDescription=Design guide to creating widgets that are easy to use and l
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h3>Collection widgets</h3> <h3>Collection widgets</h3>
<p>As the name implies, collection widgets specialize in displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.</p> <p>As the name implies, collection widgets specialize in displaying multitude elements of the same type, such as a collection of pictures from a gallery app, a collection of articles from a news app or a collection of emails/messages from a communication app. Collection widgets typically focus on two use cases: browsing the collection, and opening an element of the collection to its detail view for consumption. Collection widgets can scroll vertically.</p>
</div> </div>
<div class="layout-content-col span-3"> <div class="col-3">
<img src="{@docRoot}design/media/widgets_collection_gmail.png"> <img src="{@docRoot}design/media/widgets_collection_gmail.png">
<div class="figure-caption"> <div class="figure-caption">
ListView widget ListView widget
</div> </div>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/widgets_collection_bookmarks.png"> <img src="{@docRoot}design/media/widgets_collection_bookmarks.png">
<div class="figure-caption"> <div class="figure-caption">
GridView widget GridView widget
@@ -84,8 +84,8 @@ A music player widget is primarily a control widget, but also keeps the user inf
<li>Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.</li> <li>Open application at top level: Tapping on an information element will usually navigate the user to a lower level detail screen. Providing access to the top level of your application provides more navigation flexibility and can replace a dedicated app shortcut that users would otherwise use to navigate to the app from the home screen. Using your application icon as an affordance can also provide your widget with a clear identity in case the data you're displaying is ambiguous.</li>
</ul> </ul>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h3>Widget resizing</h3> <h3>Widget resizing</h3>
<p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p> <p>With version 3.1, Android introduced resizable widgets to the platform. Resizing allows users to adjust the height and/or the width of a widget within the constraints of the home panel placement grid. You can decide if your widget is freely resizable or if it is constrained to horizontal or vertical size changes. You do not have to support resizing if your particular widget is inherently fixed-size.</p>
<p>Allowing users to resize widgets has important benefits:</p> <p>Allowing users to resize widgets has important benefits:</p>
@@ -95,7 +95,7 @@ A music player widget is primarily a control widget, but also keeps the user inf
</ul> </ul>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/widgets_resizing01.png"> <img src="{@docRoot}design/media/widgets_resizing01.png">
<div class="figure-caption"> <div class="figure-caption">
A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size. A long press and subsequent release sets resizable widgets into resize mode. Users can use the drag handles or the widget corners to set the desired size.
@@ -116,14 +116,14 @@ A music player widget is primarily a control widget, but also keeps the user inf
</ul> </ul>
<h3>Widget configuration</h3> <h3>Widget configuration</h3>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.</p> <p>Sometimes widgets need to be setup before they can become useful. Think of an email widget for example, where you need to provide an account before the inbox can be displayed. Or a static photo widget where the user has to assign the picture that is to be displayed from the gallery.</p>
<p>Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don't present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user's context of place, even if doing so requires use of multiple dialogs.</p> <p>Android widgets display their configuration choices right after the widget is dropped onto a home panel. Keep the widget configuration light and don't present more than 2-3 configuration elements. Use dialog-style instead of full-screen activities to present configuration choices and retain the user's context of place, even if doing so requires use of multiple dialogs.</p>
<p>Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a "Setup" or "Configuration" button.</p> <p>Once setup, there typically is not a lot of reason to revisit the setup. Therefore Android widgets do not show a "Setup" or "Configuration" button.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/widgets_config.png"> <img src="{@docRoot}design/media/widgets_config.png">
<div class="figure-caption"> <div class="figure-caption">
After adding a Play widget to a home panel, the widget asks the user to specify the type of media the widget should display. After adding a Play widget to a home panel, the widget asks the user to specify the type of media the widget should display.

24
docs/html/design/style/branding.jd
View File

@@ -23,15 +23,15 @@ everyone else's. In Android, your app can shine as an extension of your brand. <
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/branding_wallet.png" style="width:94%"> <img src="{@docRoot}design/media/branding_wallet.png" style="width:94%">
<div class="figure-caption"> <div class="figure-caption">
The four colors of the Google Wallet logo provide a playful accent to the four dots The four colors of the Google Wallet logo provide a playful accent to the four dots
that appear as the user enters a PIN. that appear as the user enters a PIN.
</div> </div>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%"> <img src="{@docRoot}design/media/branding_googlemusic.png" style="width:94%">
<div class="figure-caption"> <div class="figure-caption">
The Google Play Music app has an orange theme color, which is used for emphasis The Google Play Music app has an orange theme color, which is used for emphasis
@@ -56,15 +56,15 @@ and app name in the action bar.</p>
<div class="vspace size-1">&nbsp;</div> <div class="vspace size-1">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6" style="padding-top:24px;"> <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;"> <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;"> <div class="figure-caption" style="width:290px;margin-left:20px;">
Google+ reinforces its brand by carrying its launcher icon through to the action bar. Google+ reinforces its brand by carrying its launcher icon through to the action bar.
</div> </div>
<img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;"> <img src="{@docRoot}design/media/branding_logo_icon_action_bar.png" style="width:320px;float:left;padding-right:1em;">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;"> <img src="{@docRoot}design/media/yourbranding_app.png" style="width:320px;">
<div class="figure-caption" 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. 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.
@@ -87,8 +87,8 @@ Android app as well. <strong>If you take this approach, make sure your brand sty
applied to every single icon in your app.</strong></p> applied to every single icon in your app.</strong></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p>One exception: For any icon in your existing set where the symbol is different from <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 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 understand what the purpose of the icon is based on what they've learned in other
@@ -99,20 +99,20 @@ applied to every single icon in your app.</strong></p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;"> <img src="{@docRoot}design/media/yourbranding_in-app-icons.png" style="width:300px;margin:12px 48px 0 16px;">
</div> </div>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<p><strong>Example</strong>:<br /> <p><strong>Example</strong>:<br />
</p> </p>
<p>The brand's normal icon for sharing on other platforms is a right arrow. <p>The brand's normal icon for sharing on other platforms is a right arrow.
</div> </div>
<div class="layout-content-col span-6 lasyout-with-list-item-margins"> <div class="col-6 lasyout-with-list-item-margins">
<div style="margin-bottom:1em;"> <div style="margin-bottom:1em;">
<span class="do-dont-label bad" style="margin-left:12px">Don't</span> <span class="do-dont-label bad" style="margin-left:12px">Don't</span>

8
docs/html/design/style/devices-displays.jd
View File

@@ -19,15 +19,15 @@ gracefully scale from large tablets to smaller phones.</p>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Be flexible</h4> <h4>Be flexible</h4>
<p>Stretch and compress your layouts to accommodate various heights and widths.</p> <p>Stretch and compress your layouts to accommodate various heights and widths.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Optimize layouts</h4> <h4>Optimize layouts</h4>
@@ -35,7 +35,7 @@ gracefully scale from large tablets to smaller phones.</p>
multiple views to reveal more content and ease navigation.</p> multiple views to reveal more content and ease navigation.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Assets for all</h4> <h4>Assets for all</h4>
<p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to <p>Provide resources for different screen densities (<acronym title="Dots per inch">DPI</acronym>) to

92
docs/html/design/style/iconography.jd
View File

@@ -53,26 +53,26 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
any type of background.</p> any type of background.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_launcher_size.png"> <img src="{@docRoot}design/media/iconography_launcher_size.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_launcher_focal.png"> <img src="{@docRoot}design/media/iconography_launcher_focal.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_launcher_style.png"> <img src="{@docRoot}design/media/iconography_launcher_style.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Sizes &amp; scale</h4> <h4>Sizes &amp; scale</h4>
@@ -84,7 +84,7 @@ any type of background.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Proportions</h4> <h4>Proportions</h4>
@@ -95,7 +95,7 @@ any type of background.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Style</h4> <h4>Style</h4>
<p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed <p>Use a distinct silhouette. Three-dimensional, front view, with a slight perspective as if viewed
@@ -105,11 +105,11 @@ from above, so that users perceive some depth.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
&nbsp; &nbsp;
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/iconography_launcher_example.png"> <img src="{@docRoot}design/media/iconography_launcher_example.png">
@@ -117,8 +117,8 @@ from above, so that users perceive some depth.</p>
<!-- 2 free columns --> <!-- 2 free columns -->
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-12"> <div class="col-12">
<img src="{@docRoot}design/media/iconography_launcher_example2.png"> <img src="{@docRoot}design/media/iconography_launcher_example2.png">
@@ -160,26 +160,26 @@ files for further customization.
href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a> href="{@docRoot}downloads/design/Android_Design_Icons_20131106.zip">Download the Action Bar Icon Pack</a>
</p> </p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_actionbar_size.png"> <img src="{@docRoot}design/media/iconography_actionbar_size.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_actionbar_focal.png"> <img src="{@docRoot}design/media/iconography_actionbar_focal.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_actionbar_style.png"> <img src="{@docRoot}design/media/iconography_actionbar_style.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Sizes &amp; scale</h4> <h4>Sizes &amp; scale</h4>
@@ -189,7 +189,7 @@ files for further customization.
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Focal area &amp; proportions</h4> <h4>Focal area &amp; proportions</h4>
@@ -201,7 +201,7 @@ files for further customization.
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Style</h4> <h4>Style</h4>
<p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin, <p>Pictographic, flat, not too detailed, with smooth curves or sharp shapes. If the graphic is thin,
@@ -212,8 +212,8 @@ spaces should be a minimum of 2 dp.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Colors</h4> <h4>Colors</h4>
<p>Colors: <strong>#333333</strong><br /> <p>Colors: <strong>#333333</strong><br />
@@ -226,7 +226,7 @@ Enabled: <strong>80%</strong> opacity<br />
Disabled: <strong>30%</strong> opacity</p> Disabled: <strong>30%</strong> opacity</p>
</div> </div>
<div class="layout-content-col span-9"> <div class="col-9">
<img src="{@docRoot}design/media/iconography_actionbar_colors.png"> <img src="{@docRoot}design/media/iconography_actionbar_colors.png">
@@ -249,26 +249,26 @@ items. For example, in the Gmail app, each message has a star icon that marks th
important.</p> important.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_small_size.png"> <img src="{@docRoot}design/media/iconography_small_size.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_small_focal.png"> <img src="{@docRoot}design/media/iconography_small_focal.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_small_style.png"> <img src="{@docRoot}design/media/iconography_small_style.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Sizes &amp; scale</h4> <h4>Sizes &amp; scale</h4>
@@ -278,7 +278,7 @@ important.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Focal area &amp; proportions</h4> <h4>Focal area &amp; proportions</h4>
@@ -290,7 +290,7 @@ important.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Style</h4> <h4>Style</h4>
<p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual <p>Neutral, flat, and simple. Filled shapes are easier to see than thin strokes. Use a single visual
@@ -300,8 +300,8 @@ metaphor so that a user can easily recognize and understand its purpose.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_small_colors.png"> <img src="{@docRoot}design/media/iconography_small_colors.png">
@@ -313,7 +313,7 @@ to indicate a bookmarked message. If an icon is actionable, choose a color that
the background.</p> the background.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/iconography_small_example.png"> <img src="{@docRoot}design/media/iconography_small_example.png">
@@ -337,26 +337,26 @@ the background.</p>
whenever a new notification is available.</p> whenever a new notification is available.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_notification_size.png"> <img src="{@docRoot}design/media/iconography_notification_size.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_notification_focal.png"> <img src="{@docRoot}design/media/iconography_notification_focal.png">
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/iconography_notification_style.png"> <img src="{@docRoot}design/media/iconography_notification_style.png">
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Sizes &amp; scale</h4> <h4>Sizes &amp; scale</h4>
@@ -366,7 +366,7 @@ whenever a new notification is available.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Focal area &amp; proportions</h4> <h4>Focal area &amp; proportions</h4>
@@ -378,7 +378,7 @@ whenever a new notification is available.</p>
</ul> </ul>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Style</h4> <h4>Style</h4>
<p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p> <p>Keep the style flat and simple, using the same single, visual metaphor as your launcher icon.</p>
@@ -387,14 +387,14 @@ whenever a new notification is available.</p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Colors</h4> <h4>Colors</h4>
<p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p> <p>Notification icons must be entirely white. Also, the system may scale down and/or darken the icons.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/iconography_notification_example.png"> <img src="{@docRoot}design/media/iconography_notification_example.png">

6
docs/html/design/style/metrics-grids.jd
View File

@@ -40,13 +40,13 @@ refer to layout dimensions with <acronym title="Density-independent pixels: One
on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p> on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/metrics_diagram.png"> <img src="{@docRoot}design/media/metrics_diagram.png">
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<h4>Space considerations</h4> <h4>Space considerations</h4>
<p>Devices vary in the amount of density-independent pixels (dp) they can display.</p> <p>Devices vary in the amount of density-independent pixels (dp) they can display.</p>

6
docs/html/design/style/themes.jd
View File

@@ -1,8 +1,8 @@
page.title=Themes page.title=Themes
@jd:body @jd:body
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}design/media/themes_holo_light.png"> <img src="{@docRoot}design/media/themes_holo_light.png">
<div class="figure-caption"> <div class="figure-caption">
@@ -15,7 +15,7 @@ page.title=Themes
</div> </div>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<a class="notice-designers-material" <a class="notice-designers-material"

18
docs/html/design/style/touch-feedback.jd
View File

@@ -2,8 +2,8 @@ page.title=Touch Feedback
page.tags=input,button page.tags=input,button
@jd:body @jd:body
<div class="layout-content-row" style="margin-bottom: -100px"> <div class="cols" style="margin-bottom: -100px">
<div class="layout-content-col span-7"> <div class="col-7">
<a class="notice-designers-material" <a class="notice-designers-material"
href="http://www.google.com/design/spec/animation/responsive-interaction.html"> href="http://www.google.com/design/spec/animation/responsive-interaction.html">
@@ -31,7 +31,7 @@ easier because the default touch feedback works with whatever hue you choose.</l
</div> </div>
<div class="layout-content-col span-6" style="float:right;"> <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=""> <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.mp4" type="video/mp4">
<source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm"> <source src="{@docRoot}design/media/touch_feedback.webm" type="video/webm">
@@ -55,8 +55,8 @@ easier because the default touch feedback works with whatever hue you choose.</l
<div class="vspace size-3">&nbsp;</div> <div class="vspace size-3">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Communication</h4> <h4>Communication</h4>
<p>When your objects react to more complex gestures, help users <p>When your objects react to more complex gestures, help users
@@ -66,7 +66,7 @@ understand what the outcome will be.</p>
begins to dim. This helps the user understand that swiping will cause the begins to dim. This helps the user understand that swiping will cause the
item to be removed.</p> item to be removed.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/touch_feedback_manipulation.png"> <img src="{@docRoot}design/media/touch_feedback_manipulation.png">
@@ -74,8 +74,8 @@ item to be removed.</p>
</div> </div>
<div class="vspace size-3">&nbsp;</div> <div class="vspace size-3">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/touch_feedback_communication.png"> <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 <p><em>If a user attempts to scroll past the last home screen panel, the screen
@@ -83,7 +83,7 @@ item to be removed.</p>
isn’t possible.</em></p> isn’t possible.</em></p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Boundaries</h4> <h4>Boundaries</h4>
<p> <p>

12
docs/html/design/style/typography.jd
View File

@@ -3,8 +3,8 @@ page.tags="textview","font"
page.metaDescription=How to use typography in your Android apps. page.metaDescription=How to use typography in your Android apps.
@jd:body @jd:body
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8"> <div class="col-8">
<img src="{@docRoot}design/media/typography_main.png"> <img src="{@docRoot}design/media/typography_main.png">
@@ -19,7 +19,7 @@ page.metaDescription=How to use typography in your Android apps.
</div> </div>
</a> </a>
<div class="layout-content-col span-5"> <div class="col-5">
<p> <p>
<a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');" <a class="download-button" onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
@@ -48,8 +48,8 @@ variant in regular and bold weights, along with an italic style for each weight.
<hr> <hr>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Default type colors</h4> <h4>Default type colors</h4>
<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and <p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
@@ -60,7 +60,7 @@ touch feedback states when used inside UI elements.</p>
<img src="{@docRoot}design/media/typography_defaults.png"> <img src="{@docRoot}design/media/typography_defaults.png">
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4>Typographic Scale</h4> <h4>Typographic Scale</h4>
<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too <p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too

36
docs/html/design/style/writing.jd
View File

@@ -16,8 +16,8 @@ page.tags=dialog,toast,notification
<p><em>Avoid wordy, stilted text</em></p> <p><em>Avoid wordy, stilted text</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
@@ -26,7 +26,7 @@ page.tags=dialog,toast,notification
</td></tr></tbody></table> </td></tr></tbody></table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
@@ -39,8 +39,8 @@ page.tags=dialog,toast,notification
<p><em>Don't provide unnecessary information</em></p> <p><em>Don't provide unnecessary information</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">From a Setup Wizard screen</div> <div class="do-dont-label bad">From a Setup Wizard screen</div>
@@ -64,7 +64,7 @@ page.tags=dialog,toast,notification
</table> </table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">From a Setup Wizard screen</div> <div class="do-dont-label good">From a Setup Wizard screen</div>
@@ -100,8 +100,8 @@ page.tags=dialog,toast,notification
<p><em>Focus on the user's concern, not technical details</em></p> <p><em>Focus on the user's concern, not technical details</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
@@ -110,7 +110,7 @@ page.tags=dialog,toast,notification
</td></tr></tbody></table> </td></tr></tbody></table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
@@ -123,8 +123,8 @@ page.tags=dialog,toast,notification
<p><em>Put top news first</em></p> <p><em>Put top news first</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
@@ -133,7 +133,7 @@ page.tags=dialog,toast,notification
</td></tr></tbody></table> </td></tr></tbody></table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
@@ -146,8 +146,8 @@ page.tags=dialog,toast,notification
<p><em>Put the user's goal first</em></p> <p><em>Put the user's goal first</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
@@ -156,7 +156,7 @@ page.tags=dialog,toast,notification
</td></tr></tbody></table> </td></tr></tbody></table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
@@ -178,8 +178,8 @@ page.tags=dialog,toast,notification
</ul> </ul>
<p><em>Avoid being confusing or annoying</em></p> <p><em>Avoid being confusing or annoying</em></p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6 layout-with-list-item-margins"> <div class="col-6 layout-with-list-item-margins">
<div class="do-dont-label bad">Don't</div> <div class="do-dont-label bad">Don't</div>
<table class="ui-table bad"> <table class="ui-table bad">
<thead> <thead>
@@ -200,7 +200,7 @@ page.tags=dialog,toast,notification
</table> </table>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<div class="do-dont-label good">Do</div> <div class="do-dont-label good">Do</div>
<table class="ui-table good"> <table class="ui-table good">
<thead> <thead>

6
docs/html/design/tv/patterns.jd
View File

@@ -43,8 +43,8 @@ Your application provides these recommendations, as described in <a href="{@docR
</a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations"> </a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations">
Design for Android TV</a>.</p> Design for Android TV</a>.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-8 with-callouts"> <div class="col-8 with-callouts">
<p>The design elements of the recommendation card are as follows:</p> <p>The design elements of the recommendation card are as follows:</p>
<ol> <ol>
@@ -61,7 +61,7 @@ Design for Android TV</a>.</p>
Recommendations</a> for more information.</p> Recommendations</a> for more information.</p>
</div> </div>
<div class="layout-content-col span-5"> <div class="col-5">
<img src="{@docRoot}images/tv/recommend-card.png"> <img src="{@docRoot}images/tv/recommend-card.png">

60
docs/html/design/videos/index.jd
View File

@@ -7,60 +7,60 @@ page.title=Videos
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326368573">Enchant, Simplify, Amaze: Android's Design Principles</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326368573">Enchant, Simplify, Amaze: Android's Design Principles</a></h3>
<p>Want to enchant people, simplify their lives, and make them feel amazing with your app? Learn how Android's Design Principles can help you create products that resonate with people. Find out about the meaning and research behind the principles. See real-world examples and practices from the Android Design team. Discover techniques for applying the principles in your daily work. No design experience necessary.</p> <p>Want to enchant people, simplify their lives, and make them feel amazing with your app? Learn how Android's Design Principles can help you create products that resonate with people. Find out about the meaning and research behind the principles. See real-world examples and practices from the Android Design team. Discover techniques for applying the principles in your daily work. No design experience necessary.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/s0HIP8EdlnE" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/s0HIP8EdlnE" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326301704">Structure in Android App Design</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326301704">Structure in Android App Design</a></h3>
<p>Life is simple when your app is simple. But when your apps gets more complex, how do you choose between spinners, tabs, and drawers for navigation? Members of the Android Design team look at techniques for making your app predictable and pleasing to use.</p> <p>Life is simple when your app is simple. But when your apps gets more complex, how do you choose between spinners, tabs, and drawers for navigation? Members of the Android Design team look at techniques for making your app predictable and pleasing to use.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/XpqyiBR0lJ4" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/XpqyiBR0lJ4" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326425499">Fireside Chat with the Android Team</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326425499">Fireside Chat with the Android Team</a></h3>
<p>Pull up a chair and join the Android platform team for a fireside chat. It's your opportunity to ask us about the platform and learn a little bit more about why things work the way they do, from the people who built it. </p> <p>Pull up a chair and join the Android platform team for a fireside chat. It's your opportunity to ask us about the platform and learn a little bit more about why things work the way they do, from the people who built it. </p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/A5OOJDIrYls" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/A5OOJDIrYls" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326483138">Agile UX Research Practice in Android</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326483138">Agile UX Research Practice in Android</a></h3>
<p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied "Pulse Studies" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p> <p>In the Android UX team, it is critical to get user feedback frequently and consistently so that we are able to iterate and develop the best-in-class designs for our users. We will discuss how the team applied "Pulse Studies" (iterative research sessions) in order to put new ideas, designs, and concepts in front of users on a regular basis; it requires minimal advance planning, it can have an immediate product impact, and it can meet urgent needs. </p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/6MOeVNbh9cY" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/6MOeVNbh9cY" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326460111">Cognitive Science and Design</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/2013/sessions/326460111">Cognitive Science and Design</a></h3>
<p>This session will provide an in-depth look at human perception and cognition, and its implications for interactive and visual design. The human brain is purely treated as an information processing machine, and we will teach the audience its attributes, its advantages, its limitations, and generally how to hack it. </p> <p>This session will provide an in-depth look at human perception and cognition, and its implications for interactive and visual design. The human brain is purely treated as an information processing machine, and we will teach the audience its attributes, its advantages, its limitations, and generally how to hack it. </p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/z2exxj4COhU" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/z2exxj4COhU" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
@@ -69,60 +69,60 @@ page.title=Videos
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3> <h3 id="design-for-success"><a href="https://developers.google.com/events/io/sessions/gooio2012/112/">Android Design for Success</a></h3>
<p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p> <p>You have a great idea for an Android app. You want it to stand out among hundreds of thousands. You want your users to love it and tell everyone they know. The Android User Experience team is here to help. We talk about the Android Design guide and other tricks of the trade for creating apps that delight users and help them accomplish their goals. No design background is required.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/2NL_83EG0no" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/2NL_83EG0no" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3> <h3 id="design-for-engineers"><a href="https://developers.google.com/events/io/sessions/gooio2012/1204/">Android Design for Engineers</a></h3>
<p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p> <p>Design isn't black magic, it's a field that people can learn. In this talk two elite designers from Google give you an advanced crash course in interactive and visual design. Topics include mental models, natural mappings, metaphors, mode errors, visual hierarchies, typography and gestalt principles. Correctly applied, this knowledge can drastically improve the quality of your work.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/iJDoxOTyMdk" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/iJDoxOTyMdk" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3> <h3 id="navigation-in-android"><a href="https://developers.google.com/events/io/sessions/gooio2012/114/">Navigation in Android</a></h3>
<p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p> <p>An app is useless if people can't find their way around it. Android introduced big navigation-support changes in 3.0 and 4.0. The Action Bar offers a convenient control for Up navigation, the Back key's behavior became more consistent within tasks, and the Recent Tasks UI got an overhaul. In this talk, we discuss how and why we got where we are today, how to think about navigation when designing your app's user experience, and how to write apps that offer effortless navigation in multiple Android versions.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/XwGHJJYBs0Q" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/XwGHJJYBs0Q" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide&#59; Now What?</a></h3> <h3 id="now-what"><a href="https://developers.google.com/events/io/sessions/gooio2012/115/">So You've Read the Design Guide&#59; Now What?</a></h3>
<p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit &amp; finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p> <p>The Android Design Guide describes how to design beautiful Android apps, but not how to build them. In this talk we give practical tips for how to apply fit &amp; finish as you implement your design, we show you how to avoid some common pitfalls, we describe some useful patterns, and show how tools can help.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/2jCVmfCse1E" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/2jCVmfCse1E" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-7"> <div class="col-7">
<h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3> <h3 id="playing-with-patterns"><a href="https://developers.google.com/events/io/sessions/gooio2012/131/">Playing with Patterns</a></h3>
<p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p> <p>Best-in-class application designers and developers talk about their experience in developing for Android, showing screenshots from their app, exploring the challenges they faced, and offering creative solutions congruent with the Android Design guide. Guests are invited to show examples of visual and interaction patterns in their application that manage to keep it simultaneously consistent and personal.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<iframe width="355" height="200" src="//www.youtube.com/embed/8iUbr8RZKtg" frameborder="0" allowfullscreen=""></iframe> <iframe width="355" height="200" src="//www.youtube.com/embed/8iUbr8RZKtg" frameborder="0" allowfullscreen=""></iframe>
</div> </div>
</div> </div>

18
docs/html/design/wear/creative-vision.jd
View File

@@ -2,17 +2,19 @@ page.title=Creative Vision for Android Wear
@jd:body @jd:body
<style> <style>
div.span-13 { .page-vision {
float: left;
margin: 10px 0; margin: 10px 0;
width: 100%;
} }
div.span-13 img { .page-vision img {
float:left; float:left;
margin:2px 20px 40px 0; margin:2px 20px 40px 0;
} }
div.span-13 p { .page-vision p {
margin-left:167px; margin-left:167px;
} }
div.span-13 h2 { .page-vision h2 {
margin-top:0; margin-top:0;
} }
</style> </style>
@@ -22,28 +24,28 @@ allowing users to be more connected to both the virtual world and the real world
Wear experiences are:</p> Wear experiences are:</p>
<div class="layout-content-col span-13"> <div class="page-vision">
<img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" /> <img src="{@docRoot}design/media/wear/vision_traffic.png" width="147" height="147" />
<h2 id="Launched">Launched automatically</h2> <h2 id="Launched">Launched automatically</h2>
<p>Most people are used to launching apps by clicking an icon. Android Wear is different. Wearable apps are aware of the user’s context - time, location, physical activity, and so on. The apps use this information to insert cards into the stream when they become relevant. This makes Android Wear timely, relevant and very specific.</p> <p>Most people are used to launching apps by clicking an icon. Android Wear is different. Wearable apps are aware of the user’s context - time, location, physical activity, and so on. The apps use this information to insert cards into the stream when they become relevant. This makes Android Wear timely, relevant and very specific.</p>
</div> </div>
<div class="layout-content-col span-13"> <div class="page-vision">
<img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" /> <img src="{@docRoot}design/media/wear/vision_navigation.png" width="147" height="147" />
<h2 id="Glanceable">Glanceable</h2> <h2 id="Glanceable">Glanceable</h2>
<p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp, and immediate.</p> <p>A classic wrist watch is designed to let you see the time in a split second and get on with what you were doing. Designing for Android Wear is no different. The less time it takes to use your software, the more time the user can be present in whatever they are doing. Android wear is fast, sharp, and immediate.</p>
</div> </div>
<div class="layout-content-col span-13"> <div class="page-vision">
<img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" /> <img src="{@docRoot}design/media/wear/vision_voice.png" width="147" height="147" style="border: 1px solid #ddd;" />
<h2 id="SuggestDemand">All about suggest and demand</h2> <h2 id="SuggestDemand">All about suggest and demand</h2>
<p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p> <p>Android Wear is like a great personal assistant: it knows you and your preferences, it only interrupts you when absolutely necessary, and it’s always on hand to provide a ready answer. Android Wear is helpful, respectful, and responsive.</p>
</div> </div>
<div class="layout-content-col span-13"> <div class="page-vision">
<img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" /> <img src="{@docRoot}design/media/wear/vision_music.png" width="147" height="147" />
<h2 id="Interaction">Zero or low interaction</h2> <h2 id="Interaction">Zero or low interaction</h2>

12
docs/html/design/wear/style.jd
View File

@@ -21,26 +21,26 @@ href="{@docRoot}training/wearables/apps/layouts.html#UiLibrary"><code>WatchViewS
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/wear/assets_specifics.png" width="300" <img src="{@docRoot}design/media/wear/assets_specifics.png" width="300"
style="margin:32px 0 20px;"> style="margin:32px 0 20px;">
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<h2 id="Assets" style="clear:both">Specific Assets Required</h2> <h2 id="Assets" style="clear:both">Specific Assets Required</h2>
<p>A core set of standard assets may need to be provided depending on your card design: app icon, background image or images, action icons, and action confirmation animations. Of course, your specific design may necessitate other assets. Background images should be provided in landscape format at least 600px width for notifications that include pages of cards, since the system automatically adds a parallaxing effect.</p> <p>A core set of standard assets may need to be provided depending on your card design: app icon, background image or images, action icons, and action confirmation animations. Of course, your specific design may necessitate other assets. Background images should be provided in landscape format at least 600px width for notifications that include pages of cards, since the system automatically adds a parallaxing effect.</p>
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h2 id="PeekCard" style="clear:both">Peek Card Readability</h2> <h2 id="PeekCard" style="clear:both">Peek Card Readability</h2>
<p>Test your card layout to ensure that useful information is conveyed in the peek state on the Home screen. The main message of the card should be readable in the peek state, particularly for contextual cards. Content that requires an interaction to be read, for example a long message, should be cropped appropriately to provide an affordance to the user to swipe the card to read more.</p> <p>Test your card layout to ensure that useful information is conveyed in the peek state on the Home screen. The main message of the card should be readable in the peek state, particularly for contextual cards. Content that requires an interaction to be read, for example a long message, should be cropped appropriately to provide an affordance to the user to swipe the card to read more.</p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="{@docRoot}design/media/wear/peek-card.png" width="300" <img src="{@docRoot}design/media/wear/peek-card.png" width="300"
style="margin:12px 0 0 20px"> style="margin:12px 0 0 20px">

66
docs/html/design/wear/watchfaces.jd
View File

@@ -55,42 +55,42 @@ format.</p>
<p>These guidelines help your concepts align across devices:</p> <p>These guidelines help your concepts align across devices:</p>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-6"> <div class="col-6">
<h3>Create flexible concepts</h3> <h3>Create flexible concepts</h3>
<p>Ideally, the visual functionality of the watch face works for both round and square <p>Ideally, the visual functionality of the watch face works for both round and square
formats. In this example, the visual functionality of the watch face is flexible enough formats. In this example, the visual functionality of the watch face is flexible enough
to work well in either format without any adjustment. However, other design concepts require to work well in either format without any adjustment. However, other design concepts require
different executions for square and round screens.</p> different executions for square and round screens.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/wear/ScreenShapes_Invert.png" width="400" <img src="{@docRoot}design/media/wear/ScreenShapes_Invert.png" width="400"
height="221" alt="" style="margin-top:-30px"> height="221" alt="" style="margin-top:-30px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-6"> <div class="col-6">
<h3>Use a common design language</h3> <h3>Use a common design language</h3>
<p>Try using a common set of colors, line weights, shading, and other design elements <p>Try using a common set of colors, line weights, shading, and other design elements
to draw a visual connection between your square and round versions. By using similar color to draw a visual connection between your square and round versions. By using similar color
palettes and a few consistent visual elements, the overall appearance of square and round palettes and a few consistent visual elements, the overall appearance of square and round
can be appropriately customized while still feeling like part of the same visual system.</p> can be appropriately customized while still feeling like part of the same visual system.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/wear/ScreenShapes_Pyramids.png" width="400" <img src="{@docRoot}design/media/wear/ScreenShapes_Pyramids.png" width="400"
height="221" alt="" style="margin-top:-30px"> height="221" alt="" style="margin-top:-30px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-6"> <div class="col-6">
<h3>Adjust for analog concepts</h3> <h3>Adjust for analog concepts</h3>
<p>Some of your concepts will naturally take the shape of an analog clock, like a center <p>Some of your concepts will naturally take the shape of an analog clock, like a center
dial with hour and minute hands. In this case, consider the corner areas that are exposed dial with hour and minute hands. In this case, consider the corner areas that are exposed
when translating to a square format. Try extending and exploring this extra space.</p> when translating to a square format. Try extending and exploring this extra space.</p>
</div> </div>
<div class="layout-content-col span-7"> <div class="col-7">
<img src="{@docRoot}design/media/wear/ScreenShapes_Rift.png" width="400" <img src="{@docRoot}design/media/wear/ScreenShapes_Rift.png" width="400"
height="221" alt="" style="margin-top:-30px"> height="221" alt="" style="margin-top:-30px">
</div> </div>
@@ -137,8 +137,8 @@ You can configure your watch face to display different ambient designs depending
of screen available on the device. Consider the best design for your watch faces on all of screen available on the device. Consider the best design for your watch faces on all
screens.</p> screens.</p>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>Reduced color space</h3> <h3>Reduced color space</h3>
<p>Some displays use a reduced color space in ambient mode to save power.</p> <p>Some displays use a reduced color space in ambient mode to save power.</p>
<p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode, <p>One reduced color space power saving method is to use a "low-bit" mode. In low-bit mode,
@@ -152,14 +152,14 @@ screens.</p>
displays which do not use color in ambient mode, the background may be either black or displays which do not use color in ambient mode, the background may be either black or
white.</p> white.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200" <img src="{@docRoot}design/media/wear/Render_LowBit.png" width="200"
height="" alt="" style="margin-top:45px;margin-left:13px"> height="" alt="" style="margin-top:45px;margin-left:13px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>Burn protection techniques</h3> <h3>Burn protection techniques</h3>
<p>When designing for OLED screens, you should consider power efficiency and the screen <p>When designing for OLED screens, you should consider power efficiency and the screen
burn-in effect. When these screens are in ambient mode, the system shifts the contents of burn-in effect. When these screens are in ambient mode, the system shifts the contents of
@@ -169,7 +169,7 @@ screens.</p>
replace filled images with pixel patterns. For analog watch face designs, hollow out the center replace filled images with pixel patterns. For analog watch face designs, hollow out the center
where the hands meet to avoid pixel burn-in in this mode.</p> where the hands meet to avoid pixel burn-in in this mode.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200" <img src="{@docRoot}design/media/wear/Render_1Bit.png" width="200"
height="" alt="" style="margin-top:-10px;margin-left:13px"> height="" alt="" style="margin-top:-10px;margin-left:13px">
</div> </div>
@@ -183,8 +183,8 @@ screens.</p>
user the status of the wearable and show notifications from services on the user's phone. Try user the status of the wearable and show notifications from services on the user's phone. Try
to keep critical elements in your watch face designs from being obscured by the UI elements.</p> to keep critical elements in your watch face designs from being obscured by the UI elements.</p>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>Cards</h3> <h3>Cards</h3>
<p>Cards are the notification system that bridges information between the wearable and a <p>Cards are the notification system that bridges information between the wearable and a
mobile device. Cards are also how most applications communicate with users. The user will be mobile device. Cards are also how most applications communicate with users. The user will be
@@ -202,14 +202,14 @@ the bottom half of the face should leverage the small peek card instead.</p>
<p>The system notifies your watch face when the bounds of a peek card change, so you can <p>The system notifies your watch face when the bounds of a peek card change, so you can
rearrange the elements in your design if necessary.</p> rearrange the elements in your design if necessary.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200" <img src="{@docRoot}design/media/wear/CardsRender_Build.png" width="200"
height="" alt="" style="margin-top:20px;margin-left:13px"> height="" alt="" style="margin-top:20px;margin-left:13px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>Indicators</h3> <h3>Indicators</h3>
<p>Indicators tell the user the status of the wearable, such as charging and airplane mode. <p>Indicators tell the user the status of the wearable, such as charging and airplane mode.
When designing a watch face, consider how the indicator will fall over the watch face.</p> When designing a watch face, consider how the indicator will fall over the watch face.</p>
@@ -219,14 +219,14 @@ position the status icons or the hotword on the bottom of the screen, the system
peek cards. If the edge of the watch face contains strong visual elements, such as peek cards. If the edge of the watch face contains strong visual elements, such as
ticks or numbers, place the indicators on the center of the screen.</p> ticks or numbers, place the indicators on the center of the screen.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200" <img src="{@docRoot}design/media/wear/Indicators_Cropped.png" width="200"
height="" alt="" style="margin-top:0px;margin-left:13px"> height="" alt="" style="margin-top:0px;margin-left:13px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>The hotword</h3> <h3>The hotword</h3>
<p>The hotword is the phrase "OK Google", which tells the user that they can interact with <p>The hotword is the phrase "OK Google", which tells the user that they can interact with
the watch using voice commands. When a user turns on the wearable, the hotword appears on the watch using voice commands. When a user turns on the wearable, the hotword appears on
@@ -237,7 +237,7 @@ watch face. Finally, background protection for the hotword and the indicators sh
turned on unless your design is tailored to have these elements appear on top of them, for example turned on unless your design is tailored to have these elements appear on top of them, for example
using dark solid colors with no patterns.</p> using dark solid colors with no patterns.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200" <img src="{@docRoot}design/media/wear/Hotword_Cropped.png" width="200"
height="" alt="" style="margin-top:0px;margin-left:13px"> height="" alt="" style="margin-top:0px;margin-left:13px">
</div> </div>
@@ -253,8 +253,8 @@ using dark solid colors with no patterns.</p>
<p>Your watch face can show users contextually relevant data and react to it by changing styles <p>Your watch face can show users contextually relevant data and react to it by changing styles
and colors in your design.</p> and colors in your design.</p>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>What do you want your user to know?</h3> <h3>What do you want your user to know?</h3>
<p>The first step in designing a data-integrated watch face is to define a conceptual user <p>The first step in designing a data-integrated watch face is to define a conceptual user
outcome based on available data. First, generate a strong concept or outcome you believe is outcome based on available data. First, generate a strong concept or outcome you believe is
@@ -262,14 +262,14 @@ supported by real user needs. What do you want your users to know after they hav
at your design? Once you have identified your outcome, you need to determine how to obtain at your design? Once you have identified your outcome, you need to determine how to obtain
the required data.</p> the required data.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200" <img src="{@docRoot}design/media/wear/Render_Saturn.png" width="200"
height="" alt="" style="margin-top:-10px;margin-left:13px"> height="" alt="" style="margin-top:-10px;margin-left:13px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>A watch dial is a timeline; add data to it</h3> <h3>A watch dial is a timeline; add data to it</h3>
<p>Your watch face concept may include use of data beyond time, such as weather, calendar <p>Your watch face concept may include use of data beyond time, such as weather, calendar
and fitness data. Consider the inclusion of data integration creatively. Avoid simply and fitness data. Consider the inclusion of data integration creatively. Avoid simply
@@ -279,14 +279,14 @@ watch face as a clock with an indication of the current temperature in degrees o
you might design a watch face that describes how the temperature will change over the you might design a watch face that describes how the temperature will change over the
course of the day.</p> course of the day.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Render_Episode.png" width="200" <img src="{@docRoot}design/media/wear/Render_Episode.png" width="200"
height="" alt="" style="margin-top:-10px;margin-left:13px"> height="" alt="" style="margin-top:-10px;margin-left:13px">
</div> </div>
</div> </div>
<div class="layout-content-row" style="margin-top:20px"> <div class="cols" style="margin-top:20px">
<div class="layout-content-col span-9"> <div class="col-9">
<h3>Stick to one message</h3> <h3>Stick to one message</h3>
<p>Once you have solidified your conceptual direction or desired outcome, you will need to <p>Once you have solidified your conceptual direction or desired outcome, you will need to
begin visualizing your watch face. The strongest watch face designs are highly glanceable begin visualizing your watch face. The strongest watch face designs are highly glanceable
@@ -296,7 +296,7 @@ an entire month of calendar events, you might decide to display only the next
upcoming event. By a process of reduction, you should arrive at a powerful singular upcoming event. By a process of reduction, you should arrive at a powerful singular
expression of data to include in your design.</p> expression of data to include in your design.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200" <img src="{@docRoot}design/media/wear/Render_Albumem.png" width="200"
height="" alt="" style="margin-top:-10px;margin-left:13px"> height="" alt="" style="margin-top:-10px;margin-left:13px">
</div> </div>

452
docs/html/develop/index.jd
View File

@@ -9,378 +9,100 @@ tabbedList=1
excludeFromSuggestions=true excludeFromSuggestions=true
@jd:body @jd:body
<style> <section class="dac-expand dac-hero dac-light">
#noplayer-message {
position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none;
}
#player-frame object {z-index:1;}
</style>
<div id="player-wrapper">
<div id="player-frame">
<div id="noplayer-message">
<!-- busted flash player message -->
Your video is supposed to appear here.<br/>
Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
</div>
<div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
<a class="close" onclick="$('#player-wrapper').hide()">close video</a>
</div>
</div>
<div class="wrap"> <div class="wrap">
<!-- Slideshow --> <div class="cols dac-hero-content">
<div class="slideshow-container slideshow-develop col-16"> <div class="col-1of2 col-push-1of2 dac-hero-figure">
<a href="" class="slideshow-prev">Prev</a> <img class="dac-hero-image" src="/images/develop/hero-android-studio-on-device.png">
<a href="" class="slideshow-next">Next</a> </div>
<div class="frame"> <div class="col-1of2 col-pull-1of2">
<ul> <h1 class="dac-hero-title">Start!</h1>
<p class="dac-hero-description">
Set up your environment and create an app. Build faster with sample projects and templates.
</p>
<a class="dac-hero-cta" href="/sdk/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Set up Android Studio
</a><br>
<a class="dac-hero-cta" href="/training/basics/firstapp/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Make your first app
</a><br>
<a class="dac-hero-cta" href="/guide/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Learn about Android
</a><br>
</div>
</div>
<div class="dac-section dac-small">
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:develop/landing/mainlinks"
data-cardSizes="6x2"
data-maxResults="6"></div>
</div>
</div>
</section>
<li class="item carousel-home"> <section class="dac-section dac-gray dac-small dac-invert"><div class="wrap">
<div class="col-8"> <h2 class="norule">Latest</h2>
<img <div class="resource-widget resource-flow-layout col-16"
style="max-height: 250px; margin-top:5px; data-query="collection:develop/landing/latest"
margin-left: 30px; max-width: 451px;" data-cardSizes="6x6"
src="{@docRoot}design/tv/images/focus.png" data-maxResults="3"></div>
class="play no-shadow no-transform" /> </div></section>
</div>
<div class="content-right col-6">
<h2>Create Quality Apps for TV</h2>
<p>Now that the Android platform has
extended to TVs, your apps on Google Play have
a new opportunity for engagement in the
living room. To provide the best
"leanback" experience on the couch, follow
this quality checklist.</p>
<p><a
href="{@docRoot}distribute/essentials/quality/tv.html" class="button">Read
more</a></p>
</div>
</li>
<li class="item carousel-home"> <section class="dac-section dac-light"><div class="wrap">
<div class="col-8"> <h1 class="dac-section-title">Android performance patterns</h1>
<img <div class="dac-section-subtitle">
src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png" Everything you need to know about improving your app’s performance.
class="play no-shadow no-transform" />
</div> </div>
<div class="content-right col-6"> <div class="resource-widget resource-flow-layout col-16"
<h2>Building Great Apps for Tablets</h2> data-query="collection:develop/landing/performance"
<p>Tablets are a fast-growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out this list of tips and techniques on how to deliver a great app experience for tablet users. </p> data-cardSizes="6x6"
<p><a data-maxResults="3"></div>
href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html" class="button">Read <ul class="dac-section-links">
more</a></p> <li class="dac-section-link"><a href="https://www.youtube.com/playlist?list=PLOU2XLYxmsIKEOXh5TwZEv89aofHzNCiu">
</div> <span class="dac-sprite dac-auto-chevron"></span>
</li> Playlist
<li class="item carousel-home">
<div class="col-8">
<img src="{@docRoot}images/google/gps-location.png"
class="play no-shadow no-transform" style="margin:0 0 0 70px;height:230px;width:340px" />
</div>
<div class="content-right col-6" style="width:350px">
<h2>New Location APIs from Google</h2>
<p>The latest version of Google Play services includes new APIs that provide more
efficient and immediate user location data on devices running Android 2.2
and higher. Features include geofencing APIs, user activity recognition, and
power-efficient location updates.</p>
<p><a
href="{@docRoot}google/play-services/location.html" class="button">Read more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img src="{@docRoot}images/google/gps-plus-signin-hero.jpg"
class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
max-width:409px;width:409px" />
</div>
<div class="content-right col-6" style="width:350px">
<h2>New Cross-Platform Single Sign On</h2>
<p>Google+ Sign-In is an easy, trusted way to sign a user into your app.
Now it's even more seamless. A user can sign in to your app on one device and
pick it up on another&mdash;without signing in again. Best of all, it's built
into Google+ Sign-in, so there's no change needed in your app.</p>
<p><a
href="{@docRoot}google/play-services/plus.html" class="button">Read more</a></p>
</div>
</li>
<li class="item carousel-home">
<div class="col-8">
<img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
max-width:409px;width:409px" />
</div>
<div class="content-right col-6" style="width:350px">
<h2>New Google Maps Android APIs!</h2>
<p>Google Maps Android API version 2 is now available with enhanced
features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
indoor maps, support for fragments, and much more.</p>
<p>The APIs are bundled with Google Play services and are
compatible with Android 2.2 and higher.</p>
<p><a
href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
</div>
</li>
</ul>
</div>
</div>
<!-- /End slideshow -->
</div>
<div class="wrap">
<!-- news and feature feed -->
<div class="feed col-8" style="margin-left:0">
<ul class="feed-nav">
<li class="active">DEVELOPER NEWS</li>
<li>FEATURED DOCS</li>
</ul>
<div class="feed-container">
<div class="feed-frame">
<!-- DEVELOPER NEWS -->
<ul>
<li><a href="//android-developers.blogspot.com/2013/07/making-beautiful-android-app-icons.html">
<div class="feed-image" style="background:url('//2.bp.blogspot.com/-HfoO6KNFBKA/UeiyRoELb7I/AAAAAAAAAFs/bHR-5viktU4/s1000/icons.png') no-repeat 0 0;background-size:500px;background-position:center center;"></div>
<h4>Making Beautiful Android App Icons</h4>
<p>As higher density screens gain popularity, it's important to make sure your launcher icon is crisp and high quality...</p>
</a></li>
<li><a href="//android-developers.blogspot.com/2013/07/beautiful-design-collection-summer-2013.html">
<div class="feed-image" style="background:url('//1.bp.blogspot.com/-k8DZYu0daT4/UdRt1AzstvI/AAAAAAAAAFM/CvEkb2yh-i0/s965/beautifulapps_4.png') no-repeat 0 0"></div>
<h4>The Beautiful Design Summer 2013 Collection</h4>
<p>See the apps chosen by the Android Design team for their masterfully crafted design details...</p>
</a></li>
<li><a href="//android-developers.blogspot.com/2013/10/new-developer-features-in-google-play.html">
<div class="feed-image" style="background:url('//3.bp.blogspot.com/-k33rf398Lqw/UlRUMQQRUNI/AAAAAAAAClM/pSwz2YgQpmY/s1600/gps-play_games_logo.png') no-repeat 0 0;background-size:130px;background-position:8px -4px;"></div>
<h4>New Features in Google Play Games</h4>
<p>Three new features that make it easier to understand what players are doing in your game and help you manage game features...</p>
</a></li>
<li><a href="//android-developers.blogspot.com/2013/05/new-ways-to-optimize-your-business-in.html">
<div class="feed-image" style="background:url('//3.bp.blogspot.com/-_8WvpdTVGsE/UkxxxrVoNNI/AAAAAAAACj8/FrQyA-BO11c/s1600/gp-referral-ga.png') no-repeat 0 0;background-size:180px"></div>
<h4>Linking Google Analytics with Google Play</h4>
<p>Understanding your users easier through a new integration between Google Analytics and the Google Play Developer Console...</p>
</a></li> </a></li>
</ul> </ul>
<!-- FEATURED DOCS --> </div></section>
<ul>
<li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html"> <section class="dac-section dac-dark dac-invert"><div class="wrap">
<h4>Tablet Stories</h4> <h1 class="dac-section-title">Build with Google</h1>
<p>More developers are investing in a full tablet experience for their apps. Here are some stories from developers who are seeing real results as they expand their offering to include Android tablets. </p> <div class="dac-section-subtitle">Services on billions of Android devices worldwide to help you build better apps.</div>
</a></li> <div class="resource-widget resource-flow-layout col-16"
<li><a href="{@docRoot}distribute/googleplay/quality/core.html"> data-query="collection:develop/landing/buildwithgoogle"
<h4>Core App Quality Guidelines</h4> data-cardSizes="6x6"
<p>This document helps you assess basic aspects of quality in your app through a compact set of core app quality criteria and associated tests. All Android apps should meet these criteria.</p> data-maxResults="3"></div>
</a></li> <ul class="dac-section-links">
<li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html"> <li class="dac-section-link"><a href="https://developers.google.com/">
<h4>Updated Notifications API Guide</h4> <span class="dac-sprite dac-auto-chevron"></span>
<p>The Notifications API Guide is updated to include information about building Jelly Bean rich notifications using the Support Library APIs for backwards-compatibility.</p> Get started with Google << NEEDS LINK
</a></li>
<li><a href="{@docRoot}guide/topics/ui/dialogs.html">
<h4>Updated Dialogs API Guide</h4>
<p>The Dialogs API Guide now shows to use DialogFragment class, a simpler way to manage your dialogs and embed them in alternative layouts.</p>
</a></li> </a></li>
</ul> </ul>
</div> </div></section>
</div>
</div> <!-- /news and feature feed --> <section class="dac-section dac-light"><div class="wrap">
<!-- video feed --> <h1 class="dac-section-title">DevBytes</h1>
<div class="feed col-8" style="margin-right:0"> <div class="dac-section-subtitle">Learn Android in short, focused tutorials.</div>
<ul class="feed-nav"> <div class="resource-widget resource-flow-layout col-16"
<li class="active">DEVELOPERS LIVE</li> data-query="collection:develop/landing/devbytes"
<li>VIDEO PLAYLISTS</li> data-cardSizes="6x6"
data-maxResults="6"></div>
<ul class="dac-section-links">
<li class="dac-section-link"><a href="https://www.youtube.com/watch?v=wlFVIIstKmA&list=PLOU2XLYxmsIJJHY5OrsREtKewtBhc0Uy2">
<span class="dac-sprite dac-auto-chevron"></span>
DevBytes 2014 playlist
</a></li>
</ul> </ul>
<div class="feed-container"> </div></section>
<div class="feed-frame">
<ul id="DevelopersLive">
</ul>
<ul id="VideoPlaylists">
</ul>
</div>
</div>
</div>
<!-- /video feed -->
</div>
<br class="clearfix"/> <section class="dac-section dac-gray"><div class="wrap">
<h1 class="dac-section-title">Courses</h1>
<div class="dac-section-subtitle">Take free online courses from Android experts that bring you step-by-step to building your own apps.</div>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:develop/landing/courses"
data-cardSizes="6x6"
data-maxResults="3"></div>
</div></section>
<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
/* Load a video into the player box.
* @param id The YouTube video ID
* @param title The video title to display in the player box (character escaped)
* @param autoplay Whether to automatically play the video
*/
function loadVideo(id, title, autoplay) {
swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
(autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
$("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
$("#player-wrapper").show();
setTimeout(function(){$('#noplayer-message').show()}, 2000);
}
/* Draw all videos from a playlist into a 'videoPreviews' list
* @param data The feed data returned from the youtube request
*/
function renderVideoPlaylists(data) {
var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
var MAX_LIST_LENGTH = 4; // number of videos to put in the list
var feed = data.feed;
var entries = feed.entry || [];
var playlistId = feed.yt$playlistId.$t;
var $ulVideos = $('<ul style="display:none"/>');
var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
var $liPlaylist = $('<li class="playlist"></li>');
var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
$liPlaylist.append($aPlaylist);
$aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
$aPlaylist.append('<p>' + playlistDescription + '</p>');
// Loop through each entry (each video) and add it to the 'videoPreviews' list
var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
for (var i = 0; i < length; i++) {
var entry = entries[i];
var title = entry.title.$t;
var id = entry.media$group.yt$videoid.$t;
var thumbUrl = entry.media$group.media$thumbnail[0].url;
var fullDescription = entry.media$group.media$description.$t;
var playerUrl = entry.media$group.media$content[0].url;
var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
var pShortDescription = $('<p>' + shortDescription + '</p>');
var h5Title = "<h5>" + title + "</h5>";
var li = $('<li class="playlist-video"/>');
li.append(a);
a.append(img).append(h5Title).append(pShortDescription);
$ulVideos.append(li);
// use the first entry's thumbnail for the playlist
if (i == 0) {
$aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
}
}
if (feed.entry.length > MAX_LIST_LENGTH) {
// add item to go to youtube for playlist
$ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=' + playlistId + '">More &raquo;</a></li>');
}
$liPlaylist.append($ulVideos);
$('#VideoPlaylists').append($liPlaylist);
}
function renderDevelopersLivePlaylist(data) {
var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
var feed = data.feed;
var entries = feed.entry || [];
var playlistId = feed.yt$playlistId.$t;
var ul = $('#DevelopersLive');
// Loop through each entry (each video) and add it to the '#DevelopersLive' list
for (var i = 0; i < 4; i++) {
var entry = entries[i];
var title = entry.title.$t;
var id = entry.media$group.yt$videoid.$t;
var thumbUrl = entry.media$group.media$thumbnail[0].url;
var fullDescription = entry.media$group.media$description.$t;
var playerUrl = entry.media$group.media$content[0].url;
var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
var pShortDescription = $('<p>' + shortDescription + '</p>');
var h4Title = "<h4>" + title + "</h4>";
var li = $('<li/>');
li.append(a);
a.append(img).append(h4Title).append(pShortDescription);
ul.append(li);
}
}
/* This 'playlist' object defines the playlist IDs for each tab.
* Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
* Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
*/
var playlists = {
'designinaction' : {
'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
},
'bizdevbytes' : {
'ids': ["PLWz5rJ2EKKc8-Osr0TuHyTMEhKV0xJ6ql"]
},
'thisweek' : {
'ids': ["PLWz5rJ2EKKc9Wam5jE-9oY8l6RpeAx-XM"]
},
'googleio' : {
'ids': ["PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"]
}
};
/* Request the playlist feeds from YouTube */
function showVideosPlaylists() {
for (var x in playlists) {
var ids = playlists[x].ids;
for (var i in ids) {
var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
+ ids[i] +
"?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=position'><\/script>";
$("body").append(script);
}
}
}
/* Request the playlist feeds from YouTube */
function showDevelopersLivePlaylist() {
var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */
var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=position'><\/script > ";
$("body").append(script);
}
function togglePlaylist(listLink) {
var $list = $(listLink).parent();
var $ul = $list.find('ul');
if ($ul.is(":visible")) {
$ul.slideUp(function() {
$list.css({'height':'inherit'});
});
} else {
$list.closest('ul').find('li.playlist').find('ul').slideUp();
$ul.slideDown();
$list.css({'height':'auto'});
}
}
showDevelopersLivePlaylist();
showVideosPlaylists();
</script>

2
docs/html/distribute/analyze/index.jd
View File

@@ -1,5 +1,6 @@
page.title=Analyze page.title=Analyze
page.metaDescription=Understanding what your users do inside your app is the key to engaging and monetizing them. page.metaDescription=Understanding what your users do inside your app is the key to engaging and monetizing them.
page.image=images/cards/analytics-mobile_2x.jpg
section.landing=true section.landing=true
excludefromsuggestions=true excludefromsuggestions=true
nonavpage=true nonavpage=true
@@ -37,4 +38,3 @@ nonavpage=true
data-cardSizes="6x6" data-cardSizes="6x6"
data-maxResults="10"> data-maxResults="10">
</div> </div>

2
docs/html/distribute/engage/deep-linking.jd
View File

@@ -1,7 +1,7 @@
page.title=Deep Link to Bring Users Back page.title=Deep Link to Bring Users Back
page.metaDescription=Use deep links to bring your users into your apps from social posts, search, or ads. page.metaDescription=Use deep links to bring your users into your apps from social posts, search, or ads.
page.tags="app indexing, google+ signin" page.tags="app indexing, google+ signin"
page.image=/images/gp-listing-4.jpg page.image=images/cards/google-search_2x.png
@jd:body @jd:body

2
docs/html/distribute/engage/easy-signin.jd
View File

@@ -1,7 +1,7 @@
page.title=Make Signing In Easy page.title=Make Signing In Easy
page.metaDescription=Increase conversion rates while helping users minimize typing by letting users sign in with Google+. page.metaDescription=Increase conversion rates while helping users minimize typing by letting users sign in with Google+.
page.tags="google+" page.tags="google+"
page.image=/images/google/gps-googleplus.png page.image=images/cards/google-sign-in_2x.png
@jd:body @jd:body

2
docs/html/distribute/googleplay/about.jd
View File

@@ -2,7 +2,7 @@ page.title=The Google Play Opportunity
meta.tags="visibility, growth, distributing" meta.tags="visibility, growth, distributing"
page.tags="play, apps, distributing, publishing" page.tags="play, apps, distributing, publishing"
page.metaDescription=Billons of downloads a month and growing. Get your apps in front of users at Google's scale. page.metaDescription=Billons of downloads a month and growing. Get your apps in front of users at Google's scale.
page.image=/distribute/images/about-play.jpg page.image=images/cards/google-play_2x.png
@jd:body @jd:body

2
docs/html/distribute/googleplay/developer-console.jd
View File

@@ -1,6 +1,6 @@
page.title=Developer Console page.title=Developer Console
page.metaDescription=Learn about the Developer Console, your home for app publishing on Google Play. page.metaDescription=Learn about the Developer Console, your home for app publishing on Google Play.
page.image=/distribute/images/developer-console.jpg page.image=images/cards/dev-console_2x.jpg
Xnonavpage=true Xnonavpage=true
@jd:body @jd:body

1
docs/html/distribute/googleplay/index.jd
View File

@@ -1,4 +1,5 @@
page.title=Google Play page.title=Google Play
page.image=images/cards/program-edu_2x.jpg
section.landing=true section.landing=true
nonavpage=true nonavpage=true

BIN
docs/html/distribute/images/advertising.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 23 KiB

82
docs/html/distribute/index.jd
View File

@@ -1,3 +1,4 @@
fullpage=true
page.title=Distribute Your Apps page.title=Distribute Your Apps
page.viewport_width=970 page.viewport_width=970
section.landing=true section.landing=true
@@ -6,21 +7,74 @@ nonavpage=true
page.metaDescription=The most visited store in the world for Android apps. Cloud-connected and always synced, it's never been easier for users to find and download your apps. page.metaDescription=The most visited store in the world for Android apps. Cloud-connected and always synced, it's never been easier for users to find and download your apps.
@jd:body @jd:body
<div class="dac-hero-carousel" data-carousel-query="collection:distribute/landing/carousel">
</div>
<div class="resource-widget resource-carousel-layout col-16" <section class="dac-section dac-gray dac-small dac-invert"><div class="wrap">
style="height:420px;margin-top:20px;padding-top:0" <h2 class="norule">Latest</h2>
data-query="type:youtube+tag:googleplay+tag:developerstory+tag:featured"
data-sortOdrder="-timestamp"
data-maxResults="4"></div>
<div class="resource-widget resource-flow-layout col-16" <div class="resource-widget resource-flow-layout col-16"
data-query="type:blog+tag:googleplay+tag:distribute+tag:featured" data-query="type:youtube+tag:googleplay+tag:developerstory+tag:featured, type:blog+tag:googleplay+tag:distribute+tag:featured"
data-sortOrder="" data-sortOrder="-timestamp"
data-cardSizes="9x6" data-cardSizes="6x6"
data-maxResults="2"></div> data-maxResults="6"></div>
</div></section>
<section class="dac-section dac-invert dac-darken-bg" style="background-image: url(/images/distribute/google-play-bg.jpg)"><div class="wrap">
<div class="cols"><div class="col-10of12 col-push-1of12">
<h1 class="dac-section-title">Reach the world with Google Play</h1>
<div class="dac-section-subtitle">
Publish your apps and games on Google Play and reach over a billion active Android users in over 190 countries around the world.
</div>
</div></div>
<div class="resource-widget resource-flow-layout col-16" <div class="resource-widget resource-flow-layout col-16"
data-query="collection:launch/static" data-query="collection:distribute/landing/googleplay"
data-sortOrder="" data-cardSizes="6x6"
data-cardSizes="6x2x3,6x6,6x6,6x6,6x6,6x2x3,6x2x3,6x6,6x6,6x6,6x6,6x6" data-maxResults="3"></div>
data-maxResults="24"></div>
<ul class="dac-section-links">
<li class="dac-section-link"><a href="/distribute/googleplay/start.html">
<span class="dac-sprite dac-auto-chevron"></span>
Get started
</a></li>
<li class="dac-section-link"><a href="/distribute/essentials/index.html#quality-guidelines">
<span class="dac-sprite dac-auto-chevron"></span>
Quality guidelines
</a></li>
<li class="dac-section-link"><a href="/distribute/essentials/index.html#tools-and-resources">
<span class="dac-sprite dac-auto-chevron"></span>
Resources &amp; tools
</a></li>
<li class="dac-section-link"><a href="/distribute/stories/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Developer stories
</a></li>
<li class="dac-section-link"><a href="/distribute/users/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Get users
</a></li>
<li class="dac-section-link"><a href="/distribute/engage/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Engage &amp; retain
</a></li>
<li class="dac-section-link"><a href="/distribute/monetize/index.html">
<span class="dac-sprite dac-auto-chevron"></span>
Monetize
</a></li>
</ul>
</div></section>
<section class="dac-section dac-light"><div class="wrap">
<div class="cols"><div class="col-10of12 col-push-1of12">
<h1 class="dac-section-title">More from Google</h1>
<div class="dac-section-subtitle">Reach and retain a valuable audience and grow your revenue.</div>
</div></div>
<div class="resource-widget resource-flow-layout col-16"
data-query="collection:distribute/landing/more"
data-cardSizes="6x6"></div>
<ul class="dac-section-links">
<li class="dac-section-link"><a href="https://developers.google.com/">
<span class="dac-sprite dac-auto-chevron"></span>
More on Google Developers
</a></li>
</ul>
</div></section>

2
docs/html/distribute/monetize/ads.jd
View File

@@ -1,7 +1,7 @@
page.title=Monetize with Ads page.title=Monetize with Ads
page.metaDescription=Ads are a quick and easy way to incorporate a monetization option into both your free and paid apps. page.metaDescription=Ads are a quick and easy way to incorporate a monetization option into both your free and paid apps.
page.tags="monetizing", "free", "freemium", "ads" page.tags="monetizing", "free", "freemium", "ads"
page.image=/distribute/images/advertising.png page.image=/distribute/images/advertising.jpg
@jd:body @jd:body

12
docs/html/distribute/tools/promote/device-art.jd
View File

@@ -16,12 +16,12 @@ feature image or screenshots for your Google Play app listing.</p>
<div class="supported-browser"> <div class="supported-browser">
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Step 1</h4> <h4>Step 1</h4>
<p>Drag a screenshot from your desktop onto a device to the right.</p> <p>Drag a screenshot from your desktop onto a device to the right.</p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<ul class="device-list primary"></ul> <ul class="device-list primary"></ul>
<a href="#" id="archive-expando">Older devices</a> <a href="#" id="archive-expando">Older devices</a>
<ul class="device-list archive"></ul> <ul class="device-list archive"></ul>
@@ -30,8 +30,8 @@ feature image or screenshots for your Google Play app listing.</p>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-3"> <div class="col-3">
<h4>Step 2</h4> <h4>Step 2</h4>
<p>Customize the generated image and drag it to your desktop to save.</p> <p>Customize the generated image and drag it to your desktop to save.</p>
<p id="frame-customizations"> <p id="frame-customizations">
@@ -48,7 +48,7 @@ feature image or screenshots for your Google Play app listing.</p>
<label for="output-round">Round</label><br><br> <label for="output-round">Round</label><br><br>
</p> </p>
</div> </div>
<div class="layout-content-col span-10"> <div class="col-10">
<!-- position:relative fixes an issue where dragging an image out of a inline-block container <!-- position:relative fixes an issue where dragging an image out of a inline-block container
produced no drag feedback image in Chrome 28. --> produced no drag feedback image in Chrome 28. -->
<div id="output" style="position:relative">No input image.</div> <div id="output" style="position:relative">No input image.</div>

2
docs/html/distribute/users/promote-with-ads.jd
View File

@@ -1,6 +1,6 @@
page.title=Promote Your App with Ads page.title=Promote Your App with Ads
page.metaDescription=Promote your app through AdMob, AdWords, and YouTube to find new users at the right moment. page.metaDescription=Promote your app through AdMob, AdWords, and YouTube to find new users at the right moment.
page.image=/images/gp-ads-console.jpg page.image=images/cards/adwords_2x.jpg
page.tags="users, ads, analytics" page.tags="users, ads, analytics"
@jd:body @jd:body

2
docs/html/google/index.jd
View File

@@ -16,7 +16,7 @@ div.cell-icon img {
} }
</style> </style>
<div class="landing-banner"> <div class="landing-banner cols">
<div class="col-6" style="min-height:0"> <div class="col-6" style="min-height:0">
<img src="{@docRoot}images/google/google-services.png" alt="" width="340" height="193" /> <img src="{@docRoot}images/google/google-services.png" alt="" width="340" height="193" />

14
docs/html/google/play-services/index.jd
View File

@@ -24,8 +24,8 @@ page.metaDescription=With Google Play services, your app can take advantage of t
</div> </div>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Google Technology</h4> <h4>Google Technology</h4>
<p>Google Play services provides you with easy access to Google services and is <p>Google Play services provides you with easy access to Google services and is
@@ -34,7 +34,7 @@ provided for each service that let you implement the functionality you want
easier and faster.</p> easier and faster.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Standard Authorization</h4> <h4>Standard Authorization</h4>
<p>All products in Google Play services share a common authorization API <p>All products in Google Play services share a common authorization API
@@ -43,7 +43,7 @@ easier and faster.</p>
to Google services.</p> to Google services.</p>
</div> </div>
<div class="layout-content-col span-4"> <div class="col-4">
<h4>Automatic Updates</h4> <h4>Automatic Updates</h4>
<p>Devices running Android 2.3 or higher that have the Google Play Store <p>Devices running Android 2.3 or higher that have the Google Play Store
@@ -666,8 +666,8 @@ announcement <a href="http://android-developers.blogspot.com/2014/03/google-play
<div class="vspace size-2">&nbsp;</div> <div class="vspace size-2">&nbsp;</div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4 id="apk">The Google Play services APK</h4> <h4 id="apk">The Google Play services APK</h4>
<p> <p>
The Google Play services APK contains the individual Google services and runs The Google Play services APK contains the individual Google services and runs
@@ -687,7 +687,7 @@ announcement <a href="http://android-developers.blogspot.com/2014/03/google-play
</p> </p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<img src="/images/play-services-diagram.png" /> <img src="/images/play-services-diagram.png" />
<p class="img-caption"><em>The Google Play services APK on user devices receives regular updates <p class="img-caption"><em>The Google Play services APK on user devices receives regular updates
for new APIs, features, and bug fixes.</em></p> for new APIs, features, and bug fixes.</em></p>

6
docs/html/google/play-services/location.jd
View File

@@ -30,8 +30,8 @@ developer guide.
</div> </div>
<div class="landing-docs"> <div class="landing-docs">
<h3 style="clear:left">Key Developer Features</h3> <h3 style="clear:left">Key Developer Features</h3>
<div class="layout-content-row normal-links"> <div class="cols normal-links">
<div class="layout-content-col span-6"> <div class="col-6">
@@ -74,7 +74,7 @@ developer guide.
</ul> </ul>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4 style="font-weight:bold">Places API</h4> <h4 style="font-weight:bold">Places API</h4>

14
docs/html/google/play/dist.jd
View File

@@ -9,8 +9,8 @@ page.title=Google Play Distribution
<div class="vspace size-1"> <div class="vspace size-1">
&nbsp; &nbsp;
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4> <h4>
Device Filtering Device Filtering
</h4> </h4>
@@ -20,7 +20,7 @@ page.title=Google Play Distribution
</p><p><a href="{@docRoot}google/play/filters.html">Learn more &raquo;</a></p> </p><p><a href="{@docRoot}google/play/filters.html">Learn more &raquo;</a></p>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4> <h4>
Multiple APK Support Multiple APK Support
</h4> </h4>
@@ -30,8 +30,8 @@ page.title=Google Play Distribution
</p><p><a href="{@docRoot}google/play/publishing/multiple-apks.html">Learn more &raquo;</a></p> </p><p><a href="{@docRoot}google/play/publishing/multiple-apks.html">Learn more &raquo;</a></p>
</div> </div>
<div class="layout-content-row"> <div class="cols">
<div class="layout-content-col span-6"> <div class="col-6">
<h4> <h4>
APK Expansion files APK Expansion files
</h4> </h4>
@@ -42,14 +42,14 @@ page.title=Google Play Distribution
</p><a href="{@docRoot}google/play/expansion-files.html">Learn more &raquo;</a> </p><a href="{@docRoot}google/play/expansion-files.html">Learn more &raquo;</a>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4> <h4>
Application Licensing Application Licensing
</h4> </h4>
<p>Protect your revenue streams and integrate policies for usage into your app. <p>Protect your revenue streams and integrate policies for usage into your app.
</p><a href="{@docRoot}google/play/licensing/index.html">Learn more &raquo;</a> </p><a href="{@docRoot}google/play/licensing/index.html">Learn more &raquo;</a>
</div> </div>
<div class="layout-content-col span-6"> <div class="col-6">
<h4> <h4>
Google Play Developer API Google Play Developer API
</h4> </h4>

BIN
docs/html/images/cards/adwords_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
docs/html/images/cards/analytics-mobile_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
docs/html/images/cards/android-auto_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
docs/html/images/cards/android-devices_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
docs/html/images/cards/android-studio_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/html/images/cards/android-tv_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
docs/html/images/cards/android-wear-apps_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
docs/html/images/cards/android-wear-materials_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
docs/html/images/cards/android-wear_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
docs/html/images/cards/cloud-platform_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
docs/html/images/cards/design-creative-vision_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
docs/html/images/cards/design-material-for-android_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
docs/html/images/cards/design-new-in-android_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/html/images/cards/design-pure-android_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/html/images/cards/dev-console_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
docs/html/images/cards/google-play_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
docs/html/images/cards/google-search_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/html/images/cards/google-sign-in_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
docs/html/images/cards/material-animation_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/html/images/cards/material-color-palette_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/html/images/cards/material-components_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/html/images/cards/material-layout-template_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
docs/html/images/cards/material-layout_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/html/images/cards/material-patterns_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
docs/html/images/cards/material-sticker-sheet_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
docs/html/images/cards/material-style_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
docs/html/images/cards/material-typography_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/html/images/cards/material-usability_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
docs/html/images/cards/material_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
docs/html/images/cards/program-edu_2x.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
docs/html/images/cards/samples-new_2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
docs/html/images/develop/hero-android-studio-on-device.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
docs/html/images/distribute/google-play-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
docs/html/images/distribute/hero-family.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

Some files were not shown because too many files have changed in this diff Show More