• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Navigation with Back and Up
2@jd:body
3
4<p>Consistent navigation is an essential component of the overall user experience. Few things frustrate
5users more than basic navigation that behaves in inconsistent and unexpected ways. Android 3.0
6introduced significant changes to the global navigation behavior. Thoughtfully following the
7guidelines for Back and Up will make your app's navigation predictable and reliable for your users.</p>
8<p>Android 2.3 and earlier relied upon the system <em>Back</em> button for supporting navigation within an
9app. With the introduction of action bars in Android 3.0, a second navigation mechanism appeared:
10the <em>Up</em> button, consisting of the app icon and a left-point caret.</p>
11
12<img src="{@docRoot}design/media/navigation_with_back_and_up.png">
13
14<h2 id="up-vs-back">Up vs. Back</h2>
15
16<p>The Up button is used to navigate within an app based on the hierarchical relationships
17between screens. For instance, if screen A displays a list of items, and selecting an item leads to
18screen B (which presents that item in more detail), then screen B should offer an Up button that
19returns to screen A.</p>
20<p>If a screen is the topmost one in an app (that is, the app's home), it should not present an Up
21button.</p>
22
23<p>The system Back button is used to navigate, in reverse chronological order, through the history
24of screens the user has recently worked with. It is generally based on the temporal relationships
25between screens, rather than the app's hierarchy.</p>
26
27<p>When the previously viewed screen is also the hierarchical parent of the current screen, pressing
28the Back button has the same result as pressing an Up button&mdash;this is a common
29occurrence. However, unlike the Up button, which ensures the user remains within your app, the Back
30button can return the user to the Home screen, or even to a different app.</p>
31
32<img src="{@docRoot}design/media/navigation_up_vs_back_gmail.png">
33
34<p>The Back button also supports a few behaviors not directly tied to screen-to-screen navigation:
35</p>
36<ul>
37<li>Dismisses floating windows (dialogs, popups)</li>
38<li>Dismisses contextual action bars, and removes the highlight from the selected items</li>
39<li>Hides the onscreen keyboard (IME)</li>
40</ul>
41<h2 id="within-app">Navigation Within Your App</h2>
42
43<h4>Navigating to screens with multiple entry points</h4>
44<p>Sometimes a screen doesn't have a strict position within the app's hierarchy, and can be reached
45from multiple entry points&mdash;such as a settings screen that can be reached from any other screen
46in your app. In this case, the Up button should choose to return to the referring screen, behaving
47identically to Back.</p>
48<h4>Changing view within a screen</h4>
49<p>Changing view options for a screen does not change the behavior of Up or Back: the screen is still
50in the same place within the app's hierarchy, and no new navigation history is created.</p>
51<p>Examples of such view changes are:</p>
52<ul>
53<li>Switching views using tabs and/or left-and-right swipes</li>
54<li>Switching views using a dropdown (aka collapsed tabs)</li>
55<li>Filtering a list</li>
56<li>Sorting a list</li>
57<li>Changing display characteristics (such as zooming)</li>
58</ul>
59<h4>Navigating between sibling screens</h4>
60<p>When your app supports navigation from a list of items to a detail view of one of those items, it's
61often desirable to support direction navigation from that item to another one which precedes or
62follows it in the list. For example, in Gmail, it's easy to swipe left or right from a conversation
63to view a newer or older one in the same Inbox. Just as when changing view within a screen, such
64navigation does not change the behavior of Up or Back.</p>
65
66<img src="{@docRoot}design/media/navigation_between_siblings_gmail.png">
67
68<p>However, a notable exception to this occurs when browsing between related detail views not tied
69together by the referring list&mdash;for example, when browsing in the Play Store between apps from
70the same developer, or albums by the same artist. In these cases, following each link does create
71history, causing the Back button to step through each previously viewed screen. Up should continue
72to bypass these related screens and navigate to the most recently viewed container screen.</p>
73
74<img src="{@docRoot}design/media/navigation_between_siblings_market1.png">
75
76<p>You have the ability to make the Up behavior even smarter based on your knowledge of detail
77view. Extending the Play Store example from above, imagine the user has navigated from the last
78Book viewed to the details for the Movie adaptation. In that case, Up can return to a container
79(Movies) which the user hasn't previously navigated through.</p>
80
81<img src="{@docRoot}design/media/navigation_between_siblings_market2.png">
82
83<h2 id="into-your-app">Navigation into Your App via Home Screen Widgets and Notifications</h2>
84
85<p>You can use Home screen widgets or notifications to help your users navigate directly to screens
86deep within your app's hierarchy. For example, Gmail's Inbox widget and new message notification can
87both bypass the Inbox screen, taking the user directly to a conversation view.</p>
88
89<p>For both of these cases, handle the Up button as follows:</p>
90
91<ul>
92<li><em>If the destination screen is typically reached from one particular screen within your
93app</em>, Up should navigate to that screen.</li>
94<li><em>Otherwise</em>, Up should navigate to the topmost ("Home") screen of your app.</li>
95</ul>
96
97<p>In the case of the Back button, you should make navigation more predictable by inserting into the
98task's back stack the complete upward navigation path to the app's topmost screen. This allows users
99who've forgotten how they entered your app to navigate to the app's topmost screen before
100exiting.</p>
101
102<p>As an example, Gmail's Home screen widget has a button for diving directly to its compose
103screen. Up or Back from the compose screen would take the user to the Inbox, and from there the
104Back button continues to Home.</p>
105
106<img src="{@docRoot}design/media/navigation_from_outside_back.png">
107
108<h4>Indirect notifications</h4>
109
110<p>When your app needs to present information about multiple events simultaneously, it can use a
111single notification that directs the user to an interstitial screen. This screen summarizes these
112events, and provides paths for the user to dive deeply into the app. Notifications of this style are
113called <em>indirect notifications</em>.</p>
114
115<p>Unlike standard (direct) notifications, pressing Back from an indirect notification's
116interstitial screen returns the user to the point the notification was triggered from&mdash;no
117additional screens are inserted into the back stack. Once the user proceeds into the app from its
118interstitial screen, Up and Back behave as for standard notifications, as described above:
119navigating within the app rather than returning to the interstitial.</p>
120
121<p>For example, suppose a user in Gmail receives an indirect notification from Calendar. Touching
122this notification opens the interstitial screen, which displays reminders for several different
123events. Touching Back from the interstitial returns the user to Gmail. Touching on a particular
124event takes the user away from the interstitial and into the full Calendar app to display details of
125the event. From the event details, Up and Back navigate to the top-level view of Calendar.</p>
126
127<img src="{@docRoot}design/media/navigation_indirect_notification.png">
128
129<h4>Pop-up notifications</h4>
130
131<p><em>Pop-up notifications</em> bypass the notification drawer, instead appearing directly in
132front of the user. They are rarely used, and <strong>should be reserved for occasions where a timely
133response is required and the interruption of the user's context is necessary</strong>. For example,
134Talk uses this style to alert the user of an invitation from a friend to join a video chat, as this
135invitation will automatically expire after a few seconds.</p>
136
137<p>In terms of navigation behavior, pop-up notifications closely follow the behavior of an indirect
138notification's interstitial screen. Back dismisses the pop-up notification. If the user navigates
139from the pop-up into the notifying app, Up and Back follow the rules for standard notifications,
140navigating within the app.</p>
141
142<img src="{@docRoot}design/media/navigation_popup_notification.png">
143
144<h2 id="between-apps">Navigation Between Apps</h2>
145
146<p>One of the fundamental strengths of the Android system is the ability for apps to activate each
147other, giving the user the ability to navigate directly from one app into another. For example, an
148app that needs to capture a photo can activate the Camera app, which will return the photo
149to the referring app. This is a tremendous benefit to both the developer, who can easily leverage
150code from other apps, and the user, who enjoys a consistent experience for commonly performed
151actions.</p>
152
153<p>To understand app-to-app navigation, it's important to understand the Android framework behavior
154discussed below.</p>
155
156<h4>Activities, tasks, and intents</h4>
157
158<p>In Android, an <strong>activity</strong> is an application component that defines a screen of
159information and all of the associated actions the user can perform. Your app is a collection of
160activities, consisting of both the activities you create and those you re-use from other apps.</p>
161
162<p>A <strong>task</strong> is the sequence of activities a user follows to accomplish a goal. A
163single task can make use of activities from just one app, or may draw on activities from a number
164of different apps.</p>
165
166<p>An <strong>intent</strong> is a mechanism for one app to signal it would like another
167app's assistance in performing an action. An app's activities can indicate which intents
168they can respond to. For common intents such as "Share", the user may have many apps installed
169that can fulfill that request.</p>
170
171<h4>Example: navigating between apps to support sharing</h4>
172
173<p>To understand how activities, tasks, and intents work together, consider how one app allows users
174to share content by using another app. For example, launching the Play Store app from Home begins
175new Task A (see figure below). After navigating through the Play Store and touching a promoted book
176to see its details, the user remains in the same task, extending it by adding activities. Triggering
177the Share action prompts the user with a dialog listing each of the activities (from different apps)
178which have registered to handle the Share intent.</p>
179
180<img src="{@docRoot}design/media/navigation_between_apps_inward.png">
181
182<p>When the user elects to share via Gmail, Gmail's compose activity is added as a continuation of
183Task A&mdash;no new task is created. If Gmail had its own task running in the background, it would
184be unaffected.</p>
185
186<p>From the compose activity, sending the message or touching the Back button returns the user to
187the book details activity. Subsequent touches of Back continue to navigate back through the Play
188Store, ultimately arriving at Home.</p>
189
190<img src="{@docRoot}design/media/navigation_between_apps_back.png">
191
192<p>However, by touching Up from the compose activity, the user indicates a desire to remain within
193Gmail. Gmail's conversation list activity appears, and a new Task B is created for it. New tasks are
194always rooted to Home, so touching Back from the conversation list returns there.</p>
195
196<img src="{@docRoot}design/media/navigation_between_apps_up.png">
197
198<p>Task A persists in the background, and the user may return to it later (for example, via the
199Recents screen). If Gmail already had its own task running in the background, it would be replaced
200with Task B&mdash;the prior context is abandoned in favor of the user's new goal.</p>
201
202<p>When your app registers to handle intents with an activity deep within the app's hierarchy,
203refer to <a href="#into-your-app">Navigation into Your App via Home Screen Widgets and
204Notifications</a> for guidance on how to specify Up navigation.</p>
205