In order to add the tabs, we'll need to make use of another new view group called

Tab Layout, which comes to us from the design support library.

So before we add that in, let's head over to our build.gradle file.

And add the design support library as a dependency.

compile 'com.android.support:design and

then the version number.

You can also copy it in from the teacher's notes.

You might have noticed that I'm getting a warning,

that I'm not using the most recent version of these libraries.

It recommends I upgrade to an alpha version.

An alpha version is usually the first release of something.

When a developer releases an alpha version,

it means they think their software is pretty close to being done.

But it's impossible to know for sure until it's been thoroughly tested by

all kinds of people on all kinds of devices.

So just to play it safe, I'm sticking with the stable 23.2.1 release.

But usually, you should update these.

Cool, now let's sync the app.

And then let's go over to our view pages layout file.

And let's add a tab layout above our view pager.

Then let's give it a width of match_parent.

And the height of wrap_content, and let's also give it an id of tabLayout.

And set the background, android:background,

to our primary dark color, @color/colorPrimaryDark.

Then let's add a backslash down here to get rid of the extra tag.

Back in our ViewPagerFragment class, let's add some space above

the return statement, and then create a new variable for our tab layout.

TabLayout, let's call it tabLayout, and

let's set it equal to view.findViewByID(R.id.tabLayout) and

Alt+Enter to add the cast.

Then on the next line, let's type

tabLayout.setupWithViewPager, and

pass in our viewPager.

And that's all we need to do to hook up our tab layout to our view pager.

But before we run the app, we still need to set the titles of our tabs.

This is done by overriding the getPageTitle method of our adapter.

Let's put our cursor inside our anonymous FragmentPagerAdapter class and

use Ctrl+O to override the getPageTitle method.

Then let's return ingredients if the position is 0 and directions otherwise.

Return position is 0, we'll return the word Ingredients,

and if it's not 0, we'll return Directions.

And now, let's finally test the app.

Click on a recipe, and there we go.

We've got both our ingredients and directions fragments as tabs, and

we can switch between them to our heart's content.

Great job.