Navigation with Back and Up4:23 with Ben Jakuben
Android uses the concept of "back" and "up" navigation in apps. Let's take one last opportunity to talk about this important app design consideration and how we should handle both methods.
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
You need to sign up for Treehouse in order to download course files.Sign up