Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
When reusing Activities or Views, we need to make sure that users can navigate backwards through our app in an expected manner. Often this means maintaining a custom back stack, where we control what is displayed when they hit the Back button.
Documentation
- Guide: Navigation with Back and Up
- Stack API (Java collection)
- Activity.onBackPressed()
Another Solution
Check out this Community post for an alternative solution for managing the stack found by a Treehouse student.
GitHub Repo
-
0:00
We are so close to being done with this app.
-
0:03
All we have left is to figure out how to manually create our own back stack.
-
0:07
This is one of the headaches about reusing views in an activity like we are, but
-
0:11
I think it's worth it.
-
0:12
In our case it's kind of easy.
-
0:14
We're using ints to control the pages being loaded.
-
0:17
All we need to do is keep track of the ints we use in our own stack and
-
0:20
we will be set.
-
0:21
Lucky for us, Java has a great stack class.
-
0:24
Let's create a new member variable and see how it works.
-
0:26
So let's switch to store activity, got to make sure that we're in the right one.
-
0:30
And up here at the top, let's create a new private stack.
-
0:35
And it's a generic, so we can't use int, that's a primitive type,
-
0:38
remember we've got to use the full blown object.
-
0:41
So we can type Integer like this with a capital I.
-
0:43
And let's name this pageStack.
-
0:47
And we can set it right here.
-
0:48
Let's set this equal to a new Stack type Integer, and there we go.
-
0:55
So adding items to a stack, like adding a piece of paper on a stack,
-
0:58
is called pushing something onto the stack.
-
1:01
So in this example every time we load a page,
-
1:03
we want to push that page number onto this new stack.
-
1:07
So let's go down to load page.
-
1:10
And here the very first thing we can do is add a new line.
-
1:14
And from our new pageStack variable,
-
1:17
we want to push the integer, which in this case is pageNumber.
-
1:23
All right, easy enough.
-
1:24
So this is going to build up a stack of the pages as we go through them.
-
1:28
Now, it's time for the opposite.
-
1:29
When we remove something from a stack, it's called popping from a stack.
-
1:33
And we want to pop from the stack each time the user taps on the back button.
-
1:37
When the back button is pressed, a method called onBackPressed is called, and
-
1:41
we can override that to add our own custom code.
-
1:44
So let's add that down at the bottom here.
-
1:45
It's an activity method.
-
1:47
So at the very bottom before the last curly brace,
-
1:50
let's type onBackPressed and Enter for autocomplete.
-
1:54
So in this case,
-
1:55
the call to super.onBackPressed will execute the normal back function.
-
2:00
If we leave it alone, it will pop or exit the current activity and
-
2:03
go back to main activity, no matter which page of the story we're on.
-
2:06
We only wanna do that when we're on the very first page.
-
2:09
Lets start by popping the current page number from our page stack, pageStack.pop.
-
2:15
We don't need to know what the page number is,
-
2:18
we can just simply remove it from the top of the stack.
-
2:20
All right lets think through this a little bit more.
-
2:22
If we're on the first page of our story,
-
2:24
there will be one page number on the stack.
-
2:27
So this first line will pop it off, meaning that the stack will now be empty.
-
2:31
So we can now run a check for an empty stack like this.
-
2:34
If pageStack.isempty and now in this case,
-
2:40
we want to call super.onBackPressed, and go back to our main activity.
-
2:46
If it's not empty though,
-
2:47
here in the else block, then that means we're on a further page in our story.
-
2:51
We want to load the previous page.
-
2:54
Now this gets a little tricky.
-
2:55
If we get the previous page number and then call load page with it, then we will
-
3:00
push that same page number on to the stack again because that line we added up here
-
3:05
in load page, the very first line, you'll push the page number back on to the stack.
-
3:10
That means that we would end up with the same page number two times in a row
-
3:13
on the stack.
-
3:14
I think it's better to always push the page number in this load page method.
-
3:17
So we can work around this by popping the previous page from the stack
-
3:21
right when we call loadPage back down here.
-
3:24
So what I mean is we'll reload the page right away and for
-
3:28
the page number, we'll pop it right out stack, pageStack.pop
-
3:33
will actually return the popped int, so we can pass it right back into the loadPage.
-
3:38
This looks a little bit funny because we end up calling pop twice in a row, but
-
3:42
it's only because this second call to pop
-
3:45
will then be pushed right back on because we're reloading the page.
-
3:49
So let's review this whole thing one more time.
-
3:51
Let's say we're on page one after starting at page zero.
-
3:54
Our stack will have zero, followed by one.
-
3:57
So let's review this one more time, I review it here with comments.
-
4:00
Let's say we're on page one after starting on page zero.
-
4:04
Our stack will have zero followed by a one.
-
4:07
This first call to pop up here will pop page one from our stack,
-
4:13
leaving only page zero on the page stack.
-
4:15
It's not empty, so when we check here we're going to skip down to the else
-
4:19
block, and now this second block will remove page zero.
-
4:25
But, we are then calling load page, with that zero, and we reload the page and
-
4:33
we will push page zero back on to the stack.
-
4:38
I know this can get a little confusing,
-
4:40
which is why I'm trying to talk through it, in detail.
-
4:43
I think we're ready to try it out though.
-
4:44
I'm going to delete this.
-
4:45
The key is to talk through it and do a lot of testing.
-
4:48
So let's test it out.
-
4:49
All right.
-
4:52
Let's test a few different cases here.
-
4:56
Start the adventure, and
-
4:58
we'll click through until we get all the way to the end.
-
5:01
And now let's use our back button.
-
5:02
Let's see if we go back through the same pages, yeah, it's working, look at that.
-
5:06
All right, we're back at page zero,
-
5:08
and if we hit back again, we go back and the name field is empty.
-
5:13
Let's try it again.
-
5:16
Come in here, we'll go back to the end.
-
5:18
And at this point,
-
5:19
let's click on the up button and we should go all the way up to main activity.
-
5:22
And our name is cleared, very good.
-
5:25
Let's try it one more time.
-
5:28
Let's go through.
-
5:30
Click on a couple of things.
-
5:32
Let's play again, and keep going through.
-
5:37
Sure thing, we can just keep clicking.
-
5:40
And we should be able to click on the back button and go all the way back.
-
5:45
We could even go back, in this case,
-
5:46
through previous stories; which if we really wanted to fix,
-
5:49
we could clear our stack each time we hit play again and load page zero.
-
5:56
But this is great, our app is complete!
-
5:59
You have done it, you have created the interactive story.
You need to sign up for Treehouse in order to download course files.
Sign up