blob: d2c35d8583fe4f1174d8ea95e9b26e6c97ab63d9 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Android Design - Navigation with Back and Up
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href=",medium,thin,italic,mediumitalic">
<link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
<link rel="stylesheet" href="../static/default.css">
<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>
<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>
<li class="nav-section">
<div class="nav-section-header"><a href="../style/index.html">Style</a></div>
<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>
<li class="nav-section">
<div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
<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>
<li class="nav-section">
<div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
<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 &amp; 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>
<div id="back-dac-section"><a href="../../index.html" target="_blank">Developers</a></div>
<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 class="paging-links layout-content-col span-4">
<a href="#" class="prev-page-link">Previous</a>
<a href="#" class="next-page-link">Next</a>
<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
introduced significant changes to the global navigation behavior. Thoughtfully following the
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>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
<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
in reverse chronological order&mdash;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>
<li>Back dismisses floating windows (dialogs, popups)</li>
<li>Back dismisses contextual action bars, and remove highlight from selected items</li>
<li>Back hides the onscreen keyboard (IME)</li>
<h2>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&mdash;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>
<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>
<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&mdash;for example, when browsing in the Market 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 Market 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>Navigation From Outside Your App</h2>
<p>There are two categories of navigation from outside your app to screens deep within the app's
<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>
<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 is 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 view in Market, the user navigates directly to the
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 Market.</p>
<img src="../static/content/navigation_from_outside_up.png">
<h4>System-to-app navigation</h4>
<p>If the 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
<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
<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">&nbsp;</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 id="page-footer">
<p id="copyright">
Except as noted, this content is licensed under
<a href="" target="_blank">
Creative Commons Attribution 2.5</a>.<br>
For details and restrictions, see the
<a href="" target="_blank">Content License</a>.
<a href="" target="_blank">Site Terms of Service</a> &ndash;
<a href="" target="_blank">Privacy Policy</a> &ndash;
<a href="" target="_blank">Brand Guidelines</a>
<script src="../static/jquery-1.6.2.min.js"></script>
var SITE_ROOT = '../';
<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 + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5831155-1");