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