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