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
In this video we'll finish up the ViewPager and see it in action!
Related Links
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
You need to sign up for Treehouse in order to download course files.
Sign up