Navigation with Back and Up

Let's take one last opportunity to talk about an important app design 0:00 consideration. 0:03 Android uses a concept of back and up navigation in apps. 0:04 This section here in design docs has a lot of good information about how these work, 0:08 and how we should implement them. 0:11 Back seems pretty obvious. 0:13 Just like using the back button in a web browser, 0:14 the Android back button should step a user backwards through their app activity, or 0:17 even through other apps if they happen to enter our app from within another one. 0:21 In interactive story, that means that the back button should page the user back 0:25 through the story, which it currently doesn't do. 0:29 This is one reason I thought about using an individual activity for 0:31 each page in the story. 0:34 Had we done so, 0:36 we'd automatically be able to navigate backwards through the activities. 0:36 This is, because of the back stack I alluded to briefly earlier. 0:40 Think of our navigation as a stack of papers. 0:43 Each activity we navigate to gets added as a new paper on top of the stack. 0:45 Right now our app fires up with the MainActivity as the only 0:49 paper on the stack. 0:52 Then when we start the story we put the story activity on top of it. 0:53 Each activity that we navigate to gets added to the stack in the same way, then 0:57 we hit the back button, the top most item from the stack is removed, or popped off. 1:01 And we can keep going, all the way back to the first item. 1:06 And if we hit the back button from there, that activity is also removed, 1:08 which means we exit our app. 1:12 Android also has an up button in the app bar, but 1:14 we need to set something to make it work. 1:16 Up navigation refers to navigating up through different levels of an app. 1:18 Sometimes, the up and back button will do the same thing. 1:22 But our app is a good example where the main activity is at the first level. 1:25 And all the story pages are at a deeper level of the app. 1:29 So, tapping on the up button in the app bar should take the user 1:32 up to the main activity. 1:36 But tapping on back should take them back through pages in the story. 1:37 Let's tackle the up button first, simply, because it's easier. 1:41 To establish this hierarchical relationship between activities, 1:44 we need to set main activity as the parent of story activity. 1:48 Not in the subclass parent class sense like Java, but in our AndroidManifest. 1:51 So, here we have the activities defined, and 1:56 in story activity, let's add a new line before the ending angle bracket. 1:59 And a new attribute Android:parentActivityName. 2:03 And then we can slot MainActivity from auto complete. 2:08 Okay, let's run this to see how it looks. 2:11 Okay, so, now, start the app, go in. 2:13 And look at that we have a new button here. 2:17 So, we can go anywhere into our app. 2:19 And if we hit this up button. 2:20 There we go. 2:23 Up to the main activity again. 2:24 And here's an example of where up and back work the same way. 2:26 So, if we go in, and then hit up right away we go back and 2:29 if we do the same thing. 2:33 Go in and hit back. 2:35 We're taken right back. 2:38 Now, this is interesting. 2:39 Notice that the name persisted when we hit back, but not when we hit the up button. 2:40 I'd like the name field to be reset upon coming back to this main activity 2:45 every single time. 2:48 So, let's set that and make sure that it's always blank like this. 2:49 So, let's go back to mainactivity.java, and 2:52 the reason the name is sticking from the back button is, 2:55 because we're reusing the same instance of main activity from before. 2:57 It's not guaranteed to still be a memory, but it's pretty likely and that means that 3:01 it's displayed in the same state we left it in, with the name already entered. 3:05 All we need to do is reset the edit text to a blank value. 3:09 Now, the issue is, we can't do that here in our on create method, 3:12 because when an activity is resumed by going back to it like we just did, 3:16 it uses a different life cycle method called on resume. 3:20 We have a whole course that talks about activity life cycle, but 3:23 we can quickly fix it here. 3:27 So, below our on create method, let's add a new line and type, onResume. 3:28 And use our auto complete to drop in the method. 3:34 So, inside here, after the call to super.onResume(), 3:38 type nameField.setText, and we'll just pass in a blank value like this. 3:42 Here's a fun fact, onResume will always be called after onCreate. 3:47 This line of code will always run when the activity is first created, and 3:51 when it is resumed by the back button, just what we need. 3:55 Let's run it again to make sure. 3:59 So, now, we'll go in enter our name, start the activity. 4:02 Either we hit the back button the name is cleared out, 4:06 and just to make sure we'll start it again and hit the up button. 4:08 Okay, in the next video, we'll see how to maintain our own custom back stack for 4:12 our pages before wrapping up this course. 4:17 Here, almost there! 4:19 Power on through! 4:20 I'm proud of you! 4:22