1 page.title=Providing Ancestral and Temporal Navigation 2 parent.title=Designing Effective Navigation 3 parent.link=index.html 4 5 trainingnavtop=true 6 previous.title=Providing Descendant and Lateral Navigation 7 previous.link=descendant-lateral.html 8 next.title=Putting it All Together: Wireframing… 9 next.link=wireframing.html 10 11 @jd:body 12 13 <div id="tb-wrapper"> 14 <div id="tb"> 15 16 <h2>This lesson teaches you to:</h2> 17 <ol> 18 <li><a href="#temporal-navigation">Support Temporal Navigation: <em>Back</em></a></li> 19 <li><a href="#ancestral-navigation">Provide Ancestral Navigation: <em>Up</em> and <em>Home</em></a></li> 20 </ol> 21 22 <h2>You should also read</h2> 23 <ul> 24 <li><a href="{@docRoot}design/patterns/navigation.html">Android Design: Navigation</a></li> 25 <li><a href="{@docRoot}guide/components/tasks-and-back-stack.html">Tasks and Back Stack</a></li> 26 </ul> 27 28 </div> 29 </div> 30 31 32 <p>Now that users can navigate <a href="descendant-lateral.html">deep into</a> the application's 33 screen hierarchy, we need to provide a method for navigating up the hierarchy, to parent and 34 ancestor screens. Additionally, we should ensure that temporal navigation via the <em>Back</em> 35 button is respected to respect Android conventions.</p> 36 37 <div class="note design"> 38 <p><strong>Back/Up Navigation Design</strong></p> 39 <p>For design guidelines, read Android Design's <a 40 href="{@docRoot}design/patterns/navigation.html">Navigation</a> pattern guide.</p> 41 </div> 42 43 <h2 id="temporal-navigation">Support Temporal Navigation: <em>Back</em></h2> 44 45 <p>Temporal navigation, or navigation between historical screens, is deeply rooted in the Android 46 system. All Android users expect the <em>Back</em> button to take them to the previous screen, 47 regardless of other state. The set of historical screens is always rooted at the user's Launcher 48 application (the phone's "home" screen). That is, pressing <em>Back</em> enough times should land 49 you back at the Launcher, after which the <em>Back</em> button will do nothing.</p> 50 51 52 <img src="{@docRoot}images/training/app-navigation-ancestral-navigate-back.png" 53 alt="The Back button behavior after entering the Email app from the People (or Contacts) app" 54 id="figure-navigate-back"> 55 56 <p class="img-caption"><strong>Figure 1.</strong> The <em>Back</em> button behavior after entering 57 the Email app from the People (or Contacts) app.</p> 58 59 60 <p>Applications generally don't have to worry about managing the <em>Back</em> button themselves; 61 the system handles <a href="{@docRoot}guide/components/tasks-and-back-stack.html">tasks and 62 the <em>back stack</em></a>, or the list of previous screens, automatically. The <em>Back</em> 63 button by default simply traverses this list of screens, removing the current screen from the list 64 upon being pressed.</p> 65 66 <p>There are, however, cases where you may want to override the behavior for <em>Back</em>. For 67 example, if your screen contains an embedded web browser where users can interact with page elements 68 to navigate between web pages, you may wish to trigger the embedded browser's default <em>back</em> 69 behavior when users press the device's <em>Back</em> button. Upon reaching the beginning of the 70 browser's internal history, you should always defer to the system's default behavior for the 71 <em>Back</em> button.</p> 72 73 74 <h2 id="ancestral-navigation">Provide Ancestral Navigation: <em>Up</em> and <em>Home</em></h2> 75 76 <p>Before Android 3.0, the most common form of ancestral navigation was the <em>Home</em> metaphor. 77 This was generally implemented as a <em>Home</em> item accessible via the device's <em>Menu</em> 78 button, or a <em>Home</em> button at the top-left of the screen, usually as a component of the 79 Action Bar (<a href="{@docRoot}design/patterns/actionbar.html">pattern docs</a> at Android Design). 80 Upon selecting <em>Home</em>, the user would be taken to the screen at the top of the screen 81 hierarchy, generally known as the application's home screen.</p> 82 83 <p>Providing direct access to the application's home screen can give the user a sense of comfort and security. Regardless of where they are in the application, if they get lost in the app, they can select <em>Home</em> to arrive back at the familiar home screen.</p> 84 85 <p>Android 3.0 introduced the <em>Up</em> metaphor, which is presented in the Action Bar as a 86 substitute for the <em>Home</em> button described above. Upon tapping <em>Up</em>, the user should 87 be taken to the parent screen in the hierarchy. This navigation step is usually the previous screen 88 (as described with the <em>Back</em> button discussion above), but this is not universally the case. 89 Thus, developers must ensure that <em>Up</em> for each screen navigates to a single, predetermined 90 parent screen.</p> 91 92 93 <img src="{@docRoot}images/training/app-navigation-ancestral-navigate-up.png" 94 alt="Example behavior for UP navigation after entering the Email app from the People app" id="figure-navigate-up"> 95 96 <p class="img-caption"><strong>Figure 2.</strong> Example behavior for up navigation after entering the Email app from the People app.</p> 97 98 99 <p>In some cases, it's appropriate for <em>Up</em> to perform an action rather than navigating to a parent screen. Take for example, the Gmail application for Android 3.0-based tablets. When viewing a mail conversation while holding the device in landscape, the conversation list, as well as the conversation details are presented side-by-side. This is a form of parent-child screen grouping, as discussed in a <a href="multiple-sizes.html">previous lesson</a>. However, when viewing a mail conversation in the portrait orientation, only the conversation details are shown. The <em>Up</em> button is used to temporarily show the parent pane, which slides in from the left of the screen. Pressing the <em>Up</em> button again while the left pane is visible exits the context of the individual conversation, up to a full-screen list of conversations.</p> 100 101 <p class="note"><strong>Implementation Note:</strong> As a best practice, when implementing either 102 <em>Home</em> or <em>Up</em>, make sure to clear the back stack of any descendent screens. For 103 <em>Home</em>, the only remaining screen on the back stack should be the home screen. For 104 <em>Up</em> navigation, the current screen should be removed from the back stack, unless 105 <em>Back</em> navigates across screen hierarchies. You can use the {@link 106 android.content.Intent#FLAG_ACTIVITY_CLEAR_TOP} and {@link 107 android.content.Intent#FLAG_ACTIVITY_NEW_TASK} intent flags together to achieve this.</p> 108 109 <p>In the last lesson, we apply the concepts discussed in all of the lessons so far to create interaction design wireframes for our example news application.</p> 110
