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—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—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—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—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—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—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