Preview
Video Player
00:00
00:00
Adding the ViewPager
6:56In this video we'll finish up the ViewPager and see it in action!
Now that we're successfully showing our
viewpager fragment with the right data,
0:00
let's get back to its layout.
0:03
Over in fragment_viewpager.xml,
let's switch to the text tab,
0:05
and then let's add a new ViewPager element
0:10
Then let's set the width and
height to match_parent.
0:19
And let's give it an ID of viewPager.
0:23
And then let's add this slash because
we don't need this second tag.
0:31
Back in ViewPagerFragment, let's add
some space below where we set our view
0:36
variable, and create a new variable for
0:40
our view pager named ViewPager,
0:45
and set it equal to
view.findViewByid(R.id.viewPager) and
0:52
use Alt+Enter to add the cast.
0:59
Now that we've got our viewPager,
we need to set it up with an adapter.
1:03
On the next line,
1:07
let's type viewPager.setAdapter,
and remember,
1:08
there's a special pager adapter just for
fragments, fragment pager adapter.
1:17
So let's pass in
a new_FragmentPagerAdapter and
1:23
hit enter to have it auto complete.
1:27
Then we need to pass in a fragment
manager to our fragment pager adapter.
1:31
But instead of using
get fragment manager or
1:36
get support fragment manager,
lets pass in getChildFragmentManager.
1:39
When we're dealing with
fragments within fragments,
1:45
we need to use the ChildFragmentManager.
1:48
It's just the way it is.
1:51
So one more time, when we're dealing
with fragments within fragments,
1:53
we need to use the ChildFragmentManager.
1:58
Cool, now we just need to fill out
the getItem and getCount methods.
2:01
GetCount is easy.
2:07
Our view pager only hosts two fragments,
ingredients, and directions.
2:08
So getCount should always return two.
2:13
GetItem, on the other hand,
should return our ingredients fragment, or
2:18
our directions fragment,
depending on the position argument.
2:22
But since these two
fragments don't exist yet,
2:26
now might be a good time to create them.
2:29
Let's start by creating a layout for
our ingredients fragment,
2:32
and let's name it.
2:42
Fragment.
2:43
Ingredients.
2:43
And then let's drag out a plain text view
and change the text to say ingredients.
2:49
This way, we can make sure everything is
working with our view pager before we make
3:02
this any more complicated.
3:06
Then let's repeat those steps for
our directions fragment.
3:09
New layout file,
3:13
name it fragment_directions.
3:17
Drag out the text view and
change its text to say directions.
3:23
Now let's create
the ingredients fragment class,
3:33
which we'll call ingredientsfragment.
3:37
Then let's extend
the support fragment class.
3:45
And use Ctrl+O to override
the onCreateView method.
3:52
And inside this method,
let's create our view variable.
4:02
View view
=_Inflater.inflate(R.layout.fragment_ingr-
4:05
edients), pass in the container.
4:14
And false, since we don't want
it to attach to the container,
4:17
and then return our view.
4:20
And now, let's do the same thing for
our directions fragment.
4:24
New class named DirectionsFragment.
4:28
Make it extend the support fragment class.
4:35
Then let's just copy the onCreateView
method from ingredientsFragment, and
4:40
paste it in here.
4:44
And then change fragment_ingredients
to fragment_directions.
4:52
All right, now that we've got
the ingredients and directions_fragments,
4:56
back in view pager fragment,
let's create these new fragments and
5:02
return them in the getItem
method of our adapter.
5:05
Right below where we set our view,
let's type IngredientsFragment.
5:08
Name it ingredientsFragment and
set it equal to a new IngredientsFragment.
5:15
And then on the next line
create our DirectionsFragment.
5:21
DirectionsFragment, name
it directionsFragment, and
5:25
set it equal to a new DirectionsFragment.
5:28
Lastly, inside the getItem method,
let's return IngredientsFragment
5:31
if the position is zero, and
directions_fragment otherwise.
5:36
if (position == 0),
5:41
return ingredientsFragment,
5:44
else return directionsFragment.
5:49
And check this out.
5:55
Since methods stop
executing after returning,
5:57
we can refactor this to
only use three lines.
6:00
And if we want to go further,
we can get down to just one line.
6:07
That should be enough
to get a working app.
6:22
Let's run this and see what we got.
6:25
Click on a recipe.
6:36
And there's our ingredients fragment!
6:37
Awesome, but
where's our directions fragment?
6:41
There it is.
6:46
Looks like our view pager
is working after all.
6:47
All that's missing
are the tabs at the top.
6:50
Let's fix that In the next video.
6:53