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