Preview
Video Player
00:00
00:00
Side by Side
8:03In this video we finish the app!
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