Adding the ViewPager

Now that we're successfully showing our viewpager fragment with the right data, 0:00 let's get back to its layout. 0:03 Over in fragment_viewpager.xml, let's switch to the text tab, 0:05 and then let's add a new ViewPager element 0:10 Then let's set the width and height to match_parent. 0:19 And let's give it an ID of viewPager. 0:23 And then let's add this slash because we don't need this second tag. 0:31 Back in ViewPagerFragment, let's add some space below where we set our view 0:36 variable, and create a new variable for 0:40 our view pager named ViewPager, 0:45 and set it equal to view.findViewByid(R.id.viewPager) and 0:52 use Alt+Enter to add the cast. 0:59 Now that we've got our viewPager, we need to set it up with an adapter. 1:03 On the next line, 1:07 let's type viewPager.setAdapter, and remember, 1:08 there's a special pager adapter just for fragments, fragment pager adapter. 1:17 So let's pass in a new_FragmentPagerAdapter and 1:23 hit enter to have it auto complete. 1:27 Then we need to pass in a fragment manager to our fragment pager adapter. 1:31 But instead of using get fragment manager or 1:36 get support fragment manager, lets pass in getChildFragmentManager. 1:39 When we're dealing with fragments within fragments, 1:45 we need to use the ChildFragmentManager. 1:48 It's just the way it is. 1:51 So one more time, when we're dealing with fragments within fragments, 1:53 we need to use the ChildFragmentManager. 1:58 Cool, now we just need to fill out the getItem and getCount methods. 2:01 GetCount is easy. 2:07 Our view pager only hosts two fragments, ingredients, and directions. 2:08 So getCount should always return two. 2:13 GetItem, on the other hand, should return our ingredients fragment, or 2:18 our directions fragment, depending on the position argument. 2:22 But since these two fragments don't exist yet, 2:26 now might be a good time to create them. 2:29 Let's start by creating a layout for our ingredients fragment, 2:32 and let's name it. 2:42 Fragment. 2:43 Ingredients. 2:43 And then let's drag out a plain text view and change the text to say ingredients. 2:49 This way, we can make sure everything is working with our view pager before we make 3:02 this any more complicated. 3:06 Then let's repeat those steps for our directions fragment. 3:09 New layout file, 3:13 name it fragment_directions. 3:17 Drag out the text view and change its text to say directions. 3:23 Now let's create the ingredients fragment class, 3:33 which we'll call ingredientsfragment. 3:37 Then let's extend the support fragment class. 3:45 And use Ctrl+O to override the onCreateView method. 3:52 And inside this method, let's create our view variable. 4:02 View view =_Inflater.inflate(R.layout.fragment_ingr- 4:05 edients), pass in the container. 4:14 And false, since we don't want it to attach to the container, 4:17 and then return our view. 4:20 And now, let's do the same thing for our directions fragment. 4:24 New class named DirectionsFragment. 4:28 Make it extend the support fragment class. 4:35 Then let's just copy the onCreateView method from ingredientsFragment, and 4:40 paste it in here. 4:44 And then change fragment_ingredients to fragment_directions. 4:52 All right, now that we've got the ingredients and directions_fragments, 4:56 back in view pager fragment, let's create these new fragments and 5:02 return them in the getItem method of our adapter. 5:05 Right below where we set our view, let's type IngredientsFragment. 5:08 Name it ingredientsFragment and set it equal to a new IngredientsFragment. 5:15 And then on the next line create our DirectionsFragment. 5:21 DirectionsFragment, name it directionsFragment, and 5:25 set it equal to a new DirectionsFragment. 5:28 Lastly, inside the getItem method, let's return IngredientsFragment 5:31 if the position is zero, and directions_fragment otherwise. 5:36 if (position == 0), 5:41 return ingredientsFragment, 5:44 else return directionsFragment. 5:49 And check this out. 5:55 Since methods stop executing after returning, 5:57 we can refactor this to only use three lines. 6:00 And if we want to go further, we can get down to just one line. 6:07 That should be enough to get a working app. 6:22 Let's run this and see what we got. 6:25 Click on a recipe. 6:36 And there's our ingredients fragment! 6:37 Awesome, but where's our directions fragment? 6:41 There it is. 6:46 Looks like our view pager is working after all. 6:47 All that's missing are the tabs at the top. 6:50 Let's fix that In the next video. 6:53