Preview
Video Player
00:00
00:00
Navigation with Back and Up
4:23Android 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