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