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 add the tabs to our ViewPager!
Support Library Dependency
Don't forget to update the version!
compile 'com.android.support:design:23.2.1'
Related Links
In order to add the tabs, we'll need to
make use of another new view group called
0:00
Tab Layout, which comes to us
from the design support library.
0:05
So before we add that in,
let's head over to our build.gradle file.
0:09
And add the design support
library as a dependency.
0:15
compile 'com.android.support:design and
0:20
then the version number.
0:26
You can also copy it in
from the teacher's notes.
0:32
You might have noticed that
I'm getting a warning,
0:35
that I'm not using the most recent
version of these libraries.
0:38
It recommends I upgrade
to an alpha version.
0:43
An alpha version is usually
the first release of something.
0:46
When a developer releases
an alpha version,
0:49
it means they think their software
is pretty close to being done.
0:52
But it's impossible to know for
sure until it's been thoroughly tested by
0:56
all kinds of people on
all kinds of devices.
1:00
So just to play it safe, I'm sticking
with the stable 23.2.1 release.
1:04
But usually, you should update these.
1:09
Cool, now let's sync the app.
1:11
And then let's go over to
our view pages layout file.
1:17
And let's add a tab layout
above our view pager.
1:24
Then let's give it
a width of match_parent.
1:31
And the height of wrap_content, and
let's also give it an id of tabLayout.
1:34
And set the background,
android:background,
1:45
to our primary dark color,
@color/colorPrimaryDark.
1:50
Then let's add a backslash down
here to get rid of the extra tag.
1:59
Back in our ViewPagerFragment class,
let's add some space above
2:04
the return statement, and then create
a new variable for our tab layout.
2:09
TabLayout, let's call it tabLayout, and
2:13
let's set it equal to
view.findViewByID(R.id.tabLayout) and
2:18
Alt+Enter to add the cast.
2:25
Then on the next line, let's type
2:30
tabLayout.setupWithViewPager, and
2:33
pass in our viewPager.
2:40
And that's all we need to do to hook
up our tab layout to our view pager.
2:44
But before we run the app, we still
need to set the titles of our tabs.
2:49
This is done by overriding
the getPageTitle method of our adapter.
2:54
Let's put our cursor inside our
anonymous FragmentPagerAdapter class and
3:01
use Ctrl+O to override
the getPageTitle method.
3:06
Then let's return ingredients if the
position is 0 and directions otherwise.
3:14
Return position is 0,
we'll return the word Ingredients,
3:22
and if it's not 0,
we'll return Directions.
3:28
And now, let's finally test the app.
3:37
Click on a recipe, and there we go.
3:44
We've got both our ingredients and
directions fragments as tabs, and
3:47
we can switch between them
to our heart's content.
3:52
Great job.
3:55
You need to sign up for Treehouse in order to download course files.
Sign up