diff options
Diffstat (limited to 'docs/html/design')
56 files changed, 852 insertions, 274 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd index 600ec6c..7957ef8 100644 --- a/docs/html/design/building-blocks/buttons.jd +++ b/docs/html/design/building-blocks/buttons.jd @@ -2,6 +2,13 @@ page.title=Buttons page.tags="button","input" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/button.html"> + <div> + <h3>Developer Docs</h3> + <p>Buttons</p> + </div> +</a> + <p>A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. Android supports two different types of buttons: <em>basic buttons</em> and <em>borderless buttons</em>. Both can contain text labels and/or images.</p> @@ -38,9 +45,3 @@ than basic buttons and integrate nicely with other content.</p> <img src="{@docRoot}design/media/buttons_borderless.png"> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build and customize buttons in your app, - see the <a href="{@docRoot}guide/topics/ui/controls/button.html">Buttons</a> API guide.</p> -</div> diff --git a/docs/html/design/building-blocks/dialogs.jd b/docs/html/design/building-blocks/dialogs.jd index 2f6ca27..f4bb87e 100644 --- a/docs/html/design/building-blocks/dialogs.jd +++ b/docs/html/design/building-blocks/dialogs.jd @@ -2,6 +2,13 @@ page.title=Dialogs page.tags="dialog","alert","popup","toast" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/dialogs.html"> + <div> + <h3>Developer Docs</h3> + <p>Dialogs</p> + </div> +</a> + <p>Dialogs prompt the user for decisions or additional information required by the app to continue a task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the user to adjust settings or enter text.</p> @@ -123,11 +130,6 @@ available based on the title and the text of the action buttons.</p> </div> </div> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build dialogs in your app, - see the <a href="{@docRoot}guide/topics/ui/dialogs.html">Dialogs</a> API guide.</p> -</div> <h2 id="popups">Popups</h2> @@ -144,12 +146,19 @@ advances the workflow, and simply touching outside the popup dismisses it.</p> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <div class="vspace size-6"></div> + <div class="vspace size-3"></div> <p>Toasts provide lightweight feedback about an operation in a small popup. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout.</p> +<a class="notice-developers left" href="{@docRoot}guide/topics/ui/notifiers/toasts.html"> + <div> + <h3>Developer Docs</h3> + <p>Toasts</p> + </div> +</a> + </div> <div class="layout-content-col span-7"> @@ -158,9 +167,3 @@ continue editing later. Toasts automatically disappear after a timeout.</p> </div> </div> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create toasts, - see the <a href="{@docRoot}guide/topics/ui/notifiers/toasts.html">Toasts</a> API guide.</p> -</div> diff --git a/docs/html/design/building-blocks/grid-lists.jd b/docs/html/design/building-blocks/grid-lists.jd index 8c82ba9..1a09ef5 100644 --- a/docs/html/design/building-blocks/grid-lists.jd +++ b/docs/html/design/building-blocks/grid-lists.jd @@ -4,6 +4,13 @@ page.tags="gridview","layout","listview" <img src="{@docRoot}design/media/gridview_overview.png"> +<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/gridview.html"> + <div> + <h3>Developer Docs</h3> + <p>Grid View</p> + </div> +</a> + <p>Grid lists are an alternative to standard list views. They are best suited for showing data sets that represent themselves through images. In contrast to simple lists, grid lists may scroll either vertically or horizontally.</p> diff --git a/docs/html/design/building-blocks/lists.jd b/docs/html/design/building-blocks/lists.jd index 16927a6..5514824 100644 --- a/docs/html/design/building-blocks/lists.jd +++ b/docs/html/design/building-blocks/lists.jd @@ -2,6 +2,13 @@ page.title=Lists page.tags="listview","layout" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/layout/listview.html"> + <div> + <h3>Developer Docs</h3> + <p>List View</p> + </div> +</a> + <p>Lists present multiple line items in a vertical arrangement. They can be used for data selection as well as drilldown navigation.</p> diff --git a/docs/html/design/building-blocks/pickers.jd b/docs/html/design/building-blocks/pickers.jd index 47363d0..6dd72ba 100644 --- a/docs/html/design/building-blocks/pickers.jd +++ b/docs/html/design/building-blocks/pickers.jd @@ -2,6 +2,13 @@ page.title=Pickers page.tags="datepicker","timepicker" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/pickers.html"> + <div> + <h3>Developer Docs</h3> + <p>Pickers</p> + </div> +</a> + <p>Pickers provide a simple way to select a single value from a set. In addition to touching the up/down arrow buttons, it's possible to set the desired value from the keyboard or via a swipe gesture.</p> @@ -31,9 +38,3 @@ correctly. The format of a time and date picker adjusts automatically to the loc <img src="{@docRoot}design/media/picker_datetime.png"> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create date and time pickers, - see the <a href="{@docRoot}guide/topics/ui/controls/pickers.html">Pickers</a> API guide.</p> -</div> diff --git a/docs/html/design/building-blocks/spinners.jd b/docs/html/design/building-blocks/spinners.jd index 3550b0c..c00b639 100644 --- a/docs/html/design/building-blocks/spinners.jd +++ b/docs/html/design/building-blocks/spinners.jd @@ -2,6 +2,13 @@ page.title=Spinners page.tags="spinner","dropdown" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/spinner.html"> + <div> + <h3>Developer Docs</h3> + <p>Spinners</p> + </div> +</a> + <p>Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.</p> @@ -37,9 +44,3 @@ tabs.</p> Spinners in the Holo Dark and Holo Light themes, in various states. </div> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create spinners, - see the <a href="{@docRoot}guide/topics/ui/controls/spinner.html">Spinners</a> API guide.</p> -</div> diff --git a/docs/html/design/building-blocks/switches.jd b/docs/html/design/building-blocks/switches.jd index 0b195b9..74cab5a 100644 --- a/docs/html/design/building-blocks/switches.jd +++ b/docs/html/design/building-blocks/switches.jd @@ -4,31 +4,53 @@ page.tags="switch","checkbox","radiobutton","button" <p>Switches allow the user to select options. There are three kinds of switches: checkboxes, radio buttons, and on/off switches.</p> + + + <h2 id="checkboxes">Checkboxes</h2> +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/checkbox.html"> + <div> + <h3>Developer Docs</h3> + <p>Checkboxes</p> + </div> +</a> + <p>Checkboxes allow the user to select multiple options from a set. Avoid using a single checkbox to turn an option off or on. Instead, use an on/off switch.</p> <img src="{@docRoot}design/media/switches_checkboxes.png"> + + <h2 id="radio-buttons">Radio Buttons</h2> +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/radiobutton.html"> + <div> + <h3>Developer Docs</h3> + <p>Radio Buttons</p> + </div> +</a> + <p>Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side. Otherwise, consider a spinner, which uses less space.</p> <img src="{@docRoot}design/media/switches_radios.png"> + + <h2 id="switches">On/off Switches</h2> +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/togglebutton.html"> + <div> + <h3>Developer Docs</h3> + <p>Toggle Buttons</p> + </div> +</a> + <p>On/off switches toggle the state of a single settings option.</p> <img src="{@docRoot}design/media/switches_switches.png"> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create these different switches, - see the <a href="{@docRoot}guide/topics/ui/controls/checkbox.html">Checkboxes</a>, - <a href="{@docRoot}guide/topics/ui/controls/radiobutton.html">Radio Buttons</a>, or - <a href="{@docRoot}guide/topics/ui/controls/togglebutton.html">Toggle Buttons</a> API guides.</p> -</div> + diff --git a/docs/html/design/building-blocks/tabs.jd b/docs/html/design/building-blocks/tabs.jd index 79cc9c7..4778400 100644 --- a/docs/html/design/building-blocks/tabs.jd +++ b/docs/html/design/building-blocks/tabs.jd @@ -4,6 +4,13 @@ page.tags="tabs","actionbar","navigation","viewpager" <img src="{@docRoot}design/media/tabs_overview.png"> +<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html"> + <div> + <h3>Developer Docs</h3> + <p>Creating Swipe Views with Tabs</p> + </div> +</a> + <p>Tabs in the action bar make it easy to explore and switch between different views or functional aspects of your app, or to browse categorized data sets.</p> @@ -59,9 +66,3 @@ permits fast view switching even on narrower screens.</p> <img src="{@docRoot}design/media/tabs_stacked.png"> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create tabs, - see the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API guide.</p> -</div> diff --git a/docs/html/design/building-blocks/text-fields.jd b/docs/html/design/building-blocks/text-fields.jd index 82321f0..383531b 100644 --- a/docs/html/design/building-blocks/text-fields.jd +++ b/docs/html/design/building-blocks/text-fields.jd @@ -2,6 +2,13 @@ page.title=Text Fields page.tags="text","edittext","input" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/controls/text.html"> + <div> + <h3>Developer Docs</h3> + <p>Text Fields</p> + </div> +</a> + <p>Text fields allow the user to type text into your app. They can be either single line or multi-line. Touching a text field places the cursor and automatically displays the keyboard. In addition to typing, text fields allow for a variety of other activities, such as text selection (cut, copy, @@ -70,10 +77,3 @@ Selection mode includes:</p> </div> </div> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create text fields, provide auto-complete suggestions, - and specify the input mode, - see the <a href="{@docRoot}guide/topics/ui/controls/text.html">Text Fields</a> API guide.</p> -</div> diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs index c3020e1..ff465bf 100644 --- a/docs/html/design/design_toc.cs +++ b/docs/html/design/design_toc.cs @@ -31,6 +31,7 @@ <li><a href="<?cs var:toroot ?>design/patterns/app-structure.html">App Structure</a></li> <li><a href="<?cs var:toroot ?>design/patterns/navigation.html">Navigation</a></li> <li><a href="<?cs var:toroot ?>design/patterns/actionbar.html">Action Bar</a></li> + <li><a href="<?cs var:toroot ?>design/patterns/navigation-drawer.html">Navigation Drawer</a></li> <li><a href="<?cs var:toroot ?>design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> <li><a href="<?cs var:toroot ?>design/patterns/swipe-views.html">Swipe Views</a></li> <li><a href="<?cs var:toroot ?>design/patterns/selection.html">Selection</a></li> diff --git a/docs/html/design/downloads/index.jd b/docs/html/design/downloads/index.jd index 00f4467..ab6bb1b 100644 --- a/docs/html/design/downloads/index.jd +++ b/docs/html/design/downloads/index.jd @@ -1,5 +1,13 @@ page.title=Downloads @jd:body +<div id="butterbar-wrapper" > + <div id="butterbar" > + <div id="butterbar-message"> +<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/1EHLPGqhbxj2HungHRRN4_0K9TGpc-Izy-u46vBDgS8Q/viewform"> + Take the Android Developer Survey</a> + </div> + </div> +</div> <div class="layout-content-row"> <div class="layout-content-col span-9"> diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd index 1e6b40c..d4ef07f 100644 --- a/docs/html/design/index.jd +++ b/docs/html/design/index.jd @@ -2,6 +2,14 @@ page.title=Design header.hide=1 footer.hide=1 @jd:body +<div id="butterbar-wrapper" > + <div id="butterbar" > + <div id="butterbar-message"> +<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/1EHLPGqhbxj2HungHRRN4_0K9TGpc-Izy-u46vBDgS8Q/viewform"> + Take the Android Developer Survey</a> + </div> + </div> +</div> <style> #landing-graphic-container { diff --git a/docs/html/design/media/actionbar_drawer.png b/docs/html/design/media/actionbar_drawer.png Binary files differdeleted file mode 100644 index 95e04f5..0000000 --- a/docs/html/design/media/actionbar_drawer.png +++ /dev/null diff --git a/docs/html/design/media/action_bar_pattern_default_tabs.png b/docs/html/design/media/app_structure_default_tabs.png Binary files differindex a6d0d90..a6d0d90 100644 --- a/docs/html/design/media/action_bar_pattern_default_tabs.png +++ b/docs/html/design/media/app_structure_default_tabs.png diff --git a/docs/html/design/media/app_structure_drawer.png b/docs/html/design/media/app_structure_drawer.png Binary files differnew file mode 100644 index 0000000..560e834 --- /dev/null +++ b/docs/html/design/media/app_structure_drawer.png diff --git a/docs/html/design/media/action_bar_pattern_spinner.png b/docs/html/design/media/app_structure_spinner.png Binary files differindex 9aff412..9aff412 100644 --- a/docs/html/design/media/action_bar_pattern_spinner.png +++ b/docs/html/design/media/app_structure_spinner.png diff --git a/docs/html/design/media/devices_displays_density.png b/docs/html/design/media/devices_displays_density.png Binary files differindex 7ddad31..4e3cbf6 100644 --- a/docs/html/design/media/devices_displays_density.png +++ b/docs/html/design/media/devices_displays_density.png diff --git a/docs/html/design/media/devices_displays_density@2x.png b/docs/html/design/media/devices_displays_density@2x.png Binary files differnew file mode 100644 index 0000000..79a46b0 --- /dev/null +++ b/docs/html/design/media/devices_displays_density@2x.png diff --git a/docs/html/design/media/navigation_between_apps_back.png b/docs/html/design/media/navigation_between_apps_back.png Binary files differindex d5cd979..d5cd979 100755..100644 --- a/docs/html/design/media/navigation_between_apps_back.png +++ b/docs/html/design/media/navigation_between_apps_back.png diff --git a/docs/html/design/media/navigation_between_apps_inward.png b/docs/html/design/media/navigation_between_apps_inward.png Binary files differindex 7394b1c..7394b1c 100755..100644 --- a/docs/html/design/media/navigation_between_apps_inward.png +++ b/docs/html/design/media/navigation_between_apps_inward.png diff --git a/docs/html/design/media/navigation_between_apps_up.png b/docs/html/design/media/navigation_between_apps_up.png Binary files differindex 99c3112..99c3112 100755..100644 --- a/docs/html/design/media/navigation_between_apps_up.png +++ b/docs/html/design/media/navigation_between_apps_up.png diff --git a/docs/html/design/media/navigation_between_siblings_market1.png b/docs/html/design/media/navigation_between_siblings_market1.png Binary files differindex b12a432..b12a432 100755..100644 --- a/docs/html/design/media/navigation_between_siblings_market1.png +++ b/docs/html/design/media/navigation_between_siblings_market1.png diff --git a/docs/html/design/media/navigation_between_siblings_market2.png b/docs/html/design/media/navigation_between_siblings_market2.png Binary files differindex a09d9d7..a09d9d7 100755..100644 --- a/docs/html/design/media/navigation_between_siblings_market2.png +++ b/docs/html/design/media/navigation_between_siblings_market2.png diff --git a/docs/html/design/media/navigation_drawer_CAB.png b/docs/html/design/media/navigation_drawer_CAB.png Binary files differnew file mode 100644 index 0000000..9d4a5b5 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_CAB.png diff --git a/docs/html/design/media/navigation_drawer_collapse.png b/docs/html/design/media/navigation_drawer_collapse.png Binary files differnew file mode 100644 index 0000000..7ca56da --- /dev/null +++ b/docs/html/design/media/navigation_drawer_collapse.png diff --git a/docs/html/design/media/navigation_drawer_cross_nav.png b/docs/html/design/media/navigation_drawer_cross_nav.png Binary files differnew file mode 100644 index 0000000..bf8d238 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_cross_nav.png diff --git a/docs/html/design/media/navigation_drawer_first_run.png b/docs/html/design/media/navigation_drawer_first_run.png Binary files differnew file mode 100644 index 0000000..728f29f --- /dev/null +++ b/docs/html/design/media/navigation_drawer_first_run.png diff --git a/docs/html/design/media/navigation_drawer_holo_dark_light.png b/docs/html/design/media/navigation_drawer_holo_dark_light.png Binary files differnew file mode 100644 index 0000000..dcb91ab --- /dev/null +++ b/docs/html/design/media/navigation_drawer_holo_dark_light.png diff --git a/docs/html/design/media/navigation_drawer_indicator_big.png b/docs/html/design/media/navigation_drawer_indicator_big.png Binary files differnew file mode 100644 index 0000000..5faa93b --- /dev/null +++ b/docs/html/design/media/navigation_drawer_indicator_big.png diff --git a/docs/html/design/media/navigation_drawer_layout.png b/docs/html/design/media/navigation_drawer_layout.png Binary files differnew file mode 100644 index 0000000..e59b37c --- /dev/null +++ b/docs/html/design/media/navigation_drawer_layout.png diff --git a/docs/html/design/media/navigation_drawer_nav_and_actions.png b/docs/html/design/media/navigation_drawer_nav_and_actions.png Binary files differnew file mode 100644 index 0000000..0df04e9 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_nav_and_actions.png diff --git a/docs/html/design/media/navigation_drawer_navigation_hubs.png b/docs/html/design/media/navigation_drawer_navigation_hubs.png Binary files differnew file mode 100644 index 0000000..9f4b244 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_navigation_hubs.png diff --git a/docs/html/design/media/navigation_drawer_open_from_lower.png b/docs/html/design/media/navigation_drawer_open_from_lower.png Binary files differnew file mode 100644 index 0000000..ec5f03d --- /dev/null +++ b/docs/html/design/media/navigation_drawer_open_from_lower.png diff --git a/docs/html/design/media/navigation_drawer_open_overflow.png b/docs/html/design/media/navigation_drawer_open_overflow.png Binary files differnew file mode 100644 index 0000000..112a414 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_open_overflow.png diff --git a/docs/html/design/media/navigation_drawer_overview.png b/docs/html/design/media/navigation_drawer_overview.png Binary files differnew file mode 100644 index 0000000..42d21fa --- /dev/null +++ b/docs/html/design/media/navigation_drawer_overview.png diff --git a/docs/html/design/media/navigation_drawer_peek.png b/docs/html/design/media/navigation_drawer_peek.png Binary files differnew file mode 100644 index 0000000..c59881e --- /dev/null +++ b/docs/html/design/media/navigation_drawer_peek.png diff --git a/docs/html/design/media/navigation_drawer_quick_to_top.png b/docs/html/design/media/navigation_drawer_quick_to_top.png Binary files differnew file mode 100644 index 0000000..0e44915 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_quick_to_top.png diff --git a/docs/html/design/media/navigation_drawer_reset_backstack.png b/docs/html/design/media/navigation_drawer_reset_backstack.png Binary files differnew file mode 100644 index 0000000..c0c2f61 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_reset_backstack.png diff --git a/docs/html/design/media/navigation_drawer_settings_help.png b/docs/html/design/media/navigation_drawer_settings_help.png Binary files differnew file mode 100644 index 0000000..ed29971 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_settings_help.png diff --git a/docs/html/design/media/navigation_drawer_titles_icons.png b/docs/html/design/media/navigation_drawer_titles_icons.png Binary files differnew file mode 100644 index 0000000..b726c9b --- /dev/null +++ b/docs/html/design/media/navigation_drawer_titles_icons.png diff --git a/docs/html/design/media/navigation_drawer_top_out.png b/docs/html/design/media/navigation_drawer_top_out.png Binary files differnew file mode 100644 index 0000000..ad92b77 --- /dev/null +++ b/docs/html/design/media/navigation_drawer_top_out.png diff --git a/docs/html/design/patterns/accessibility.jd b/docs/html/design/patterns/accessibility.jd index 5f46082..16a39d6 100644 --- a/docs/html/design/patterns/accessibility.jd +++ b/docs/html/design/patterns/accessibility.jd @@ -2,6 +2,13 @@ page.title=Accessibility page.tags="accessibility","navigation","input" @jd:body +<a class="notice-developers" href="{@docRoot}training/accessibility/index.html"> + <div> + <h3>Developer Docs</h3> + <p>Implementing Accessibility</p> + </div> +</a> + <p>One of Android's missions is to organize the world's information and make it universally accessible and useful. Accessibility is the measure of how successfully a product can be used by people with varying abilities. Our mission applies to all users-including people with disabilities such as visual impairment, color deficiency, hearing loss, and limited dexterity.</p> <p><a href="https://www.google.com/#hl=en&q=universal+design&fp=1">Universal design</a> is the practice of making products that are inherently accessible to all users, regardless of ability. The Android design patterns were created in accordance with universal design principles, and following them will help your app meet basic usability standards. Adhering to universal design and enabling Android's accessibility tools will make your app as accessible as possible.</p> <p>Robust support for accessibility will increase your app's user base. It may also be required for adoption by some organizations.</p> @@ -71,13 +78,6 @@ page.tags="accessibility","navigation","input" <p>Turn on the TalkBack service in <strong>Settings > Accessibility</strong> and navigate your application using directional controls or eyes-free navigation.</p> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to properly implement accessibility in your app, see the - <a href="{@docRoot}guide/topics/ui/accessibility/index.html">Accessibility</a> - API guide.</p> -</div> - <h2>Checklist</h2> <ul> diff --git a/docs/html/design/patterns/actionbar.jd b/docs/html/design/patterns/actionbar.jd index da9c3c3..6020034 100644 --- a/docs/html/design/patterns/actionbar.jd +++ b/docs/html/design/patterns/actionbar.jd @@ -4,6 +4,14 @@ page.tags="actionbar","navigation" <img src="{@docRoot}design/media/action_bar_pattern_overview.png"> +<a class="notice-developers" href="{@docRoot}guide/topics/ui/actionbar.html"> + <div> + <h3>Developer Docs</h3> + <p>Action Bar</p> + </div> +</a> + + <p>The <em>action bar</em> is a dedicated piece of real estate at the top of each screen that is generally persistent throughout the app.</p> <p><strong>It provides several key functions</strong>:</p> <ul> @@ -48,7 +56,7 @@ Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navig <p> If your app displays data in different views, this segment of the action bar allows users to switch -views. Examples of view-switching controls are drop-down menus or tab controls. +views. Examples of view-switching controls are drop-down menus or tab controls. For more information on view-switching, see the <a href="{@docRoot}design/patterns/app-structure.html">App Structure</a> pattern. </p> <p> @@ -115,132 +123,11 @@ the top bar.</p> </div> </div> -<h2 id="contextual">Contextual Action Bars</h2> - -<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the -duration of a particular sub-task. CABs are most typically used for tasks that involve acting on -selected data or text.</p> - -<img src="{@docRoot}design/media/action_bar_cab.png"> -<div class="figure-caption"> - Contextual action bar shown in Browser and Gmail -</div> - -<p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p> -<p><strong>From here the user can</strong>:</p> -<ul> -<li>Select additional elements by touching them.</li> -<li>Trigger an action from the CAB that applies to all selected data items. The CAB then - automatically dismisses itself.</li> -<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes - the CAB along with all selection highlights.</li> -</ul> -<p>Use CABs whenever you allow the user to select data via long press. You can control the action -content of a CAB in order to insert the actions you would like the user to be able to perform.</p> -<p>For more information, refer to the <a href="{@docRoot}design/patterns/selection.html">Selection -pattern</a>.</p> - -<h2 id="elements">View Controls</h2> -<p>If your app displays data in different views, the action bar has three different controls to allow users to switch between them: tabs, spinners, and drawers.</p> - -<h4>Tabs</h4> -<p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Tabs may be fixed, where all tabs are simultaneously displayed, or may scroll, allowing a larger number of views to be presented.</p> - -<img src="{@docRoot}design/media/tabs_youtube.png"> - -<p><strong>Use tabs if</strong>:</p> -<ul> -<li>You expect your app's users to switch views frequently.</li> -<li>You want the user to be highly aware of the alternate views.</li> -</ul> - -<h4>Fixed tabs</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> -<p><em>Fixed tabs</em> are always visible on the screen, and can't be moved out of the way like scrollable -tabs. Fixed tabs in the main action bar can move to the top bar when the screen orientation changes.</p> - -<p>Use fixed tabs to support quick changes between two or three app views. Fixed tabs should always allow the user to navigate between the views by swiping left or right on the content area.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png"> - <div class="figure-caption"> - Default fixed tabs shown in Holo Dark & Light. - </div> - - </div> -</div> - -<h4>Scrollable tabs</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> -<p><em>Scrollable tabs</em> always take up the entire width of the bar, with the currently active view item in the center, and therefore need to live in a dedicated bar. Scrollable tabs can themselves be scrolled horizontally to bring more tabs into view.</p> -<p>Use scrollable tabs if you have a large number of views or if you're unsure how many views will be displayed because your app inserts views dynamically (for example, open chats in a messaging app that the user can navigate between). Scrollable tabs should always allow the user to navigate between the views by swiping left or right on the content area as well as swiping the tabs themselves.</p> - - </div> - <div class="layout-content-col span-7"> - - <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.webm" type="video/webm"> - <source src="{@docRoot}design/media/tabs_scrolly.ogv" type="video/ogg"> - </video> - <div class="figure-caption"> - Scrolling tabs in the Play Store app. - <div class="video-instructions"> </div> - </div> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<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><strong>Use a spinner in the main action bar if</strong>:</p> -<ul> -<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> -<li>The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts).</li> -</ul> - - </div> - <div class="layout-content-col span-7"> - - <img src="{@docRoot}design/media/action_bar_pattern_spinner.png"> - <div class="figure-caption"> - Action bar spinner from Calendar application. - </div> - - </div> -</div> - -<h4>Drawers</h4> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> -<p>A <em>drawer</em> is a slide-out menu that allows users to switch between views of your app. It can be opened by touching the action bar's app icon (decorated with the Up caret.) Additionally, a drawer can be revealed by an edge swipe from the left of the screen, and dismissed by swiping from the right edge of the drawer. However, because many users will rely on Up navigation to open a drawer, it is only suitable for use at the topmost level of your app's hierarchy.</p> - -<p><strong>Open a drawer from the main action bar if</strong>:</p> -<ul> -<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> -<li>You want to provide direct navigation to a number of views within your app which don't have direct relationships between each other.</li> -</ul> - - </div> - <div class="layout-content-col span-7"> - <img src="{@docRoot}design/media/actionbar_drawer.png"> - </div> -</div> - -<h2>Action buttons</h2> +<h2>Action Buttons</h2> <p><em>Action buttons</em> on the action bar surface your app's most important activities. Think about which buttons will get used most often, and order them accordingly. Depending on available screen real estate, the system shows your most important actions as action buttons and moves the rest to the -action overflow. The action bar and the action overflow should only present actions to the user that -are available. If an action is unavailable in the current context, hide it. Do not show it as -disabled.</p> +action overflow. The action bar should show only those actions that are available to the user. If an action is unavailable in the current context, hide it. Do not show it as disabled.</p> <img src="{@docRoot}design/media/action_bar_pattern_action_icons.png"> <div class="figure-caption"> @@ -350,16 +237,32 @@ sharing options.</p> The Gallery app's share action provider with extended spinner for additional sharing options. </div> +<h2 id="contextual">Contextual Action Bars</h2> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build an action bar - see the <a href="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a> API guide. - For information about contextual action bars, read - <a href="{@docRoot}guide/topics/ui/menus.html#context-menu">Creating Contextual Menus</a>. - </p> +<p>A <em>contextual action bar (CAB)</em> is a temporary action bar that overlays the app's action bar for the +duration of a particular sub-task. CABs are most typically used for tasks that involve acting on +selected data or text.</p> + +<img src="{@docRoot}design/media/action_bar_cab.png"> +<div class="figure-caption"> + Contextual action bar in Browser and Gmail </div> +<p>The selection CAB appears after a long press on a selectable data item triggers selection mode.</p> +<p><strong>From here the user can</strong>:</p> +<ul> +<li>Select additional elements by touching them.</li> +<li>Trigger an action from the CAB that applies to all selected data items. The CAB then + automatically dismisses itself.</li> +<li>Dismiss the CAB via the navigation bar's Back button or the CAB's checkmark button. This removes + the CAB along with all selection highlights.</li> +</ul> +<p>Use CABs whenever you allow the user to select data via long press. You can control the action +content of a CAB in order to insert the actions you would like the user to be able to perform.</p> +<p>For more information, refer to the <a href="{@docRoot}design/patterns/selection.html">Selection +pattern</a>.</p> + + <h2 id="checklist">Action Bar Checklist</h2> @@ -374,4 +277,4 @@ actions exceeds the capacity of the main action bar, display them separately in <p>Sometimes it is important to display contextual information for your app that's always visible. Examples are the number of unread messages in a messaging inbox view or the Now Playing information in a music player. Carefully plan which important information you would like to display and -structure your action bars accordingly.</p> +structure your action bars accordingly.</p>
\ No newline at end of file diff --git a/docs/html/design/patterns/app-structure.jd b/docs/html/design/patterns/app-structure.jd index 1809ecd..0dc20e2 100644 --- a/docs/html/design/patterns/app-structure.jd +++ b/docs/html/design/patterns/app-structure.jd @@ -2,7 +2,7 @@ page.title=Application Structure page.tags="navigation","layout","tablet" @jd:body -<p>Apps come in many varieties that address very different needs. For example:</p> + <p>Apps come in many varieties that address very different needs. For example:</p> <ul> <li>Apps such as Calculator or Camera that are built around a single focused activity handled from a single screen</li> @@ -62,7 +62,7 @@ layouts that are visually engaging and appropriate for the data type and screen <img src="{@docRoot}design/media/app_structure_market.png"> <div class="figure-caption"> The Play Store app's start screen primarily allows navigation into the stores for Apps, Music, Books, - Movies and Games. It is also enriched with tailored recommendations and promotions that + Movies, and Games. It is also enriched with tailored recommendations and promotions that surface content of interest to the user. Search is readily available from the action bar. </div> @@ -72,23 +72,40 @@ layouts that are visually engaging and appropriate for the data type and screen <div class="layout-content-row"> <div class="layout-content-col span-5"> +<h4>Create an identity for your app</h4> +<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity +through its data, the way that data is arranged, and how people interact with it. Especially for +media-rich applications, try to create unique layouts that showcase your data and go beyond the +monotony of simple list views.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/app_structure_music_lndscp.png"> + <div class="figure-caption"> + The 3D carousel celebrates cover art and establishes a unique identity for the Music app. + Defaulting to the Recent view keeps the focus on music the user has been listening to lately. + </div> + + </div> +</div> + <h4>Set up action bars for navigation and actions</h4> -<p>All screens in your app should display action bars to provide consistent navigation and surface + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + + <p>All screens in your app should display action bars to provide consistent navigation and surface important actions.</p> -<p>At the top level, special considerations apply to the action bar:</p> -<ul> -<li>Use the action bar to display your app's icon or title.</li> -<li>If your top level consists of multiple views, or if switching between data from different user - accounts is a significant use case, make sure that it's easy for the user to navigate between them - by adding view controls to your action bar.</li> -<li>If your app allows people to create content, consider making the content accessible right from the + <p>At the top level, special considerations apply to the action bar:</p> + <ul> + <li>Use the action bar to display your app's icon or title.</li> + <li>If your top level consists of multiple views, make sure that it's easy for the user to navigate between them by adding view controls to your action bar.</li> + <li>If your app allows people to create content, consider making the content accessible right from the top level.</li> -<li>If your content is searchable, include the Search action in the action bar so people can cut + <li>If your content is searchable, include the Search action in the action bar so people can cut through the navigation hierarchy.</li> -</ul> - -<p>For more discussion, see the <a href="{@docRoot}design/patterns/actionbar.html">Action Bar</a> -design guide.</p> + </ul> </div> <div class="layout-content-col span-8"> @@ -103,27 +120,79 @@ design guide.</p> </div> </div> +<h2 id="top-level-switching">Top Level Switching With View Controls</h2> +<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> <div class="layout-content-row"> - <div class="layout-content-col span-5"> + <div class="layout-content-col span-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><strong>Use tabs if</strong>:</p> +<ul> +<li>You expect your app's users to switch views frequently.</li> +<li>You have a limited number of up to three top-level views.</li> +<li>You want the user to be highly aware of the alternate views.</li> +</ul> -<h4>Create an identity for your app</h4> -<p>Creating an identity for your app goes beyond the action bar. Your app communicates its identity -through its data, the way that data is arranged, and how people interact with it. Especially for -media-rich applications, try to create unique layouts that showcase your data and go beyond the -monotony of simple list views.</p> + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/app_structure_default_tabs.png"> + <div class="figure-caption"> + Default fixed tabs shown in Holo Dark & Light. + </div> </div> - <div class="layout-content-col span-8"> +</div> - <img src="{@docRoot}design/media/app_structure_music_lndscp.png"> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<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><strong>Use a spinner in the main action bar if</strong>:</p> +<ul> +<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> +<li>The user is switching between views of the same data set (for example: calendar events viewed by day, week, or month) or data sets of the same type (such as content for two different accounts).</li> +</ul> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/app_structure_spinner.png"> <div class="figure-caption"> - The 3D carousel celebrates cover art and establishes a unique identity for the Music app. - Defaulting to the Recent view keeps the focus on music the user has been listening to lately. + Action bar spinner from Calendar application. </div> </div> </div> +<h4>Navigation drawers</h4> +<div class="layout-content-row"> + <div class="layout-content-col span-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><strong>Use navigation drawers if</strong>:</p> +<ul> +<li>You don't want to give up the vertical screen real estate for a dedicated tab bar.</li> +<li>You have a large number of top-level views.</li> +<li>You want to provide direct access to screens on lower levels.</li> +<li>You want to provide quick navigation to views which don't have direct relationships between each other.</li> +<li>You have particularly deep navigation branches.</li> +</ul> + + </div> + <div class="layout-content-col span-7"> + <img src="{@docRoot}design/media/app_structure_drawer.png"> + <div class="figure-caption"> + Navigation drawer from the Shopper app. + </div> + </div> +</div> + +<h4>Don't mix and match</h4> +<p>After choosing the best top-level navigation for your app, don't mix and match patterns. For example, if you decide to use tabs for top-level switching, don't add a drawer, even if your navigation branches are deep. In this case, the navigation drawer would simply duplicate the information on the tabs, confusing your users.</p> + <h2 id="categories">Categories</h2> <p>Generally, the purpose of a deep, data-driven app is to navigate through organizational categories @@ -275,4 +344,4 @@ design guide.</p> <li> <p>Allow for quick navigation between detail items with swipe views.</p> </li> -</ul> +</ul>
\ No newline at end of file diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd index 3a56f52..5ca6d8b 100644 --- a/docs/html/design/patterns/compatibility.jd +++ b/docs/html/design/patterns/compatibility.jd @@ -2,6 +2,13 @@ page.title=Backwards Compatibility page.tags="support" @jd:body +<a class="notice-developers" href="{@docRoot}training/basics/supporting-devices/index.html"> + <div> + <h3>Developer Docs</h3> + <p>Supporting Different Devices</p> + </div> +</a> + <p>Significant changes in Android 3.0 included:</p> <ul> <li>Deprecation of navigation hardware keys (Back, Menu, Search, Home) in favor of handling navigation diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd index cbf29cb..06c8189 100644 --- a/docs/html/design/patterns/multi-pane-layouts.jd +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -2,6 +2,14 @@ page.title=Multi-pane Layouts page.tags="tablet","navigation","layout","fragment" @jd:body + +<a class="notice-developers" href="{@docRoot}training/basics/fragments/index.html"> + <div> + <h3>Developer Docs</h3> + <p>Building a Dynamic UI with Fragments</p> + </div> +</a> + <p>When writing an app for Android, keep in mind that Android devices come in many different screen sizes and types. Make sure that your app consistently provides a balanced and aesthetically pleasing layout by adjusting its content to varying screen sizes and orientations.</p> @@ -88,15 +96,6 @@ you can use to adjust the layout after orientation change while keeping function </div> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create multi-pane layouts, read - see the <a href="{@docRoot}training/basics/fragments/index.html">Building - a Dynamic UI with Fragments</a> and - <a href="{@docRoot}training/multiscreen/index.html">Designing for Multiple Screens</a>. - </p> -</div> - <h2 id="checklist">Checklist</h2> diff --git a/docs/html/design/patterns/navigation-drawer.jd b/docs/html/design/patterns/navigation-drawer.jd new file mode 100644 index 0000000..bf6609e --- /dev/null +++ b/docs/html/design/patterns/navigation-drawer.jd @@ -0,0 +1,338 @@ +page.title=Navigation Drawer +page.tags="DrawerLayout","SlidingPaneLayout" +@jd:body + + +<a class="notice-developers" href="{@docRoot}training/implementing-navigation/nav-drawer.html"> + <div> + <h3>Developer Docs</h3> + <p>Creating a Navigation Drawer</p> + </div> +</a> + + +<p>The navigation drawer is a panel that transitions in from the left edge of the screen and +displays the app’s main navigation options.</p> + + +<h4>Displaying the navigation drawer</h4> + +<p>The user can bring the navigation drawer onto the screen by swiping from the left edge of the +screen or by touching the application icon on the action bar.</p> + +<p>As the navigation drawer expands, it overlays the content but not the action bar. When the +drawer is fully extended, the action bar adjusts its content by replacing the current action +bar title with the app name and removing all actions that are contextual to the view underneath +the navigation drawer. The overflow menu with the standard action items for Settings and Help +remains visible.</p> + +<img src="{@docRoot}design/media/navigation_drawer_overview.png"> +<div class="figure-caption"> + The user can open the drawer panel by touching the navigation drawer indicator. +</div> + +<p>Because they are transient, navigation drawers make views less cluttered. You can also use +them at deeper levels in the navigation hierarchy, allowing users to switch to your app's most +important screens from anywhere in the app.</p> + +<img src="{@docRoot}design/media/navigation_drawer_open_from_lower.png"> +<div class="figure-caption"> + Open the drawer from anywhere in your app by swiping from the left edge of the screen. +</div> + + +<h4>Dismissing the navigation drawer</h4> + +<p> When the navigation drawer is expanded, the user can dismiss it in one of four ways: </p> +<ul> + <li>Touching the content outside the navigation drawer</li> + <li>Swiping to the left anywhere on the screen (including edge swipe from right)</li> + <li>Touching the app icon/title in the action bar</li> + <li>Pressing Back</li> +</ul> + + +<h2 id="WhenToUse"> When to Use the Navigation Drawer </h2> + +<p> The navigation drawer is not a general replacement for top-level navigation via spinners +or tabs. The structure of your app should guide your choice of which pattern to use for +top-level switching. For more information on top-level switching mechanisms, see the +<a href="{@docRoot}design/patterns/app-structure.html">Application Structure</a> design pattern.</p> +<p> Here are some examples of where navigation drawers work best:</p> + +<h4>More than 3 top-level views</h4> +<p> Navigation drawers are great for displaying a large number of navigation targets +concurrently. Use the navigation drawer if you have more than 3 unique top-level views. +If not, use fixed tabs for top-level organization to ease discovery and interaction.</p> + +<h4>Cross-navigation from lower levels</h4> +<p> If your app requires cross-navigating between lower-level screens, consider using the +navigation drawer. Because it is accessible from anywhere in the app, the drawer enables +efficient navigation from lower-level screens to other important places in your app.</p> + +<img src="{@docRoot}design/media/navigation_drawer_cross_nav.png"> +<div class="figure-caption"> + The navigation drawer makes cross-navigation at lower levels possible. +</div> + + +<h4>Deep navigation branches</h4> +<p> If you have particularly deep branches, navigating to the top-level of your app can become +repetitive and cumbersome with Up and Back alone. Since navigation drawers are accessible from +anywhere in the app, navigation up to the top level is faster and more efficient.</p> + +<img src="{@docRoot}design/media/navigation_drawer_quick_to_top.png"> +<div class="figure-caption"> + The navigation drawer allows for quick jumps to the top-level of your app, removing the need + for repetitive Back or Up sequences. +</div> + + +<h2 id="Hubs">Navigation Hubs</h2> + +<p>The navigation drawer is a reflection of your app’s structure and displays its major +navigation hubs. Think of navigation hubs as those places in your app that a user will want +to visit frequently or use as a jumping-off point to other parts of the app. +At a minimum, the navigation hubs are the top-level views, since they correspond to your app’s +major functional areas.</p> +<p> If your app’s structure is deep, you can add screens from lower levels that your users will +likely visit often and make those navigation hubs as well.</p> + +<img src="{@docRoot}design/media/navigation_drawer_navigation_hubs.png"> +<div class="figure-caption"> + The navigation drawer contains all of your app's navigation hubs. Include your top level + screens as well as important lower-level screens. +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + <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 + next to the application icon in the action bar. Touching the app icon causes the navigation + drawer to slide in from the left. </p> + <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> + </div> + <div class="layout-content-col span-5"> + <img src="{@docRoot}design/media/navigation_drawer_indicator_big.png"> + <div class="figure-caption"> + App icon with navigation drawer indicator. + </div> + </div> +</div> + + +<h2 id="Content">Content of the Navigation Drawer</h2> + +<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. + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + <h4>Titles, icons, and counters</h4> + <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 + targets, use titles to orient the user within the drawer.</p> + <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> + </div> + <div class="layout-content-col span-5"> + <img src="{@docRoot}design/media/navigation_drawer_titles_icons.png"> + <div class="figure-caption"> + Use titles and icons to organize your drawer. + </div> + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + <img src="{@docRoot}design/media/navigation_drawer_collapse.png"> + <div class="figure-caption"> + Collapsible navigation items are split. Use the left side for navigation and the right + to collapse and expand items. + </div> + </div> + <div class="layout-content-col span-5"> + <h4>Collapsible navigation items</h4> + <p>If you have many views with some subordinate to others, consider collapsing them into one + expandable item to conserve space. + The parent in the navigation drawer then turns into a split item. The left side allows + navigation to the parent item’s view, and the right side collapses or expands the list of + child items. </p> + <p> At launch, the initial state of the collapsible items is up to you. As a rule, all + top-level view entries of the navigation drawer should be visible. If you have many collapsible + items, consider collapsing all items to allow the user to see the top-level views in their + entirety.</p> + <p> When the user opens the drawer from a lower-level screen, expand the associated branch + of the top-level view to give a stronger sense of place and highlight navigation opportunities + close to the user’s current + location in the app.</p> + </div> +</div> + + +<h2 id="ActionBar">Navigation Drawers and Action Bars</h2> + +<p> When the user expands the navigation drawer, the task focus switches to selecting an item +from the drawer. Because the drawer does not overlay the action bar, users may not realize that +the items in the action bar do not pertain to the navigation drawer. </p> +<p> To reduce confusion, adjust the content of the action bar to the following, once the drawer +is fully expanded:</p> +<ul> + <li>App icon</li> + <li>App name</li> + <li>Remove actions from the action bar that are contextual to the underlying view (such as + Create new, Refresh). You may retain actions with global scope, such as “Search”.</li> + <li>Overflow menu with expected navigation targets, such as Settings and Help.</li> +</ul> + +<img src="{@docRoot}design/media/navigation_drawer_open_overflow.png"> +<div class="figure-caption"> + Clean up the action bar when the drawer is fully expanded. Remove actions that are not needed + and display your app's name in the title area. +</div> + +<h4>Actions</h4> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/navigation_drawer_nav_and_actions.png"> + <div class="figure-caption"> + Keep actions on the right side of the action bar and in the overflow + </div> + </div> + <div class="layout-content-col span-6"> + <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 + 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> + </div> +</div> +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + <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 + overflow.</p> + </div> + <div class="layout-content-col span-6"> + <img src="{@docRoot}design/media/navigation_drawer_settings_help.png"> + <div class="figure-caption"> + Keep Help and Settings in the overflow. + </div> + </div> +</div> + + +<h4>Contextual action bars</h4> +<p> Sometimes the user will be in a state where a contextual action bar (CAB) appears instead +of the app’s action bar. This typically happens when the user selects text or selects multiple +items after a press-and-hold gesture. While the CAB is visible, you should still allow the +user to open the navigation drawer using an edge swipe. However, replace the CAB with the +standard action bar while the navigation drawer is open. When the user dismisses the drawer, +re-display the CAB.</p> + +<img src="{@docRoot}design/media/navigation_drawer_CAB.png"> +<div class="figure-caption"> + Hide contextual action bars while the drawer is visible. +</div> + +<p>If the user navigates away from a view with selected content, deselect the content before +before navigating to the new view.</p> + + +<h2 id="Interaction">Interaction Details</h2> + +<h4>Introduce the user to the drawer at first use</h4> +<p> Upon first launch of your app, introduce the user to the navigation drawer by +automatically opening it. This ensures that users know about the navigation drawer and prompts +them to learn about the structure of your app by exploring its content. Continue showing the +drawer upon subsequent launches until the user actively expands the navigation drawer manually. +Once you know that the user understands how to open the drawer, launch the app with the +navigation drawer closed. </p> + +<img src="{@docRoot}design/media/navigation_drawer_first_run.png"> +<div class="figure-caption"> + At first use, show the navigation drawer automatically to help the user learn the + functionality and structure of your app. +</div> + +<h4>Give the user a quick peek</h4> +<p> If the user touches the very left edge of the screen (within 20 dp from the left), have the +drawer peek out as soon as the finger makes contact with the display. This promotes accidental +discovery and provides richer feedback. </p> + +<img src="{@docRoot}design/media/navigation_drawer_peek.png"> +<div class="figure-caption"> + The navigation drawer peeks out when the user touches the very left edge of the screen. +</div> + +<h4>Highlights</h4> +<p> When you open the navigation drawer from a screen that is represented inside the drawer, +highlight its entry in the drawer. Vice versa, if you open the drawer from a screen that is +not listed in the drawer, none of the items of the drawer should be highlighted.</p> + + +<h2 id="ImpactOnNav">Impact of Drawer on Overall App Navigation</h2> + +<p>The navigation drawer is an alternative to other top-level navigation patterns. To make apps +with navigation drawers work consistently with apps that use a tab or spinner pattern, remember +that all navigation requirements for system Back and Up apply.</p> +<p>Pay special attention to the following situations:</p> + +<h4>System Back at the top level of the app</h4> +<p>Touching System Back at the app’s top level never opens the navigation drawer. Instead, +System Back behaves according to the navigation rules for the top level, such as navigating +to the previous app within the task or navigating to the Home screen.</p> + +<img src="{@docRoot}design/media/navigation_drawer_top_out.png"> +<div class="figure-caption"> + System Back does not show the drawer, but behaves according to the navigation rules for + the top level. +</div> + +<h4>System Back after cross navigation to lower hierarchy levels</h4> +<p>If the user navigates to a lower hierarchy screen from the navigation drawer and the screen +has a direct parent, then the Back stack is reset and Back points to the target screen’s parent. +This Back behavior is the same as when a user navigates into an app from a notification.</p> + +<img src="{@docRoot}design/media/navigation_drawer_reset_backstack.png"> +<div class="figure-caption"> + Reset the Back stack if your lower-level navigation target has direct parents. +</div> + + +<h2 id="Style">Style</h2> + +<p>The width of the navigation drawer depends on the content you want to display, but should be +between a minimum of 240 dp and a maximum of 320 dp. The height of the individual line items +should not fall below 48 dp. See the layout guideline below for recommendations on padding and +spacing.</p> + +<img src="{@docRoot}design/media/navigation_drawer_layout.png"> +<div class="figure-caption"> + Layout guidelines for the navigation drawer. +</div> + + +<p>Pick the drawer background to best match your app’s theme. See the following examples +for a Holo light and a Holo dark themed drawer.</p> + +<img src="{@docRoot}design/media/navigation_drawer_holo_dark_light.png"> +<div class="figure-caption"> + Navigation drawers in Holo light and Holo dark themed apps. +</div> + + +<h2 id="Checklist">Navigation Drawer Checklist</h2> + +<p>Even if you already support a similar navigation drawer, update your drawer to this +pattern to make sure that:</p> +<ul> + <li>The action bar remains in place and adjusts its content.</li> + <li>Your navigation drawer overlays the content.</li> + <li>Any view represented in the drawer has a navigation drawer indicator in its action bar + that allows the drawer to be opened by touching the app icon.</li> + <li>You take advantage of the new visual drawer transition.</li> + <li>Any view not represented in the drawer maintains the traditional Up indicator in its action bar.</li> + <li>You stay in sync with the general navigation patterns for Up and Back.</li> +</ul> + diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd index b717884..4da87b9 100644 --- a/docs/html/design/patterns/navigation.jd +++ b/docs/html/design/patterns/navigation.jd @@ -2,6 +2,13 @@ page.title=Navigation with Back and Up page.tags="navigation","activity","task" @jd:body +<a class="notice-developers" href="{@docRoot}training/implementing-navigation/index.html"> + <div> + <h3>Developer Docs</h3> + <p>Implementing Effective Navigation</p> + </div> +</a> + <p>Consistent navigation is an essential component of the overall user experience. Few things frustrate users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0 introduced significant changes to the global navigation behavior. Thoughtfully following the @@ -203,15 +210,3 @@ with Task B—the prior context is abandoned in favor of the user's new goal <p>When your app registers to handle intents with an activity deep within the app's hierarchy, refer to <a href="#into-your-app">Navigation into Your App via Home Screen Widgets and Notifications</a> for guidance on how to specify Up navigation.</p> - - - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build your app with proper Up and Back navigation, read - <a href="{@docRoot}training/implementing-navigation/ancestral.html">Implementing - Ancestral Navigation</a> and - <a href="{@docRoot}training/implementing-navigation/temporal.html">Implementing - Temporal Navigation</a>, respectively. - </p> -</div> diff --git a/docs/html/design/patterns/notifications.jd b/docs/html/design/patterns/notifications.jd index 3ae827e..018b7b9 100644 --- a/docs/html/design/patterns/notifications.jd +++ b/docs/html/design/patterns/notifications.jd @@ -1,7 +1,13 @@ page.title=Notifications -page.tags="notification" @jd:body +<a class="notice-developers" href="{@docRoot}training/notify-user/index.html"> + <div> + <h3>Developer Docs</h3> + <p>Notifying the User</p> + </div> +</a> + <p>The notification system allows your app to keep the user informed about events, such as new chat messages or a calendar event. Think of notifications as a news channel that alerts the user to important events as they happen or a log that chronicles events while the user is not paying attention.</p> <h4>New in Jelly Bean</h4> @@ -258,11 +264,3 @@ develop a widget that they can choose to place on their home screen.</p> </div> </div> - - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build notifications, see the - <a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">Notifications</a> - API guide.</p> -</div> diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd index d16e86c..973ffde 100644 --- a/docs/html/design/patterns/selection.jd +++ b/docs/html/design/patterns/selection.jd @@ -2,6 +2,13 @@ page.title=Selection page.tags="actionmode","navigation","contextual" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/menus.html#context-menu"> + <div> + <h3>Developer Docs</h3> + <p>Menus: Creating Contextual Menus</p> + </div> +</a> + <p>Android 3.0 changed the <em>long press</em> gesture—that is, a touch that's held in the same position for a moment—to be the global gesture to select data.. This affects the way you should handle multi-select and contextual actions in your apps.</p> diff --git a/docs/html/design/patterns/settings.jd b/docs/html/design/patterns/settings.jd index 4748e48..fa3e538 100644 --- a/docs/html/design/patterns/settings.jd +++ b/docs/html/design/patterns/settings.jd @@ -2,6 +2,13 @@ page.title=Settings page.tags="preferences","sharedpreferences" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/ui/settings.html"> + <div> + <h3>Developer Docs</h3> + <p>Settings</p> + </div> +</a> + <p>Settings is a place in your app where users indicate their preferences for how your app should behave. This benefits users because:</p> @@ -681,13 +688,6 @@ it doesn't mean anything to most users and would have taken up a lot of space.</ </div> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build a settings interface, see the - <a href="{@docRoot}guide/topics/ui/settings.html">Settings</a> - API guide.</p> -</div> - <h2 id="checklist">Checklist</h2> <ul> diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd index f18fc63..630a4b9 100644 --- a/docs/html/design/patterns/swipe-views.jd +++ b/docs/html/design/patterns/swipe-views.jd @@ -2,6 +2,13 @@ page.title=Swipe Views page.tags="viewpager","navigation","tabs" @jd:body +<a class="notice-developers" href="{@docRoot}training/implementing-navigation/lateral.html"> + <div> + <h3>Developer Docs</h3> + <p>Creating Swipe Views with Tabs</p> + </div> +</a> + <p>Efficient navigation is one of the cornerstones of a well-designed app. While apps are generally built in a hierarchical fashion, there are instances where horizontal navigation can flatten vertical hierarchies and make access to related data items faster and more enjoyable. Swipe views @@ -79,12 +86,3 @@ using the swipe gesture to navigate to the next/previous detail view.</p> </div> </div> - -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to create swipe views, read - <a href="{@docRoot}training/implementing-navigation/lateral.html">Implementing Lateral Navigation</a>. - </p> -</div> - - diff --git a/docs/html/design/patterns/widgets.jd b/docs/html/design/patterns/widgets.jd index 3152e91..87ebbb9 100644 --- a/docs/html/design/patterns/widgets.jd +++ b/docs/html/design/patterns/widgets.jd @@ -2,6 +2,13 @@ page.title=Widgets page.tags="appwidget","home" @jd:body +<a class="notice-developers" href="{@docRoot}guide/topics/appwidgets/index.html"> + <div> + <h3>Developer Docs</h3> + <p>App Widgets</p> + </div> +</a> + <p>Widgets are an essential aspect of home screen customization. You can imagine them as "at-a-glance" views of an app's most important data and functionality that is accessible right from the user's home screen. Users can move widgets across their home screen panels, and, if supported, resize them to tailor the amount of information within a widget to their preference.</p> <h2>Widget types</h2> @@ -124,13 +131,6 @@ A music player widget is primarily a control widget, but also keeps the user inf </div> -<div class="note develop"> -<p><strong>Developer Guide</strong></p> - <p>For information about how to build widgets for the home screen, see the - <a href="{@docRoot}guide/topics/appwidgets/index.html">App Widgets</a> - API guide.</p> -</div> - <h2>Checklist</h2> <ul> <li>Focus on small portions of glanceable information on your widget. Expand on the information in your app.</li> diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd index 18550d9..a8f9d6f 100644 --- a/docs/html/design/style/devices-displays.jd +++ b/docs/html/design/style/devices-displays.jd @@ -32,7 +32,7 @@ ensure that your app looks great on any device.</p> </div> </div> - <img src="{@docRoot}design/media/devices_displays_density.png"> + <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> <h4>Strategies</h4> <p>So where do you begin when designing for multiple screens? One approach is to work in the base diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd index 1475e5c..0d2cdbb 100644 --- a/docs/html/design/style/iconography.jd +++ b/docs/html/design/style/iconography.jd @@ -4,9 +4,37 @@ page.tags="icons" <img src="{@docRoot}design/media/iconography_overview.png"> + <p>An icon is a graphic that takes up a small portion of screen real estate and provides a quick, intuitive representation of an action, a status, or an app.</p> +<p>When you design icons for your app, it's important to keep in mind that your +app may be installed on a variety of devices that offer a range of +pixel densities, as mentioned in +<a href="{@docRoot}design/style/devices-displays.html">Devices +and Displays</a>. But you can make your icons look great on all devices +by providing each icon in multiple sizes. When your app runs, Android checks the characteristics of +the device screen and loads the appropriate density-specific assets for your app. </p> + +<p>Because you will deliver each icon in multiple sizes to support different densities, +the design guidelines below +refer to the icon dimensions in <acronym title="density-independent pixels">dp</acronym> +units, which are based on the pixel dimensions of a medium-density (MDPI) screen.</p> + +<img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" /> + +<p>So, to create an icon for different densities, you should follow the <strong>2:3:4:6 scaling +ratio</strong> between the four primary densities (medium, high, x-high, and xx-high, +respectively). For example, consider that the size for a launcher icon is specified to be +48x48 dp. This means the baseline (MDPI) asset is 48x48 px, and the +high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high +density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.</p> + +<p class="note"><strong>Note:</strong> Android also supports low-density (LDPI) screens, +but you normally don't need to create custom assets at this size because Android +effectively down-scales your HDPI assets by 1/2 to match the expected size.</p> + + <h2 id="launcher">Launcher</h2> @@ -338,3 +366,165 @@ whenever a new notification is available.</p> </div> <!-- 2 free columns --> </div> + + + + + + + + + + +<h2 id="DesignTips">Design Tips</h2> + +<p>Here are some tips you might find useful as you create icons or other +drawable assets for your application. These tips assume you are using +Adobe® Photoshop® or a similar raster and vector image-editing program.</p> + + + + +<h3>Use vector shapes where possible</h3> + +<p>Many image-editing programs such as Adobe® Photoshop® allow you to use a +combination of vector shapes and raster layers and effects. When possible, +use vector shapes so that if the need arises, assets can be scaled up without +loss of detail and edge crispness.</p> + +<p>Using vectors also makes it easy to align edges and corners to pixel +boundaries at smaller resolutions.</li> + + + +<h3>Start with large artboards</h3> + +<p>Because you will need to create assets for different screen densities, +it is best to start your icon +designs on large artboards with dimensions that are multiples of the target icon +sizes. For example, launcher icons are 48, 72, 96, or 144 pixels wide, +depending on screen density (mdpi, hdpi, xhdpi, and xxhdpi, respectively). If you +initially draw launcher icons on an 864x864 artboard, it will be easier and +cleaner to adjust the icons when you scale the artboard down to the target +sizes for final asset creation.</p> + + + +<h3>When scaling, redraw bitmap layers as needed</h3> + +<p>If you scaled an image up from a bitmap layer, rather than from a vector +layer, those layers will need to be redrawn manually to appear crisp at higher +densities. For example if a 60x60 circle was painted as a bitmap for +mdpi it will need to be repainted as a 90x90 circle for hdpi.</p> + + + +<h3>Use common naming conventions for icon assets</h3> + +<p>Try to name files so that related assets will group together inside a +directory when they are sorted alphabetically. In particular, it helps to use a +common prefix for each icon type. For example:</p> + +<table> +<tr> +<th>Asset Type</th> +<th>Prefix</th> +<th>Example</th> +</tr> +<tr> +<td>Icons</td> +<td><code>ic_</code></td> +<td><code>ic_star.png</code></td> +</tr> +<tr> +<td>Launcher icons</td> +<td><code>ic_launcher</code></td> +<td><code>ic_launcher_calendar.png</code></td> +</tr> +<tr> +<td>Menu icons and Action Bar icons</td> +<td><code>ic_menu</code></td> +<td><code>ic_menu_archive.png</code></td> +</tr> +<tr> +<td>Status bar icons</td> +<td><code>ic_stat_notify</code></td> +<td><code>ic_stat_notify_msg.png</code></td> +</tr> +<tr> +<td>Tab icons</td> +<td><code>ic_tab</code></td> +<td><code>ic_tab_recent.png</code></td> +</tr> +<tr> +<td>Dialog icons</td> +<td><code>ic_dialog</code></td> +<td><code>ic_dialog_info.png</code></td> +</tr> +</table> + +<p>Note that you are not required to use a shared prefix of any +type—doing so is for your convenience only.</p> + + +<h3>Set up a working space that organizes files by density</h3> + +<p>Supporting multiple screen densities means you must create multiple versions +of the same icon. To help keep the multiple copies of files safe and easier to +find, we recommend creating a directory structure in your working space that +organizes asset files based on the target density. For example:</p> + +<pre> +art/... + mdpi/... + _pre_production/... + <em>working_file</em>.psd + <em>finished_asset</em>.png + hdpi/... + _pre_production/... + <em>working_file</em>.psd + <em>finished_asset</em>.png + xhdpi/... + _pre_production/... + <em>working_file</em>.psd + <em>finished_asset</em>.png</pre> + xxhdpi/... + _pre_production/... + <em>working_file</em>.psd + <em>finished_asset</em>.png</pre> + +<p>Because the structure in your working space is similar to that of the application, you +can quickly determine which assets should be copied to each +resources directory. Separating assets by density also helps you detect any +variances in filenames across densities, which is important because +corresponding assets for different densities must share the same filename.</p> + +<p>For comparison, here's the resources directory structure of a typical +application: </p> + +<pre>res/... + drawable-ldpi/... + <em>finished_asset</em>.png + drawable-mdpi/... + <em>finished_asset</em>.png + drawable-hdpi/... + <em>finished_asset</em>.png + drawable-xhdpi/... + <em>finished_asset</em>.png +</pre> + +<p>For more information about how to save resources in the application project, +see <a href="{@docRoot}guide/topics/resources/providing-resources.html">Providing Resources</a>. +</p> + + +<h3>Remove unnecessary metadata from final assets</h3> + +<p>Although the Android SDK tools will automatically compress PNGs when packaging +application resources into the application binary, a good practice is to remove +unnecessary headers and metadata from your PNG assets. Tools such as <a +href="http://optipng.sourceforge.net/">OptiPNG</a> or <a +href="http://pmt.sourceforge.net/pngcrush/">Pngcrush</a> can ensure that this +metadata is removed and that your image asset file sizes are optimized.</p> + + diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd index 3116ff6..0a99a2f 100644 --- a/docs/html/design/style/metrics-grids.jd +++ b/docs/html/design/style/metrics-grids.jd @@ -4,15 +4,28 @@ page.tags="layout","screens" <p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as -falling into a particular size bucket and density bucket. The size buckets are <em>handset</em> (smaller than -600<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi -screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp). The density buckets are <acronym +falling into a particular size bucket and density bucket:</p> +<ul> + <li>The size buckets are <em>handset</em> (smaller than +600<acronym title="Density-independent pixels: One dp is one pixel on a 160 dpi (mdpi) +screen.">dp</acronym>) and <em>tablet</em> (larger than or equal 600dp).</li> + <li>The density buckets are <acronym title="Low density (120 dpi)">LDPI</acronym>, <acronym title="Medium density (160 -dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, and <acronym title -="Extra-high density (320 dpi)">XHDPI</acronym>. Optimize your application's UI by designing +dpi)">MDPI</acronym>, <acronym title="High density (240 dpi)">HDPI</acronym>, <acronym title +="Extra-high density (320 dpi)">XHDPI</acronym>, and <acronym title +="Extra-extra!-high density (480 dpi)">XXHDPI</acronym>.</li> +</ul> + +<p>Optimize your application's UI by designing alternative layouts for some of the different size buckets, and provide alternative bitmap images for different density buckets.</p> +<p>Because it's important that you design and implement your layouts for multiple densities, +the guidelines below and throught the documentation +refer to layout dimensions with <acronym title="Density-independent pixels: One dp is one pixel +on a 160 dpi (mdpi) screen.">dp</acronym> measurements instead of pixels.</p> + + <div class="layout-content-row"> <div class="layout-content-col span-8"> @@ -30,6 +43,7 @@ Screen Sizes and Densities Device Dashboard</a>.</p> </div> </div> + <h2 id="48dp-rhythm">48dp Rhythm</h2> <p>Touchable UI components are generally laid out along 48dp units.</p> |
