Now that we're successfully showing our viewpager fragment with the right data,

let's get back to its layout.

Over in fragment_viewpager.xml, let's switch to the text tab,

and then let's add a new ViewPager element

Then let's set the width and height to match_parent.

And let's give it an ID of viewPager.

And then let's add this slash because we don't need this second tag.

Back in ViewPagerFragment, let's add some space below where we set our view

variable, and create a new variable for

our view pager named ViewPager,

and set it equal to view.findViewByid(R.id.viewPager) and

use Alt+Enter to add the cast.

Now that we've got our viewPager, we need to set it up with an adapter.

On the next line,

let's type viewPager.setAdapter, and remember,

there's a special pager adapter just for fragments, fragment pager adapter.

So let's pass in a new_FragmentPagerAdapter and

hit enter to have it auto complete.

Then we need to pass in a fragment manager to our fragment pager adapter.

But instead of using get fragment manager or

get support fragment manager, lets pass in getChildFragmentManager.

When we're dealing with fragments within fragments,

we need to use the ChildFragmentManager.

It's just the way it is.

So one more time, when we're dealing with fragments within fragments,

we need to use the ChildFragmentManager.

Cool, now we just need to fill out the getItem and getCount methods.

GetCount is easy.

Our view pager only hosts two fragments, ingredients, and directions.

So getCount should always return two.

GetItem, on the other hand, should return our ingredients fragment, or

our directions fragment, depending on the position argument.

But since these two fragments don't exist yet,

now might be a good time to create them.

Let's start by creating a layout for our ingredients fragment,

and let's name it.

Fragment.

Ingredients.

And then let's drag out a plain text view and change the text to say ingredients.

This way, we can make sure everything is working with our view pager before we make

this any more complicated.

Then let's repeat those steps for our directions fragment.

New layout file,

name it fragment_directions.

Drag out the text view and change its text to say directions.

Now let's create the ingredients fragment class,

which we'll call ingredientsfragment.

Then let's extend the support fragment class.

And use Ctrl+O to override the onCreateView method.

And inside this method, let's create our view variable.

View view =_Inflater.inflate(R.layout.fragment_ingr-

edients), pass in the container.

And false, since we don't want it to attach to the container,

and then return our view.

And now, let's do the same thing for our directions fragment.

New class named DirectionsFragment.

Make it extend the support fragment class.

Then let's just copy the onCreateView method from ingredientsFragment, and

paste it in here.

And then change fragment_ingredients to fragment_directions.

All right, now that we've got the ingredients and directions_fragments,

back in view pager fragment, let's create these new fragments and

return them in the getItem method of our adapter.

Right below where we set our view, let's type IngredientsFragment.

Name it ingredientsFragment and set it equal to a new IngredientsFragment.

And then on the next line create our DirectionsFragment.

DirectionsFragment, name it directionsFragment, and

set it equal to a new DirectionsFragment.

Lastly, inside the getItem method, let's return IngredientsFragment

if the position is zero, and directions_fragment otherwise.

if (position == 0),

return ingredientsFragment,

else return directionsFragment.

And check this out.

Since methods stop executing after returning,

we can refactor this to only use three lines.

And if we want to go further, we can get down to just one line.

That should be enough to get a working app.

Let's run this and see what we got.

Click on a recipe.

And there's our ingredients fragment!

Awesome, but where's our directions fragment?

There it is.

Looks like our view pager is working after all.

All that's missing are the tabs at the top.

Let's fix that In the next video.