Adding the Tabs

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