This course will be retired on July 14, 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
Well done!
You have completed Android Fragments!
You have completed Android Fragments!
Preview
In this video we finish the app!
Downloads
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
All that's left is to add a new fragment
to handle this new dual-pane layout.
0:00
Let's start by creating the layout for
this fragment.
0:05
And let's name it, fragment_dualpane.
0:10
To save time, I've put this
layout in the teacher's notes.
0:17
So feel free to copy and paste it in.
0:21
There's one vertical linear layout, and
it contains two horizontal linear layouts.
0:27
One, which has two text views
to say which side is which, and
0:33
the other, which has two frame
layouts to serve as placeholders.
0:39
When we used the view pager,
the view pager took care of
0:44
adding our ingredients and
directions fragments all by itself.
0:47
But now,
we need to handle adding these fragments.
0:52
So, we've got a leftPlaceholder where
we'll put the ingredients fragment, and
0:56
the rightPlace holder where we'll
put the directions fragment.
0:59
Now that we've got our layout,
let's create the fragment.
1:04
Let's name it DualPaneFragment, and
1:09
have it extend the support fragment class.
1:13
Then, lets use Ctrl+O to override
the on create view method.
1:18
And now we need to create our view and
initialize our ingredients and
1:27
directions fragments.
1:32
But since we already do this with our
view pager fragment, let's just copy and
1:33
paste the top part of view
pager fragments on create view.
1:38
And paste it back into DualPaneFragment.
1:45
And then return view.
1:54
Then, let's make these keys the constant
from the ViewPagerFragment class.
1:57
Since this class and
ViewPagerFragment will never co-exist,
2:13
we can use the same constant for both.
2:17
Next, instead of inflating
fragment_viewpager,
2:21
let's inflate fragment_dualpane.
2:24
And now,
just like we do with our activity,
2:28
we should check to make sure that a
fragment doesn't exist before creating it.
2:31
Right below where we set our view,
let's add some space, and
2:36
first create a variable for
our fragment manager,
2:40
named fragmentManager.
2:43
And let's set it equal to,
2:48
getChildFragmentManager because
we're in a fragment.
2:49
Then, let's add two lines and create a new
ingredients fragment variable named,
2:54
savedIngredientsFragment.
2:59
And let's set it equal to
fragmentManager.findFragmentByTag,
3:05
and let's pass in,
INGREDIENTS_FRAGMENT in all caps.
3:10
And then I'll split this into two lines so
it's easier to see.
3:18
Then lets use Alt-Enter to
create the constant and
3:23
set it equal to ingredients fragment.
3:27
Then, let's use Alt-Enter again
to cast the found fragment
3:32
as an ingredients fragment.
3:37
On the next line, let's check if
savedIngredientsFragment is null.
3:39
And if it is, we should create a new one.
3:49
So let's copy this bit except for
the final keyword, and paste it in.
3:52
Then, we just need to add this
new fragment to our layout
4:00
inside the left placeholder.
4:03
Right below where we set the arguments
inside our if statement.
4:06
Let's begin a transaction using
the fragmentManager, beginTransaction.
4:09
Then let's add a call
to add on a new line.
4:17
Because I'll run out of space and
pass in the ID of the leftPlaceholder.
4:20
Our new ingredientsFragment.
4:30
And the corresponding tag.
4:33
Finally, just tack on a call to commit,
And there we go.
4:39
We'll only be adding the fragment
if it truly doesn't exist.
4:47
Now let's do the same for
our directions fragment.
4:51
Let's copy all of this
ingredientsFragment section.
4:54
And paste it right below itself.
5:00
Then, let's change
ingredients to directions.
5:04
But check this out.
5:08
Let's highlight the section
we just pasted and
5:09
hit Command or
Ctrl-R to bring up the replace menu.
5:14
Then, in the top box, type ingredients.
5:19
And in the bottom box, type directions.
5:24
Then, make sure to check the preserve
case check box and then hit replace all.
5:28
And now,
5:38
all instances of ingredients inside our
selection have been changed to directions.
5:39
Now let's use Alt-Enter to create
the directions fragment tag.
5:44
And set it equal to directions_fragment.
5:51
And finally, for the directions_fragment.
5:57
Let's change leftPlaceholder
to rightPlaceholder.
6:00
And let's delete this junk at the bottom.
6:07
We only copied it over
to use as a reference.
6:09
Now our DualPaneFragment is ready for use.
6:17
Great job.
6:20
Over a main activity.
6:22
Let's get back to that on
grid recipe selected method.
6:24
Let's start by copying what we've
got in onListRecipesSelected.
6:30
And pasting it down here
in onGridRecipesSelected.
6:33
Then let's change ViewPagerFragment
to DualPaneFragment.
6:40
And that should do it.
6:51
Let's test the app and see what we've got.
6:53
Looks great.
7:05
But it looks like we forgot to update
the title when navigating back from
7:09
DualPaneFragment.
7:13
Let's fix that by copying the onStop
method from ViewPagerFragment, and
7:15
pasting it into DualPaneFragment.
7:19
Now, let's run the app again.
7:30
And if we navigate to a recipe,
and then navigate back.
7:38
We get the correct title.
7:43
You did it.
7:46
You fought your way through the fragment
managers, defeated the view holders, and
7:47
slayed the tablet layout.
7:50
Fragments are definitely not
the easiest part of Android.
7:53
But when used well,
7:56
they can make it a lot easier to
reuse certain parts of your layout.
7:57
And who doesn't love to reuse their code.
8:01
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