This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Android Fragments!
You have completed Android Fragments!
Preview
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up