Gitiles
Code Review Sign In
gerrit.witaqua.org / frameworks_base / 06a864413f03627ba7671d1c19ae114e3afaad4b / . / docs / html / design / patterns / navigation.html
blob: aabfc39c837382506bca02cd1e2e8a2b2b3023c4 [file] [log] [blame]
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title>
6
7Android Design - Navigation with Back and Up
8 </title>
9 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
10 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic">
11 <link rel="stylesheet" href="../static/yui-3.3.0-reset-min.css">
12 <link rel="stylesheet" href="../static/default.css">
13
14 </head>
15 <body>
16
17 <div id="page-container">
18
19 <div id="page-header"><a href="../index.html">Android Design</a></div>
20
21 <div id="main-row">
22
23 <ul id="nav">
24
25 <li class="nav-section">
26 <div class="nav-section-header"><a href="../index.html">Get Started</a></div>
27 <ul>
28 <li><a href="../get-started/creative-vision.html">Creative Vision</a></li>
29 <li><a href="../get-started/principles.html">Design Principles</a></li>
30 <li><a href="../get-started/ui-overview.html">UI Overview</a></li>
31 </ul>
32 </li>
33
34 <li class="nav-section">
35 <div class="nav-section-header"><a href="../style/index.html">Style</a></div>
36 <ul>
37 <li><a href="../style/devices-displays.html">Devices and Displays</a></li>
38 <li><a href="../style/themes.html">Themes</a></li>
39 <li><a href="../style/touch-feedback.html">Touch Feedback</a></li>
40 <li><a href="../style/metrics-grids.html">Metrics and Grids</a></li>
41 <li><a href="../style/typography.html">Typography</a></li>
42 <li><a href="../style/color.html">Color</a></li>
43 <li><a href="../style/iconography.html">Iconography</a></li>
44 <li><a href="../style/writing.html">Writing Style</a></li>
45 </ul>
46 </li>
47
48 <li class="nav-section">
49 <div class="nav-section-header"><a href="../patterns/index.html">Patterns</a></div>
50 <ul>
51 <li><a href="../patterns/new-4-0.html">New in Android 4.0</a></li>
52 <li><a href="../patterns/gestures.html">Gestures</a></li>
53 <li><a href="../patterns/app-structure.html">App Structure</a></li>
54 <li><a href="../patterns/navigation.html">Navigation</a></li>
55 <li><a href="../patterns/actionbar.html">Action Bar</a></li>
56 <li><a href="../patterns/multi-pane-layouts.html">Multi-pane Layouts</a></li>
57 <li><a href="../patterns/swipe-views.html">Swipe Views</a></li>
58 <li><a href="../patterns/selection.html">Selection</a></li>
59 <li><a href="../patterns/notifications.html">Notifications</a></li>
60 <li><a href="../patterns/compatibility.html">Compatibility</a></li>
61 <li><a href="../patterns/pure-android.html">Pure Android</a></li>
62 </ul>
63 </li>
64
65 <li class="nav-section">
66 <div class="nav-section-header"><a href="../building-blocks/index.html">Building Blocks</a></div>
67 <ul>
68 <li><a href="../building-blocks/tabs.html">Tabs</a></li>
69 <li><a href="../building-blocks/lists.html">Lists</a></li>
70 <li><a href="../building-blocks/grid-lists.html">Grid Lists</a></li>
71 <li><a href="../building-blocks/scrolling.html">Scrolling</a></li>
72 <li><a href="../building-blocks/spinners.html">Spinners</a></li>
73 <li><a href="../building-blocks/buttons.html">Buttons</a></li>
74 <li><a href="../building-blocks/text-fields.html">Text Fields</a></li>
75 <li><a href="../building-blocks/seek-bars.html">Seek Bars</a></li>
76 <li><a href="../building-blocks/progress.html">Progress &amp; Activity</a></li>
77 <li><a href="../building-blocks/switches.html">Switches</a></li>
78 <li><a href="../building-blocks/dialogs.html">Dialogs</a></li>
79 <li><a href="../building-blocks/pickers.html">Pickers</a></li>
80 </ul>
81 </li>
82
83 <li>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]84 <div id="back-dac-section"><a href="../../index.html">Developers</a></div>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]85 </li>
86
87 </ul>
88
89 <div id="content">
90
91
92 <div class="layout-content-row content-header">
93 <div class="layout-content-col span-9">
94 <h2>Navigation with Back and Up</h2>
95 </div>
96 <div class="paging-links layout-content-col span-4">
97 <a href="#" class="prev-page-link">Previous</a>
98 <a href="#" class="next-page-link">Next</a>
99 </div>
100 </div>
101
102
103
104
105<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
106users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
107introduced significant changes to the global navigation behavior. Thoughtfully following the
108guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
109<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
110app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
111the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
112
113<img src="../static/content/navigation_with_back_and_up.png">
114
115<h2>Up vs. Back</h2>
116<p>The Up button is used to navigate within an application based on the hierarchical relationships
117between screens. For instance, if screen A displays a list of items, and selecting an item leads to
118screen B (which presents that item in more detail), then screen B should offer an Up button that
119returns to screen A.</p>
120<p>If a screen is the topmost one in an app (i.e. the home of the app), it should not present an Up
121button.</p>
122<p>The system Back key is used to navigate based on the history of screens the user has recently seen,
123in reverse chronological order&mdash;in effect, the temporal relationships between screens.</p>
124<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
125the Back key will have the same result as pressing an Up button -- this is a common occurrence.
126However, unlike the Up button, which ensures the user remains within your app, the Back key can
127return the user to the Home screen, or even to a different application.</p>
128
129<img src="../static/content/navigation_up_vs_back_gmail.png">
130
131<p>The Back key also supports a few behaviors not directly tied to screen-to-screen navigation:</p>
132<ul>
133<li>Back dismisses floating windows (dialogs, popups)</li>
134<li>Back dismisses contextual action bars, and remove highlight from selected items</li>
135<li>Back hides the onscreen keyboard (IME)</li>
136</ul>
137<h2>Navigation Within Your App</h2>
138<h4>Navigating to screens with multiple entry points</h4>
139<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
140from multiple entry points&mdash;e.g., a settings screen which can be navigated to from any screen
141in your app. In this case, the Up button should choose to return to the referring screen, behaving
142identically to Back.</p>
143<h4>Changing view within a screen</h4>
144<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
145in the same place within the app's hierarchy, and no new navigation history is created.</p>
146<p>Examples of such view changes are:</p>
147<ul>
148<li>Switching views using tabs and/or left-and-right swipes</li>
149<li>Switching views using a dropdown (aka collapsed tabs)</li>
150<li>Filtering a list</li>
151<li>Sorting a list</li>
152<li>Changing display characteristics (e.g. zooming)</li>
153</ul>
154<h4>Navigating between sibling screens</h4>
155<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
156often desirable to support direction navigation from that item to another one which precedes or
157follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
158to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
159navigation does not change the behavior of Up or Back.</p>
160
161<img src="../static/content/navigation_between_siblings_gmail.png">
162
163<p>However, a notable exception to this occurs when browsing between "related" detail views not tied
164together by the referring list&mdash;for example, when browsing in the Market between apps from
165the same developer, or albums by the same artist. In these cases, following each link does create
166history, causing the Back button to step through each screen of related content which has been
167viewed. Up should continue to bypass these related screens and navigate to the most recently viewed
168container screen.</p>
169
170<img src="../static/content/navigation_between_siblings_market1.png">
171
172<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
173view. If we extend our Market sample from above, imagine the user has navigated from the last Book
174viewed to the details for the Movie adaptation. In that case, Up can return to a container (Movies)
175which the user had not previously navigated through.</p>
176
177<img src="../static/content/navigation_between_siblings_market2.png">
178
179<h2>Navigation From Outside Your App</h2>
180<p>There are two categories of navigation from outside your app to screens deep within the app's
181hierarchy:</p>
182<ul>
183<li>App-to-app navigation, such as via intent completion.</li>
184<li>System-to-app navigation, such as via notifications and home screen widgets.</li>
185</ul>
186<p>Gmail provides examples of each of these. For app-to-app navigation, a "Share" intent goes directly
187to the compose screen. For system-to-app navigation, both a new message notification and a home
188screen widget can bypass the Inbox screen, taking the user directly to a conversation view.</p>
189<h4>App-to-app navigation</h4>
190<p>When navigating deep into your app's hierarchy directly from another app via an intent, Back will
191return to the referring app.</p>
192<p>The Up button is handled is follows:
193- If the destination screen is typically reached from one particular screen within your app, Up
194 should navigate to that screen.
195- Otherwise, Up should navigate to the topmost ("Home") screen of your app.</p>
196<p>For example, after choosing to share a book being view in Market, the user navigates directly to the
197Gmail's compose screen. From there, Up returns to the Inbox (which happens to be both the typical
198referrer to compose, as well as the topmost screen of the app), while Back returns to Market.</p>
199
200<img src="../static/content/navigation_from_outside_up.png">
201
202<h4>System-to-app navigation</h4>
203<p>If the your app was reached via the system mechanisms of notifications or home screen widgets, Up
204behaves as described for app-to-app navigation, above.</p>
205<p>For the Back key, you should make navigation more predictably by inserting into the task's back
206stack the complete upward navigation path to the app's topmost screen. This way, a user who has
207forgotten how they entered your app can safely navigate to the app's topmost screen before exiting
208it.</p>
209<p>For example, Gmail's Home screen widget has a button for diving directly to its compose screen.
210After following that path, the Back key first returns to the Inbox, and from there continues to
211Home.</p>
212
213<img src="../static/content/navigation_from_outside_back.png">
214
215
216
217
218
219
220 <div class="layout-content-row content-footer">
221 <div class="paging-links layout-content-col span-9">&nbsp;</div>
222 <div class="paging-links layout-content-col span-4">
223 <a href="#" class="prev-page-link">Previous</a>
224 <a href="#" class="next-page-link">Next</a>
225 </div>
226 </div>
227
228 </div>
229
230 </div>
231
232 <div id="page-footer">
233
234 <p id="copyright">
235 Except as noted, this content is licensed under
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]236 <a href="http://creativecommons.org/licenses/by/2.5/">
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]237 Creative Commons Attribution 2.5</a>.<br>
238 For details and restrictions, see the
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]239 <a href="http://developer.android.com/license.html">Content License</a>.
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]240 </p>
241
242 <p>
Roman Nurikc894fb72012-01-10 23:59:20 -0800[diff] [blame]243 <a href="http://www.android.com/terms.html">Site Terms of Service</a> &ndash;
244 <a href="http://www.android.com/privacy.html">Privacy Policy</a> &ndash;
245 <a href="http://www.android.com/branding.html">Brand Guidelines</a>
Roman Nurik73790462011-12-22 16:18:19 -0800[diff] [blame]246 </p>
247
248 </div>
249 </div>
250
251 <script src="../static/jquery-1.6.2.min.js"></script>
252 <script>
253 var SITE_ROOT = '../';
254 </script>
255 <script src="../static/default.js"></script>
256
257
258 <script type="text/javascript">
259 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
260 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
261 </script>
262 <script type="text/javascript">
263 var pageTracker = _gat._getTracker("UA-5831155-1");
264 pageTracker._trackPageview();
265 </script>
266 </body>
267</html>