diff options
Diffstat (limited to 'docs/html/design/patterns')
21 files changed, 860 insertions, 2735 deletions
diff --git a/docs/html/design/patterns/actionbar.html b/docs/html/design/patterns/actionbar.jd index e93498e..9e3f48c 100644 --- a/docs/html/design/patterns/actionbar.html +++ b/docs/html/design/patterns/actionbar.jd @@ -1,112 +1,7 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Action Bar - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Action Bar</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<img src="../static/content/action_bar_pattern_overview.png"> +page.title=Action Bar +@jd:body + +<img src="{@docRoot}design/media/action_bar_pattern_overview.png"> <p>The <em>action bar</em> is arguably the most important structural element of an Android app. It's a dedicated piece of real estate at the top of each screen that is generally persistent throughout the @@ -125,7 +20,7 @@ your app's interface consistent with the core Android apps.</p> <h2 id="organization">General Organization</h2> <p>The action bar is split into four different functional areas that apply to most apps.</p> -<img src="../static/content/action_bar_basics.png"> +<img src="{@docRoot}design/media/action_bar_basics.png"> <div class="layout-content-row"> <div class="layout-content-col span-7 with-callouts"> @@ -138,10 +33,10 @@ The app icon establishes your app's identity. It can be replaced with a differen if you wish. Important: If the app is currently not displaying the top-level screen, be sure to display the Up caret to the left of the app icon, so the user can navigate up the hierarchy. For more discussion of -Up navigation, see the <a href="../patterns/navigation.html">Navigation</a> pattern. +Up navigation, see the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern. <div class="figure"> - <img src="../static/content/action_bar_pattern_up_app_icon.png"> + <img src="{@docRoot}design/media/action_bar_pattern_up_app_icon.png"> <div class="figure-caption"> App icon with and without "up" affordance. </div> @@ -195,7 +90,7 @@ rotation on different screen sizes.</p> <p>You can adapt to such changes by using <em>split action bars</em>, which allow you to distribute action bar content across multiple bars located below the main action bar or at the bottom of the screen.</p> -<img src="../static/content/action_bar_pattern_rotation.png"> +<img src="{@docRoot}design/media/action_bar_pattern_rotation.png"> <div class="figure-caption"> Split action bar showing action buttons at the bottom of the screen in vertical orientation. </div> @@ -221,7 +116,7 @@ the top bar.</p> </div> <div class="layout-content-col span-3"> - <img src="../static/content/action_bar_pattern_considerations.png"> + <img src="{@docRoot}design/media/action_bar_pattern_considerations.png"> </div> </div> @@ -232,7 +127,7 @@ the top bar.</p> duration of a particular sub-task. CABs are most typically used for tasks that involve acting on selected data or text.</p> -<img src="../static/content/action_bar_cab.png"> +<img src="{@docRoot}design/media/action_bar_cab.png"> <div class="figure-caption"> Contextual action bar shown in Browser and Gmail </div> @@ -255,7 +150,7 @@ content of a CAB in order to insert the actions you would like the user to be ab <p><em>Tabs</em> display app views concurrently and make it easy to explore and switch between them. Use tabs if you expect your users to switch views frequently.</p> -<img src="../static/content/tabs_youtube.png"> +<img src="{@docRoot}design/media/tabs_youtube.png"> <p>There are two types of tabs: fixed and scrollable.</p> @@ -276,12 +171,12 @@ themselves.</p> <div class="layout-content-col span-7"> <video width="400" class="with-shadow play-on-hover" autoplay> - <source src="../static/content/tabs_scrolly.mp4" type="video/mp4"> - <source src="../static/content/tabs_scrolly.webm" type="video/webm"> - <source src="../static/content/tabs_scrolly.ogv" type="video/ogg"> + <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 on Google Play. + Scrolling tabs in Google Play. <div class="video-instructions"> </div> </div> @@ -298,7 +193,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen </div> <div class="layout-content-col span-7"> - <img src="../static/content/action_bar_pattern_default_tabs.png"> + <img src="{@docRoot}design/media/action_bar_pattern_default_tabs.png"> <div class="figure-caption"> Default fixed tabs shown in Holo Dark & Light. </div> @@ -320,7 +215,7 @@ tabs. Fixed tabs in the main action bar can move to the top bar when the screen </div> <div class="layout-content-col span-7"> - <img src="../static/content/action_bar_pattern_spinner.png"> + <img src="{@docRoot}design/media/action_bar_pattern_spinner.png"> <div class="figure-caption"> Action bar spinner from Calendar application. </div> @@ -336,7 +231,7 @@ action overflow. The action bar and the action overflow should only present acti are available. If an action is unavailable in the current context, hide it. Do not show it as disabled.</p> -<img src="../static/content/action_bar_pattern_action_icons.png"> +<img src="{@docRoot}design/media/action_bar_pattern_action_icons.png"> <div class="figure-caption"> A sampling of action buttons used throughout the Gmail application. </div> @@ -403,7 +298,7 @@ display the action overflow when the user presses the key.</p> </div> <div class="layout-content-col span-7"> - <img src="../static/content/action_bar_pattern_overflow.png"> + <img src="{@docRoot}design/media/action_bar_pattern_overflow.png"> <div class="figure-caption"> Action overflow is pinned to the right side. </div> @@ -427,7 +322,7 @@ rules:</p> </li> </ul> -<img src="../static/content/action_bar_pattern_table.png"> +<img src="{@docRoot}design/media/action_bar_pattern_table.png"> <div class="figure-caption"> In the above table "o" denotes an action bar item and "=" an overflow icon. </div> @@ -438,7 +333,7 @@ provider</em> in your action bar. The share action provider is designed to speed displaying the most recently used sharing service next to a spinner button that contains other sharing options.</p> -<img src="../static/content/action_bar_pattern_share_pack.png"> +<img src="{@docRoot}design/media/action_bar_pattern_share_pack.png"> <div class="figure-caption"> The Gallery app's share action provider with extended spinner for additional sharing options. </div> @@ -457,55 +352,3 @@ actions exceeds the capacity of the main action bar, display them separately in 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> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/app-structure.html b/docs/html/design/patterns/app-structure.jd index 6780594..b54b12f 100644 --- a/docs/html/design/patterns/app-structure.html +++ b/docs/html/design/patterns/app-structure.jd @@ -1,110 +1,5 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Application Structure - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Application Structure</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - +page.title=Application Structure +@jd:body <p>Apps come in many varieties that address very different needs. For example:</p> <ul> @@ -112,7 +7,7 @@ Android Design - Application Structure single screen</li> <li>Apps such as Phone whose main purpose is to switch between different activities without deeper navigation</li> -<li>Apps such as Gmail and Google Play that combine a broad set of data views with deep navigation</li> +<li>Apps such as Gmail or Google Play that combine a broad set of data views with deep navigation</li> </ul> <p>Your app's structure depends largely on the content and tasks you want to surface for your users.</p> <h2 id="general-structure">General Structure</h2> @@ -123,7 +18,7 @@ deep and complex, category views connect top level and detail views.</p> <div class="layout-content-row"> <div class="layout-content-col span-9"> - <img src="../static/content/app_structure_overview.png"> + <img src="{@docRoot}design/media/app_structure_overview.png"> </div> <div class="layout-content-col span-4"> @@ -163,7 +58,7 @@ layouts that are visually engaging and appropriate for the data type and screen </div> <div class="layout-content-col span-8"> - <img src="../static/content/app_structure_market.png"> + <img src="{@docRoot}design/media/app_structure_market.png"> <div class="figure-caption"> The Google Play 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 @@ -194,7 +89,7 @@ important actions.</p> </div> <div class="layout-content-col span-8"> - <img src="../static/content/app_structure_gmail.png"> + <img src="{@docRoot}design/media/app_structure_gmail.png"> <div class="figure-caption"> Email is about productivity, so an efficient, easy-to-skim list with higher data density works well. Navigation supports switching between accounts and recent labels. Icons for creating a @@ -216,7 +111,7 @@ monotony of simple list views.</p> </div> <div class="layout-content-col span-8"> - <img src="../static/content/app_structure_music_lndscp.png"> + <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. @@ -248,7 +143,7 @@ experience than to an explicit navigation step.</p> items are in view simultaneously). Keep the number of scrolling tabs at a manageable level to minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> - <img src="../static/content/app_structure_scrolltabs.png"> + <img src="{@docRoot}design/media/app_structure_scrolltabs.png"> <div class="figure-caption"> Google Play uses tabs to simultaneously show category choice and content. To navigate between categories, users can swipe left/right on the content. @@ -260,7 +155,7 @@ minimize navigational effort. Rule of thumb: no more than 5–7 tabs.</p> <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> - <img src="../static/content/app_structure_fixedtabs.png"> + <img src="{@docRoot}design/media/app_structure_fixedtabs.png"> <div class="figure-caption"> YouTube uses fixed tabs to switch between different, relatively unrelated functional areas. </div> @@ -275,7 +170,7 @@ invocation of actions for a data item from within list or grid views, display pr directly on list view items using drop-downs or split list items. This lets people invoke actions on data without having to navigate all the way down the hierarchy.</p> -<img src="../static/content/app_structure_shortcut_on_item.png"> +<img src="{@docRoot}design/media/app_structure_shortcut_on_item.png"> <div class="figure-caption"> Music allows the user to act upon a data item (song) from within the category view (album), thereby removing the need to navigate all the way down to the song's detail view. @@ -301,12 +196,12 @@ the data type being displayed, and therefore differs widely among apps.</p> For immersive content, make use of the lights-out mode to allow for distraction-free viewing of full-screen content.</p> - <img src="../static/content/app_structure_people_detail.png"> + <img src="{@docRoot}design/media/app_structure_people_detail.png"> </div> <div class="layout-content-col span-9"> - <img src="../static/content/app_structure_book_detail_page_flip.png"> + <img src="{@docRoot}design/media/app_structure_book_detail_page_flip.png"> <div class="figure-caption"> Google Books' detail view is all about replicating the experience of reading an actual book. The page-flip animation reinforces that notion. To create an immersive experience the app @@ -327,12 +222,12 @@ full-screen content.</p> between items from within the detail view. Use swipe views or other techniques, such as filmstrips, to achieve this.</p> -<img src="../static/content/app_structure_gmail_swipe.png"> +<img src="{@docRoot}design/media/app_structure_gmail_swipe.png"> <div class="figure-caption"> Gmail using swipe views to navigate from detail view to detail view. </div> -<img src="../static/content/app_structure_gallery_filmstrip.png"> +<img src="{@docRoot}design/media/app_structure_gallery_filmstrip.png"> <div class="figure-caption"> In addition to supporting swipe gestures to move left or right through images, Gallery provides a filmstrip control that lets people quickly jump to specific images. @@ -357,55 +252,3 @@ to achieve this.</p> <p>Allow for quick navigation between detail items with swipe views.</p> </li> </ul> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/compatibility.html b/docs/html/design/patterns/compatibility.html deleted file mode 100644 index d6e59f5..0000000 --- a/docs/html/design/patterns/compatibility.html +++ /dev/null @@ -1,218 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Backwards Compatibility - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Backwards Compatibility</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<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 - via virtual controls (Back, Home, Recents).</li> -<li>Robust pattern for the use of menus in action bars.</li> -</ul> -<p>Android 4.0 brings these changes for tablets to the phone platform.</p> - -<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<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 -fit in the action bar or aren't important enough to be displayed at the top level appear in the -action overflow.</p> -<p>Users access the action overflow by touching it in the action bar.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/compatibility_virtual_nav.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<h4>Phones with physical navigation keys</h4> -<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at -the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The -resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/compatibility_physical_buttons.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<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 -controls, an action overflow control appears at the right side of the virtual navigation bar. You -can touch the control to display the app's actions in the traditional Android menu styling.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/compatibility_legacy_apps.png"> - - </div> -</div> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/compatibility.jd b/docs/html/design/patterns/compatibility.jd new file mode 100644 index 0000000..84ae337 --- /dev/null +++ b/docs/html/design/patterns/compatibility.jd @@ -0,0 +1,61 @@ +page.title=Backwards Compatibility +@jd:body + +<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 + via virtual controls (Back, Home, Recents).</li> +<li>Robust pattern for the use of menus in action bars.</li> +</ul> +<p>Android 4.0 brings these changes for tablets to the phone platform.</p> + +<h2 id="older-hardware">Adapting Android 4.0 to Older Hardware and Apps</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<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 +fit in the action bar or aren't important enough to be displayed at the top level appear in the +action overflow.</p> +<p>Users access the action overflow by touching it in the action bar.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/compatibility_virtual_nav.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>Phones with physical navigation keys</h4> +<p>Android phones with traditional navigation hardware keys don't display the virtual navigation bar at +the bottom of the screen. Instead, the action overflow is available from the menu hardware key. The +resulting actions popup has the same style as in the previous example, but is displayed at the bottom of the screen.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/compatibility_physical_buttons.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<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 +controls, an action overflow control appears at the right side of the virtual navigation bar. You +can touch the control to display the app's actions in the traditional Android menu styling.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/compatibility_legacy_apps.png"> + + </div> +</div> diff --git a/docs/html/design/patterns/gestures.html b/docs/html/design/patterns/gestures.html deleted file mode 100644 index c88817f..0000000 --- a/docs/html/design/patterns/gestures.html +++ /dev/null @@ -1,272 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Gestures - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Gestures</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The -following table shows the core gesture set that is supported in Android.</p> - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_touch.png"> - -<h4>Touch</h4> -<p>Triggers the default functionality for a given item.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, lift</p></li> -</ul> - - </div> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_longtouch.png"> - -<h4>Long press</h4> -<p>Enters data selection mode. Allows you to select one or more items in a view and act upon - the data using a contextual action bar. Avoid using long press for showing contextual menus.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, wait, lift</p></li> -</ul> - - </div> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_swipe.png"> - -<h4>Swipe</h4> -<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Press, move, lift</p></li> -</ul> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_drag.png"> - -<h4>Drag</h4> -<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Long press, move, lift</p></li> -</ul> - - </div> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_doubletouch.png"> - -<h4>Double touch</h4> -<p>Zooms into content. Also used as a secondary gesture for text selection.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>Two touches in quick succession</p></li> -</ul> - - </div> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_pinchopen.png"> - -<h4>Pinch open</h4> -<p>Zooms into content.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move outwards, lift</p></li> -</ul> - - </div> -</div> - - -<div class="layout-content-row"> - <div class="layout-content-col span-4"> - - <img src="../static/content/gesture_pinchclose.png"> - -<h4>Pinch close</h4> -<p>Zooms out of content.</p> - -<ul> - <li class="no-bullet with-icon action"> - <h4>Action</h4> - <p>2-finger press, move inwards, lift</p></li> -</ul> - - </div> -</div> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/gestures.jd b/docs/html/design/patterns/gestures.jd new file mode 100644 index 0000000..9868df2 --- /dev/null +++ b/docs/html/design/patterns/gestures.jd @@ -0,0 +1,115 @@ +page.title=Gestures +@jd:body + +<p>Gestures allow users to interact with your app by manipulating the screen objects you provide. The +following table shows the core gesture set that is supported in Android.</p> + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_touch.png"> + +<h4>Touch</h4> +<p>Triggers the default functionality for a given item.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Press, lift</p></li> +</ul> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_longtouch.png"> + +<h4>Long press</h4> +<p>Enters data selection mode. Allows you to select one or more items in a view and act upon + the data using a contextual action bar. Avoid using long press for showing contextual menus.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Press, wait, lift</p></li> +</ul> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_swipe.png"> + +<h4>Swipe</h4> +<p>Scrolls overflowing content, or navigates between views in the same hierarchy.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Press, move, lift</p></li> +</ul> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_drag.png"> + +<h4>Drag</h4> +<p>Rearranges data within a view, or moves data into a container (e.g. folders on Home Screen).</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Long press, move, lift</p></li> +</ul> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_doubletouch.png"> + +<h4>Double touch</h4> +<p>Zooms into content. Also used as a secondary gesture for text selection.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>Two touches in quick succession</p></li> +</ul> + + </div> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_pinchopen.png"> + +<h4>Pinch open</h4> +<p>Zooms into content.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>2-finger press, move outwards, lift</p></li> +</ul> + + </div> +</div> + + +<div class="layout-content-row"> + <div class="layout-content-col span-4"> + + <img src="{@docRoot}design/media/gesture_pinchclose.png"> + +<h4>Pinch close</h4> +<p>Zooms out of content.</p> + +<ul> + <li class="no-bullet with-icon action"> + <h4>Action</h4> + <p>2-finger press, move inwards, lift</p></li> +</ul> + + </div> +</div> diff --git a/docs/html/design/patterns/index.html b/docs/html/design/patterns/index.html deleted file mode 100644 index 863baa9..0000000 --- a/docs/html/design/patterns/index.html +++ /dev/null @@ -1,175 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Design Patterns - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - -<style> -#landing-graphic-container { - position: relative; -} - -#text-overlay { - position: absolute; - left: 10px; - top: 492px; - width: 200px; -} -</style> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - -<div class="layout-content-row content-header just-links"> - <div class="layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> -</div> - - - - -<div id="landing-graphic-container"> - <div id="text-overlay"> - Design apps that behave in a consistent, predictable fashion. - <br><br> - <a href="../patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a> - </div> - - <a href="../patterns/new-4-0.html"> - <img src="../static/content/patterns_landing.png"> - </a> -</div> - - - - - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/index.jd b/docs/html/design/patterns/index.jd new file mode 100644 index 0000000..732e4db --- /dev/null +++ b/docs/html/design/patterns/index.jd @@ -0,0 +1,29 @@ +page.title=Patterns +header.justLinks=1 +footer.hide=1 +@jd:body + +<style> +#landing-graphic-container { + position: relative; +} + +#text-overlay { + position: absolute; + left: 10px; + top: 492px; + width: 200px; +} +</style> + +<div id="landing-graphic-container"> + <div id="text-overlay"> + Design apps that behave in a consistent, predictable fashion. + <br><br> + <a href="{@docRoot}design/patterns/new-4-0.html" class="landing-page-link">New in Android 4.0</a> + </div> + + <a href="{@docRoot}design/patterns/new-4-0.html"> + <img src="{@docRoot}design/media/patterns_landing.png"> + </a> +</div> diff --git a/docs/html/design/patterns/multi-pane-layouts.html b/docs/html/design/patterns/multi-pane-layouts.html deleted file mode 100644 index 7925c98..0000000 --- a/docs/html/design/patterns/multi-pane-layouts.html +++ /dev/null @@ -1,267 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Multi-pane Layouts - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Multi-pane Layouts</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<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> -<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into -one compound view when a lot of horizontal screen real estate is available and by splitting them up -when less space is available.</p> -<h2 id="combining-views">Combining Multiple Views Into One</h2> - -<p>On smaller devices your content is typically divided into a master grid or list view and a detail -view. Touching an item in the master view opens a different screen showing that item's detail -information.</p> - -<img src="../static/content/multipane_views.png"> - -<p>Because tablets have more screen real estate than phones, you can use panels to combine the related -list and detail views into a single compound view. This uses the additional space more efficiently -and makes navigating the app easier. </p> - -<img src="../static/content/multipane_view_tablet.png"> - -<p>In general, use the pane on the right to present more information about the item you selected in the -left pane. Make sure to keep the item in the left pane selected in order to establish the -relationship between the panels.</p> -<h2 id="orientation">Compound Views and Orientation Changes</h2> - -<p>Screens should have the same functionality regardless of orientation. If you use a compound view in -one orientation, don't 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> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="../static/content/multipane_stretch.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Stretch/compress</h4> -<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="../static/content/multipane_stack.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Stack</h4> -<p>Rearrange the panels on your screen to match the orientation.</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="../static/content/multipane_expand.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Expand/collapse</h4> -<p>When the device rotates, collapse the left pane view to only show the most important information. -Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original -width and vice versa.</p> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-8"> - - <img src="../static/content/multipane_show.png"> - - </div> - <div class="layout-content-col span-5"> - -<h4>Show/hide</h4> -<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar -to show the left panel and allow navigation to a different email. Hide the left panel by touching -the content in the detail panel.</p> - - </div> -</div> - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p> -</li> -<li> -<p>Identify the most appropriate method for the panels in your compound views to reorganize - themselves when screen orientation changes.</p> -</li> -<li> -<p>Look for opportunities to consolidate your views into multi-panel compound views.</p> -</li> -<li> -<p>Make sure that your screens provide functional parity after the screen orientation - changes.</p> -</li> -</ul> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/multi-pane-layouts.jd b/docs/html/design/patterns/multi-pane-layouts.jd new file mode 100644 index 0000000..0e63e32 --- /dev/null +++ b/docs/html/design/patterns/multi-pane-layouts.jd @@ -0,0 +1,110 @@ +page.title=Multi-pane Layouts +@jd:body + +<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> +<p><em>Panels</em> are a great way for your app to achieve this. They allow you to combine multiple views into +one compound view when a lot of horizontal screen real estate is available and by splitting them up +when less space is available.</p> +<h2 id="combining-views">Combining Multiple Views Into One</h2> + +<p>On smaller devices your content is typically divided into a master grid or list view and a detail +view. Touching an item in the master view opens a different screen showing that item's detail +information.</p> + +<img src="{@docRoot}design/media/multipane_views.png"> + +<p>Because tablets have more screen real estate than phones, you can use panels to combine the related +list and detail views into a single compound view. This uses the additional space more efficiently +and makes navigating the app easier. </p> + +<img src="{@docRoot}design/media/multipane_view_tablet.png"> + +<p>In general, use the pane on the right to present more information about the item you selected in the +left pane. Make sure to keep the item in the left pane selected in order to establish the +relationship between the panels.</p> +<h2 id="orientation">Compound Views and Orientation Changes</h2> + +<p>Screens should have the same functionality regardless of orientation. If you use a compound view in +one orientation, don't 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> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/multipane_stretch.png"> + + </div> + <div class="layout-content-col span-5"> + +<h4>Stretch/compress</h4> +<p>Adjust the column width of your left pane to achieve a balanced layout in both orientations.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/multipane_stack.png"> + + </div> + <div class="layout-content-col span-5"> + +<h4>Stack</h4> +<p>Rearrange the panels on your screen to match the orientation.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/multipane_expand.png"> + + </div> + <div class="layout-content-col span-5"> + +<h4>Expand/collapse</h4> +<p>When the device rotates, collapse the left pane view to only show the most important information. +Provide an <em>expand</em> control that allows the user to bring the left pane content back to its original +width and vice versa.</p> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/multipane_show.png"> + + </div> + <div class="layout-content-col span-5"> + +<h4>Show/hide</h4> +<p>After rotating the device, show the right pane in fullscreen view. Use the Up icon in the action bar +to show the left panel and allow navigation to a different email. Hide the left panel by touching +the content in the detail panel.</p> + + </div> +</div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Plan in advance on how your app scales to different screen sizes and screen orientations.</p> +</li> +<li> +<p>Identify the most appropriate method for the panels in your compound views to reorganize + themselves when screen orientation changes.</p> +</li> +<li> +<p>Look for opportunities to consolidate your views into multi-panel compound views.</p> +</li> +<li> +<p>Make sure that your screens provide functional parity after the screen orientation + changes.</p> +</li> +</ul> diff --git a/docs/html/design/patterns/navigation.html b/docs/html/design/patterns/navigation.html deleted file mode 100644 index 5d1568e..0000000 --- a/docs/html/design/patterns/navigation.html +++ /dev/null @@ -1,275 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Navigation with Back and Up - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Navigation with Back and Up</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<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 -guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p> -<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an -app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: -the <em>Up</em> button, consisting of the app icon and a left-point caret.</p> - -<img src="../static/content/navigation_with_back_and_up.png"> - -<h2 id="up-vs-back">Up vs. Back</h2> - -<p>The Up button is used to navigate within an application based on the hierarchical relationships -between screens. For instance, if screen A displays a list of items, and selecting an item leads to -screen B (which presents that item in more detail), then screen B should offer an Up button that -returns to screen A.</p> -<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up -button.</p> -<p>The system Back key is used to navigate based on the history of screens the user has recently seen, -in reverse chronological order—in effect, the temporal relationships between screens.</p> -<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing -the Back key will have the same result as pressing an Up button -- this is a common occurrence. -However, unlike the Up button, which ensures the user remains within your app, the Back key can -return the user to the Home screen, or even to a different application.</p> - -<img src="../static/content/navigation_up_vs_back_gmail.png"> - -<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p> -<ul> -<li>Back dismisses floating windows (dialogs, popups)</li> -<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li> -<li>Back hides the onscreen keyboard (IME)</li> -</ul> -<h2 id="within-app">Navigation Within Your App</h2> - -<h4>Navigating to screens with multiple entry points</h4> -<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached -from multiple entry points—e.g., a settings screen which can be navigated to from any screen -in your app. In this case, the Up button should choose to return to the referring screen, behaving -identically to Back.</p> -<h4>Changing view within a screen</h4> -<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still -in the same place within the app's hierarchy, and no new navigation history is created.</p> -<p>Examples of such view changes are:</p> -<ul> -<li>Switching views using tabs and/or left-and-right swipes</li> -<li>Switching views using a dropdown (aka collapsed tabs)</li> -<li>Filtering a list</li> -<li>Sorting a list</li> -<li>Changing display characteristics (e.g. zooming)</li> -</ul> -<h4>Navigating between sibling screens</h4> -<p>When your app supports navigation from a list of items to a detail view of one of those items, it's -often desirable to support direction navigation from that item to another one which precedes or -follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation -to view a newer or older one in the same Inbox. Just as when changing view within a screen, such -navigation does not change the behavior of Up or Back.</p> - -<img src="../static/content/navigation_between_siblings_gmail.png"> - -<p>However, a notable exception to this occurs when browsing between "related" detail views not tied -together by the referring list—for example, when browsing on Google Play between apps from -the same developer, or albums by the same artist. In these cases, following each link does create -history, causing the Back button to step through each screen of related content which has been -viewed. Up should continue to bypass these related screens and navigate to the most recently viewed -container screen.</p> - -<img src="../static/content/navigation_between_siblings_market1.png"> - -<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail -view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book -viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies) -which the user had not previously navigated through.</p> - -<img src="../static/content/navigation_between_siblings_market2.png"> - -<h2 id="from-outside">Navigation From Outside Your App</h2> - -<p>There are two categories of navigation from outside your app to screens deep within the app's -hierarchy:</p> -<ul> -<li>App-to-app navigation, such as via intent completion.</li> -<li>System-to-app navigation, such as via notifications and home screen widgets.</li> -</ul> -<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly -to the compose screen. For system-to-app navigation, both a new message notification and a home -screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p> -<h4>App-to-app navigation</h4> -<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will -return to the referring app.</p> -<p>The Up button is handled as follows: -- If the destination screen is typically reached from one particular screen within your app, Up - should navigate to that screen. -- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p> -<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to -Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the -typical referrer to compose, as well as the topmost screen of the app), while Back returns to -Google Play.</p> - -<img src="../static/content/navigation_from_outside_up.png"> - -<h4>System-to-app navigation</h4> -<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up -behaves as described for app-to-app navigation, above.</p> -<p>For the Back key, you should make navigation more predictably by inserting into the task's back -stack the complete upward navigation path to the app's topmost screen. This way, a user who has -forgotten how they entered your app can safely navigate to the app's topmost screen before exiting -it.</p> -<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen. -After following that path, the Back key first returns to the Inbox, and from there continues to -Home.</p> - -<img src="../static/content/navigation_from_outside_back.png"> - - - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/navigation.jd b/docs/html/design/patterns/navigation.jd new file mode 100644 index 0000000..d35cd82 --- /dev/null +++ b/docs/html/design/patterns/navigation.jd @@ -0,0 +1,116 @@ +page.title=Navigation with Back and Up +@jd:body + +<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 +guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p> +<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an +app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared: +the <em>Up</em> button, consisting of the app icon and a left-point caret.</p> + +<img src="{@docRoot}design/media/navigation_with_back_and_up.png"> + +<h2 id="up-vs-back">Up vs. Back</h2> + +<p>The Up button is used to navigate within an application based on the hierarchical relationships +between screens. For instance, if screen A displays a list of items, and selecting an item leads to +screen B (which presents that item in more detail), then screen B should offer an Up button that +returns to screen A.</p> +<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up +button.</p> +<p>The system Back key is used to navigate based on the history of screens the user has recently seen, +in reverse chronological order—in effect, the temporal relationships between screens.</p> +<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing +the Back key will have the same result as pressing an Up button -- this is a common occurrence. +However, unlike the Up button, which ensures the user remains within your app, the Back key can +return the user to the Home screen, or even to a different application.</p> + +<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png"> + +<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p> +<ul> +<li>Back dismisses floating windows (dialogs, popups)</li> +<li>Back dismisses contextual action bars, and removes the highlight from the selected items</li> +<li>Back hides the onscreen keyboard (IME)</li> +</ul> +<h2 id="within-app">Navigation Within Your App</h2> + +<h4>Navigating to screens with multiple entry points</h4> +<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached +from multiple entry points—e.g., a settings screen which can be navigated to from any screen +in your app. In this case, the Up button should choose to return to the referring screen, behaving +identically to Back.</p> +<h4>Changing view within a screen</h4> +<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still +in the same place within the app's hierarchy, and no new navigation history is created.</p> +<p>Examples of such view changes are:</p> +<ul> +<li>Switching views using tabs and/or left-and-right swipes</li> +<li>Switching views using a dropdown (aka collapsed tabs)</li> +<li>Filtering a list</li> +<li>Sorting a list</li> +<li>Changing display characteristics (e.g. zooming)</li> +</ul> +<h4>Navigating between sibling screens</h4> +<p>When your app supports navigation from a list of items to a detail view of one of those items, it's +often desirable to support direction navigation from that item to another one which precedes or +follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation +to view a newer or older one in the same Inbox. Just as when changing view within a screen, such +navigation does not change the behavior of Up or Back.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png"> + +<p>However, a notable exception to this occurs when browsing between "related" detail views not tied +together by the referring list—for example, when browsing on Google Play between apps from +the same developer, or albums by the same artist. In these cases, following each link does create +history, causing the Back button to step through each screen of related content which has been +viewed. Up should continue to bypass these related screens and navigate to the most recently viewed +container screen.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market1.png"> + +<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail +view. If we extend our Google Play sample from above, imagine the user has navigated from the last Book +viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies) +which the user had not previously navigated through.</p> + +<img src="{@docRoot}design/media/navigation_between_siblings_market2.png"> + +<h2 id="from-outside">Navigation From Outside Your App</h2> + +<p>There are two categories of navigation from outside your app to screens deep within the app's +hierarchy:</p> +<ul> +<li>App-to-app navigation, such as via intent completion.</li> +<li>System-to-app navigation, such as via notifications and home screen widgets.</li> +</ul> +<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly +to the compose screen. For system-to-app navigation, both a new message notification and a home +screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p> +<h4>App-to-app navigation</h4> +<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will +return to the referring app.</p> +<p>The Up button is handled as follows: +- If the destination screen is typically reached from one particular screen within your app, Up + should navigate to that screen. +- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p> +<p>For example, after choosing to share a book being viewed on Google Play, the user navigates directly to +Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the +typical referrer to compose, as well as the topmost screen of the app), while Back returns to +Google Play.</p> + +<img src="{@docRoot}design/media/navigation_from_outside_up.png"> + +<h4>System-to-app navigation</h4> +<p>If your app was reached via the system mechanisms of notifications or home screen widgets, Up +behaves as described for app-to-app navigation, above.</p> +<p>For the Back key, you should make navigation more predictably by inserting into the task's back +stack the complete upward navigation path to the app's topmost screen. This way, a user who has +forgotten how they entered your app can safely navigate to the app's topmost screen before exiting +it.</p> +<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen. +After following that path, the Back key first returns to the Inbox, and from there continues to +Home.</p> + +<img src="{@docRoot}design/media/navigation_from_outside_back.png"> diff --git a/docs/html/design/patterns/new-4-0.html b/docs/html/design/patterns/new-4-0.html deleted file mode 100644 index 2e2cbc2..0000000 --- a/docs/html/design/patterns/new-4-0.html +++ /dev/null @@ -1,228 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - New in Android 4.0 - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>New in Android 4.0</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<div class="layout-content-row"> - <div class="layout-content-col span-7"> - -<h4>Navigation bar</h4> -<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a -virtual navigation bar that houses the Back, Home and Recents buttons. Read the -<a href="../patterns/compatibility.html">Compatibility</a> 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> - - </div> - <div class="layout-content-col span-6"> - - <img src="../static/content/whats_new_nav_bar.png"> - - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-7"> - -<h4>Action bar</h4> -<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 to surface actions.</p> - - </div> - <div class="layout-content-col span-6"> - - <img src="../static/content/whats_new_action_bar.png"> - - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-7"> - -<h4>Multi-pane layouts</h4> -<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 combine different activities that show separately on -smaller devices into richer compound views for tablets.</p> - - </div> - <div class="layout-content-col span-6"> - - <img src="../static/content/whats_new_multipanel.png"> - - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-7"> - -<h4>Selection</h4> -<p>The long press gesture which was traditionally used to show contextual actions for objects is now -used for data selection. When selecting data, contextual action bars allow you to surface actions.</p> - - </div> - <div class="layout-content-col span-6"> - - <img src="../static/content/whats_new_multiselect.png"> - - </div> -</div> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/new-4-0.jd b/docs/html/design/patterns/new-4-0.jd new file mode 100644 index 0000000..91ebba7 --- /dev/null +++ b/docs/html/design/patterns/new-4-0.jd @@ -0,0 +1,71 @@ +page.title=New in Android 4.0 +@jd:body + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Navigation bar</h4> +<p>Android 4.0 removes the need for traditional hardware keys on phones by replacing them with a +virtual navigation bar that houses the Back, Home and Recents buttons. Read the +<a href="{@docRoot}design/patterns/compatibility.html">Compatibility</a> 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> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/whats_new_nav_bar.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Action bar</h4> +<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 to surface actions.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/whats_new_action_bar.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Multi-pane layouts</h4> +<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 combine different activities that show separately on +smaller devices into richer compound views for tablets.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/whats_new_multipanel.png"> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-7"> + +<h4>Selection</h4> +<p>The long press gesture which was traditionally used to show contextual actions for objects is now +used for data selection. When selecting data, contextual action bars allow you to surface actions.</p> + + </div> + <div class="layout-content-col span-6"> + + <img src="{@docRoot}design/media/whats_new_multiselect.png"> + + </div> +</div> diff --git a/docs/html/design/patterns/notifications.html b/docs/html/design/patterns/notifications.jd index 99af418..ad88a01 100644 --- a/docs/html/design/patterns/notifications.html +++ b/docs/html/design/patterns/notifications.jd @@ -1,110 +1,5 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Notifications - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Notifications</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - +page.title=Notifications +@jd:body <p>The notification system allows your app to keep the user informed about important events, such as new messages in a chat app or a calendar event.</p> @@ -128,7 +23,7 @@ synchronous form of communication: there is another user actively waiting on you Calendar events are another good example of when to use a notification and grab the user's attention, because the event is imminent, and calendar events often involve other people.</p> -<img src="../static/content/notifications_pattern_real_time_people.png"> +<img src="{@docRoot}design/media/notifications_pattern_real_time_people.png"> <div class="vspace size-2"> </div> @@ -172,7 +67,7 @@ develop a widget that they can choose to place on their home screen.</p> </div> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_social_fail.png"> + <img src="{@docRoot}design/media/notifications_pattern_social_fail.png"> </div> </div> @@ -182,7 +77,7 @@ develop a widget that they can choose to place on their home screen.</p> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_anatomy.png"> + <img src="{@docRoot}design/media/notifications_pattern_anatomy.png"> </div> <div class="layout-content-col span-6"> @@ -204,7 +99,7 @@ stacked (see <em>Stacked notifications</em> below) and references multiple items the user is taken to a hierarchy level below your app's top-level, insert navigation into your app's back stack to allow them to navigate to your app's top level using the system back key. For more information, see the chapter on <em>System-to-app navigation</em> in the -<a href="../patterns/navigation.html">Navigation</a> design pattern.</p> +<a href="{@docRoot}design/patterns/navigation.html">Navigation</a> design pattern.</p> <h4>Timestamps for time sensitive events</h4> <p>By default, standard Android notifications include a timestamp in the upper right corner. Consider whether the timestamp is valuable in the context of your notification. If the timestamp is not @@ -222,11 +117,11 @@ an altogether new notification object. Instead, stack the notification.</p> notifications of a particular kind are pending.</p> <p><strong>Don't</strong>:</p> -<img src="../static/content/notifications_pattern_additional_fail.png"> +<img src="{@docRoot}design/media/notifications_pattern_additional_fail.png"> <p><strong>Do</strong>:</p> -<img src="../static/content/notifications_pattern_additional_win.png"> +<img src="{@docRoot}design/media/notifications_pattern_additional_win.png"> <p>If you keep the summary and detail information on different screens, a stacked notification may need to open to a different place in the app than a single notification.</p> @@ -252,7 +147,7 @@ hides automatically.</p> </div> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_phone_ticker.png"> + <img src="{@docRoot}design/media/notifications_pattern_phone_ticker.png"> </div> </div> @@ -278,7 +173,7 @@ currently pending.</p> <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_phone_icons.png"> + <img src="{@docRoot}design/media/notifications_pattern_phone_icons.png"> </div> <div class="layout-content-col span-6"> @@ -301,7 +196,7 @@ notification drawer is opened by touching anywhere inside the notification area. </div> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_tablet.png"> + <img src="{@docRoot}design/media/notifications_pattern_tablet.png"> </div> </div> @@ -309,7 +204,7 @@ notification drawer is opened by touching anywhere inside the notification area. <div class="layout-content-row"> <div class="layout-content-col span-6"> - <img src="../static/content/notifications_pattern_ongoing_music.png"> + <img src="{@docRoot}design/media/notifications_pattern_ongoing_music.png"> </div> <div class="layout-content-col span-6"> @@ -338,57 +233,4 @@ and toasts can echo back that an action has been successfully taken.</p> <div class="vspace size-1"> </div> -<img src="../static/content/notifications_pattern_dialog_toast.png"> - - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> +<img src="{@docRoot}design/media/notifications_pattern_dialog_toast.png"> diff --git a/docs/html/design/patterns/pure-android.html b/docs/html/design/patterns/pure-android.html deleted file mode 100644 index f5a8042..0000000 --- a/docs/html/design/patterns/pure-android.html +++ /dev/null @@ -1,292 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Pure Android - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Pure Android</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for -Android, keep in mind that different platforms play by different rules and conventions. Design -decisions that make perfect sense on one platform will look and feel misplaced in the context of a -different platform. While a "design once, ship anywhere" approach might save you time up-front, you -run the very real risk of creating inconsistent apps that alienate users. Consider the following -guidelines to avoid the most common traps and pitfalls.</p> - -<div class="vspace size-1"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<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 -distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others -use gradients in their title bars. In some cases, elements may have the same purpose, but are -designed to work a bit differently.</p> -<p>As you build your app for Android, don't carry over themed UI elements from other platforms and -don't mimic their specific behaviors. Review the <a href="../building- -blocks/index.html">Building Blocks</a> section in this styleguide to learn about Android's most important UI elements -and the way they look in the system default themes. Also examine Android's platform apps to get a -sense of how elements are applied in the context of an app. If you want to customize the theme of UI -elements, customize carefully according to your specific branding - and not according to the -conventions of a different platform.</p> - - </div> - <div class="layout-content-col span-8"> - - <img src="../static/content/migrating_ui_elements.png"> - <div class="figure-caption"> - Sampling of UI elements from Android, iOS and Windows Phone 7. - </div> - - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<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 -document or deleting.</p> -<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android -counterparts.</p> -<p>You can find a wide variety of icons for use in your app in the Android SDK.</p> - - </div> - <div class="layout-content-col span-8"> - - <img src="../static/content/migrating_icons.png"> - <div class="figure-caption"> - Sampling of icons from Android, iOS and Windows Phone 7. - </div> - - </div> -</div> - -<div class="vspace size-2"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<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, -Android's tabs for view control are shown in action bars at the top of the screen instead. In -addition, Android apps may use a bottom bar to display actions on a split action bar.</p> -<p>You should follow this guideline to create a consistent experience with other apps on the Android -platform and to avoid confusion between actions and view switching on Android.</p> -<p>For more information on how to properly use action bars for view control, see -<a href="../patterns/actionbar.html">Action Bars</a>.</p> - - </div> - <div class="layout-content-col span-8"> - - <img src="../static/content/migrating_ios_dialers.png"> - <div class="figure-caption"> - Android dialer with tabs in an action bar vs. bottom tabs in iOS. - </div> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<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 -application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical -navigation and the navigation bar's back button for temporal navigation. For more information, -please review the <a href="../patterns/navigation.html">Navigation</a> pattern.</p> -<p>Follow this guideline to provide a consistent navigation experience across the platform.</p> - - </div> - <div class="layout-content-col span-8"> - - <img src="../static/content/migrating_ios_galleries.png"> - <div class="figure-caption"> - Android action bar with up caret vs. iOS labeled "Back" button. - </div> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - -<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 -the user to drill deeper into additional content.</p> -<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with -the platform and in order to not have the user guess as to what the meaning of those carets may be.</p> - - </div> - <div class="layout-content-col span-8"> - - <img src="../static/content/migrating_ios_settings.png"> - <div class="figure-caption"> - Android settings without right-pointing carets in line items vs. iOS settings. - </div> - - </div> -</div> - -<h2 id="device-independence">Device Independence</h2> - -<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets -for different screen sizes and densities and make use of concepts such as multi-pane layouts to -appropriately scale your UI on different device form factors.</p> -<p>For more information, read <a href="../style/devices-displays.html">Devices and Displays</a> as -well as <a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/pure-android.jd b/docs/html/design/patterns/pure-android.jd new file mode 100644 index 0000000..8ed1347 --- /dev/null +++ b/docs/html/design/patterns/pure-android.jd @@ -0,0 +1,136 @@ +page.title=Pure Android +@jd:body + +<p>Most developers want to distribute their apps on multiple platforms. As you plan your app for +Android, keep in mind that different platforms play by different rules and conventions. Design +decisions that make perfect sense on one platform will look and feel misplaced in the context of a +different platform. While a "design once, ship anywhere" approach might save you time up-front, you +run the very real risk of creating inconsistent apps that alienate users. Consider the following +guidelines to avoid the most common traps and pitfalls.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<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 +distinctive fashion. For example, some platforms advocate rounded corners for their buttons, others +use gradients in their title bars. In some cases, elements may have the same purpose, but are +designed to work a bit differently.</p> +<p>As you build your app for Android, don't carry over themed UI elements from other platforms and +don't mimic their specific behaviors. Review the +<a href="{@docRoot}design/building-blocks/index.html">Building Blocks</a> +section in this styleguide to learn about Android's most important UI elements +and the way they look in the system default themes. Also examine Android's platform apps to get a +sense of how elements are applied in the context of an app. If you want to customize the theme of UI +elements, customize carefully according to your specific branding - and not according to the +conventions of a different platform.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ui_elements.png"> + <div class="figure-caption"> + Sampling of UI elements from Android, iOS and Windows Phone 7. + </div> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<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 +document or deleting.</p> +<p>As you are migrating your app to Android, please swap out platform-specific icons with their Android +counterparts.</p> +<p>You can find a wide variety of icons for use in your app in the Android SDK.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_icons.png"> + <div class="figure-caption"> + Sampling of icons from Android, iOS and Windows Phone 7. + </div> + + </div> +</div> + +<div class="vspace size-2"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<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, +Android's tabs for view control are shown in action bars at the top of the screen instead. In +addition, Android apps may use a bottom bar to display actions on a split action bar.</p> +<p>You should follow this guideline to create a consistent experience with other apps on the Android +platform and to avoid confusion between actions and view switching on Android.</p> +<p>For more information on how to properly use action bars for view control, see +<a href="{@docRoot}design/patterns/actionbar.html">Action Bars</a>.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ios_dialers.png"> + <div class="figure-caption"> + Android dialer with tabs in an action bar vs. bottom tabs in iOS. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<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 +application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical +navigation and the navigation bar's back button for temporal navigation. For more information, +please review the <a href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern.</p> +<p>Follow this guideline to provide a consistent navigation experience across the platform.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ios_galleries.png"> + <div class="figure-caption"> + Android action bar with up caret vs. iOS labeled "Back" button. + </div> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + +<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 +the user to drill deeper into additional content.</p> +<p>Android does not use such indicators on drill-down line items. Avoid them to stay consistent with +the platform and in order to not have the user guess as to what the meaning of those carets may be.</p> + + </div> + <div class="layout-content-col span-8"> + + <img src="{@docRoot}design/media/migrating_ios_settings.png"> + <div class="figure-caption"> + Android settings without right-pointing carets in line items vs. iOS settings. + </div> + + </div> +</div> + +<h2 id="device-independence">Device Independence</h2> + +<p>Remember that your app will run on a wide variety of different screen sizes. Create visual assets +for different screen sizes and densities and make use of concepts such as multi-pane layouts to +appropriately scale your UI on different device form factors.</p> +<p>For more information, read <a href="{@docRoot}design/style/devices-displays.html">Devices and Displays</a> as +well as <a href="{@docRoot}design/patterns/multi-pane-layouts.html">Multi-pane Layouts</a> in this design guide.</p> diff --git a/docs/html/design/patterns/selection.html b/docs/html/design/patterns/selection.html deleted file mode 100644 index 44c6a84..0000000 --- a/docs/html/design/patterns/selection.html +++ /dev/null @@ -1,257 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Selection - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Selection</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<p>Android 3.0 introduced the <em>long press</em> gesture—that is, a touch that's held in the same -position for a moment—as the global gesture to select data. This affects the way you should -handle multi-select and contextual actions in your apps.</p> - -<div class="vspace size-1"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<h4>What has changed?</h4> -<p>In previous versions of Android, the long press gesture was universally used to display contextual -actions for a given data item in a contextual menu.</p> -<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining -contextual actions and selection management functions for selected data into a new element called -the contextual action bar (CAB).</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/selection_context_menu.png"> - <div class="figure-caption"> - Traditional use of the long press gesture to show contextual menus. - </div> - - </div> -</div> - -<h4>Using the contextual action bar (CAB)</h4> -<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data -is selected. It appears after the user long presses on a selectable data item.</p> - -<img src="../static/content/selection_cab_big.png"> - -<div class="vspace size-1"> </div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<p>From here the user can:</p> -<ul> -<li>Select additional data items by touching them.</li> -<li>Trigger an action from the CAB that applies to all highlighted 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> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/selection_cab_example.png"> - - </div> -</div> - -<div class="layout-content-row"> - <div class="layout-content-col span-6"> - -<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 -pattern</a> to decide which items to surface at the top level and which to move to the -action overflow.</p> -<h4>Dynamically adjust CAB actions</h4> -<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to -the selection. Actions that apply to a single selected data item don't necessarily apply to multiple -selected data items of the same kind.</p> - - </div> - <div class="layout-content-col span-7"> - - <img src="../static/content/selection_adjusting_actions.png"> - <div class="figure-caption"> - Adjusting actions in the CAB as additional items are selected. - </div> - - </div> -</div> - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Whenever your app supports the selection of multiple data items, make use of the contextual action - bar (CAB).</p> -</li> -<li> -<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional - contextual menus.</p> -</li> -<li> -<p>If you don't support multi-selection within a list, long press should do nothing.</p> -</li> -<li> -<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions - inside your app's action bar.</p> -</li> -</ul> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/selection.jd b/docs/html/design/patterns/selection.jd new file mode 100644 index 0000000..e3ee90e --- /dev/null +++ b/docs/html/design/patterns/selection.jd @@ -0,0 +1,100 @@ +page.title=Selection +@jd:body + +<p>Android 3.0 introduced the <em>long press</em> gesture—that is, a touch that's held in the same +position for a moment—as the global gesture to select data. This affects the way you should +handle multi-select and contextual actions in your apps.</p> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<h4>What has changed?</h4> +<p>In previous versions of Android, the long press gesture was universally used to display contextual +actions for a given data item in a contextual menu.</p> +<p>This pattern changed with Android 3.0. The long press gesture is now used to select data, combining +contextual actions and selection management functions for selected data into a new element called +the contextual action bar (CAB).</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/selection_context_menu.png"> + <div class="figure-caption"> + Traditional use of the long press gesture to show contextual menus. + </div> + + </div> +</div> + +<h4>Using the contextual action bar (CAB)</h4> +<p>The selection CAB is a temporary action bar that overlays your app's current action bar while data +is selected. It appears after the user long presses on a selectable data item.</p> + +<img src="{@docRoot}design/media/selection_cab_big.png"> + +<div class="vspace size-1"> </div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<p>From here the user can:</p> +<ul> +<li>Select additional data items by touching them.</li> +<li>Trigger an action from the CAB that applies to all highlighted 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> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/selection_cab_example.png"> + + </div> +</div> + +<div class="layout-content-row"> + <div class="layout-content-col span-6"> + +<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 +pattern</a> to decide which items to surface at the top level and which to move to the +action overflow.</p> +<h4>Dynamically adjust CAB actions</h4> +<p>In most cases you need to adjust the actions in the CAB dynamically as the user adds more items to +the selection. Actions that apply to a single selected data item don't necessarily apply to multiple +selected data items of the same kind.</p> + + </div> + <div class="layout-content-col span-7"> + + <img src="{@docRoot}design/media/selection_adjusting_actions.png"> + <div class="figure-caption"> + Adjusting actions in the CAB as additional items are selected. + </div> + + </div> +</div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Whenever your app supports the selection of multiple data items, make use of the contextual action + bar (CAB).</p> +</li> +<li> +<p>Reserve the long press gesture for selection exclusively. Don't use it to display traditional + contextual menus.</p> +</li> +<li> +<p>If you don't support multi-selection within a list, long press should do nothing.</p> +</li> +<li> +<p>Plan the actions you want to display inside of a CAB in the same way you would plan the actions + inside your app's action bar.</p> +</li> +</ul> diff --git a/docs/html/design/patterns/swipe-views.html b/docs/html/design/patterns/swipe-views.html deleted file mode 100644 index acc9f39..0000000 --- a/docs/html/design/patterns/swipe-views.html +++ /dev/null @@ -1,231 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title> - -Android Design - Swipe Views - </title> - <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic"> - <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css"> - <link rel="stylesheet" href="../static/default.css"> - - </head> - <body> - - <div id="page-container"> - - <div id="page-header"><a href="../index.html">Android Design</a></div> - - <div id="main-row"> - - <ul id="nav"> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../index.html">Get Started</a></div> - <ul> - <li><a href="../get-started/creative-vision.html">Creative Vision</a></li> - <li><a href="../get-started/principles.html">Design Principles</a></li> - <li><a href="../get-started/ui-overview.html">UI Overview</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../style/index.html">Style</a></div> - <ul> - <li><a href="../style/devices-displays.html">Devices and Displays</a></li> - <li><a href="../style/themes.html">Themes</a></li> - <li><a href="../style/touch-feedback.html">Touch Feedback</a></li> - <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li> - <li><a href="../style/typography.html">Typography</a></li> - <li><a href="../style/color.html">Color</a></li> - <li><a href="../style/iconography.html">Iconography</a></li> - <li><a href="../style/writing.html">Writing Style</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div> - <ul> - <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li> - <li><a href="../patterns/gestures.html">Gestures</a></li> - <li><a href="../patterns/app-structure.html">App Structure</a></li> - <li><a href="../patterns/navigation.html">Navigation</a></li> - <li><a href="../patterns/actionbar.html">Action Bar</a></li> - <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li> - <li><a href="../patterns/swipe-views.html">Swipe Views</a></li> - <li><a href="../patterns/selection.html">Selection</a></li> - <li><a href="../patterns/notifications.html">Notifications</a></li> - <li><a href="../patterns/compatibility.html">Compatibility</a></li> - <li><a href="../patterns/pure-android.html">Pure Android</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div> - <ul> - <li><a href="../building-blocks/tabs.html">Tabs</a></li> - <li><a href="../building-blocks/lists.html">Lists</a></li> - <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li> - <li><a href="../building-blocks/scrolling.html">Scrolling</a></li> - <li><a href="../building-blocks/spinners.html">Spinners</a></li> - <li><a href="../building-blocks/buttons.html">Buttons</a></li> - <li><a href="../building-blocks/text-fields.html">Text Fields</a></li> - <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li> - <li><a href="../building-blocks/progress.html">Progress & Activity</a></li> - <li><a href="../building-blocks/switches.html">Switches</a></li> - <li><a href="../building-blocks/dialogs.html">Dialogs</a></li> - <li><a href="../building-blocks/pickers.html">Pickers</a></li> - </ul> - </li> - - <li class="nav-section"> - <div class="nav-section-header empty"><a href="../downloads/index.html">Downloads</a></div> - </li> - - <li> - <div id="back-dac-section"><a href="../../index.html">Developers</a></div> - </li> - - </ul> - - <div id="content"> - - - <div class="layout-content-row content-header"> - <div class="layout-content-col span-9"> - <h2>Swipe Views</h2> - </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - - - -<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 -allow the user to efficiently move from item to item using a simple gesture and thereby make -browsing and consuming data a more fluent experience.</p> -<h2 id="detail-views">Swiping Between Detail Views</h2> - -<p>An app's data is often organized in a master/detail relationship: The user can view a list of -related data items, such as images, chats, or emails, and then pick one of the items to see the -detail contents in a separate screen.</p> - -<img src="../static/content/swipe_views.png"> -<div class="figure-caption"> - Master (left) and detail (right) views. -</div> - -<p>On a phone, since the master and detail are on separate screens, this typically requires the user to -jump back and forth between the list and the detail view, aka "pogo-sticking".</p> -<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by -using the swipe gesture to navigate to the next/previous detail view.</p> - -<img src="../static/content/swipe_views2.png"> -<div class="figure-caption"> - Navigating between consecutive Email messages using the swipe gesture. -</div> - -<h2 id="between-tabs">Swiping Between Tabs</h2> - -<div class="layout-content-row"> - <div class="layout-content-col span-5"> - - <div class="framed-galaxynexus-port-span-5"> - <video class="play-on-hover" autoplay> - <source src="../static/content/swipe_tabs.mp4" type="video/mp4"> - <source src="../static/content/swipe_tabs.webm" type="video/webm"> - <source src="../static/content/swipe_tabs.ogv" type="video/ogg"> - </video> - </div> - <div class="figure-caption"> - People app with swipe gesture navigation between top-level screens. - <div class="video-instructions"> </div> - </div> - - </div> - <div class="layout-content-col span-8"> - -<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> -<div class="vspace size-2"> </div> - -<h2 id="checklist">Checklist</h2> - -<ul> -<li> -<p>Use swipe to quickly navigate between detail views or tabs.</p> -</li> -<li> -<p>Transition between the views as the user performs the swipe gesture. Do not wait for the - gesture to complete and then transition between views.</p> -</li> -<li> -<p>If you used buttons in the past for previous/next navigation, replace them with - the swipe gesture.</p> -</li> -<li> -<p>Consider adding contextual information in your detail view that informs the user about the - relative list position of the currently visible item.</p> -</li> -</ul> - - </div> -</div> - - - - - <div class="layout-content-row content-footer"> - <div class="paging-links layout-content-col span-9"> </div> - <div class="paging-links layout-content-col span-4"> - <a href="#" class="prev-page-link">Previous</a> - <a href="#" class="next-page-link">Next</a> - </div> - </div> - - </div> - - </div> - - <div id="page-footer"> - - <p id="copyright"> - Except as noted, this content is licensed under - <a href="http://creativecommons.org/licenses/by/2.5/"> - Creative Commons Attribution 2.5</a>.<br> - For details and restrictions, see the - <a href="http://developer.android.com/license.html">Content License</a>. - </p> - - <p> - <a href="http://www.android.com/terms.html">Site Terms of Service</a> – - <a href="http://www.android.com/privacy.html">Privacy Policy</a> – - <a href="http://www.android.com/branding.html">Brand Guidelines</a> - </p> - - </div> - </div> - - <script src="../static/jquery-1.6.2.min.js"></script> - <script> - var SITE_ROOT = '../'; - </script> - <script src="../static/default.js"></script> - - - <script type="text/javascript"> - var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); - document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); - </script> - <script type="text/javascript"> - var pageTracker = _gat._getTracker("UA-5831155-1"); - pageTracker._trackPageview(); - </script> - </body> -</html> diff --git a/docs/html/design/patterns/swipe-views.jd b/docs/html/design/patterns/swipe-views.jd new file mode 100644 index 0000000..95d65dd --- /dev/null +++ b/docs/html/design/patterns/swipe-views.jd @@ -0,0 +1,74 @@ +page.title=Swipe Views +@jd:body + +<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 +allow the user to efficiently move from item to item using a simple gesture and thereby make +browsing and consuming data a more fluent experience.</p> +<h2 id="detail-views">Swiping Between Detail Views</h2> + +<p>An app's data is often organized in a master/detail relationship: The user can view a list of +related data items, such as images, chats, or emails, and then pick one of the items to see the +detail contents in a separate screen.</p> + +<img src="{@docRoot}design/media/swipe_views.png"> +<div class="figure-caption"> + Master (left) and detail (right) views. +</div> + +<p>On a phone, since the master and detail are on separate screens, this typically requires the user to +jump back and forth between the list and the detail view, aka "pogo-sticking".</p> +<p>In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by +using the swipe gesture to navigate to the next/previous detail view.</p> + +<img src="{@docRoot}design/media/swipe_views2.png"> +<div class="figure-caption"> + Navigating between consecutive Email messages using the swipe gesture. +</div> + +<h2 id="between-tabs">Swiping Between Tabs</h2> + +<div class="layout-content-row"> + <div class="layout-content-col span-5"> + + <div class="framed-galaxynexus-port-span-5"> + <video class="play-on-hover" autoplay> + <source src="{@docRoot}design/media/swipe_tabs.mp4" type="video/mp4"> + <source src="{@docRoot}design/media/swipe_tabs.webm" type="video/webm"> + <source src="{@docRoot}design/media/swipe_tabs.ogv" type="video/ogg"> + </video> + </div> + <div class="figure-caption"> + People app with swipe gesture navigation between top-level screens. + <div class="video-instructions"> </div> + </div> + + </div> + <div class="layout-content-col span-8"> + +<p>If your app uses action bar tabs, use swipe to navigate between the different views.</p> +<div class="vspace size-2"> </div> + +<h2 id="checklist">Checklist</h2> + +<ul> +<li> +<p>Use swipe to quickly navigate between detail views or tabs.</p> +</li> +<li> +<p>Transition between the views as the user performs the swipe gesture. Do not wait for the + gesture to complete and then transition between views.</p> +</li> +<li> +<p>If you used buttons in the past for previous/next navigation, replace them with + the swipe gesture.</p> +</li> +<li> +<p>Consider adding contextual information in your detail view that informs the user about the + relative list position of the currently visible item.</p> +</li> +</ul> + + </div> +</div> |