1 00:00:00,290 --> 00:00:03,990 Now that we're successfully showing our viewpager fragment with the right data, 2 00:00:03,990 --> 00:00:05,198 let's get back to its layout. 3 00:00:05,198 --> 00:00:10,156 Over in fragment_viewpager.xml, let's switch to the text tab, 4 00:00:10,156 --> 00:00:13,238 and then let's add a new ViewPager element 5 00:00:19,310 --> 00:00:23,710 Then let's set the width and height to match_parent. 6 00:00:23,710 --> 00:00:27,167 And let's give it an ID of viewPager. 7 00:00:31,110 --> 00:00:34,600 And then let's add this slash because we don't need this second tag. 8 00:00:36,000 --> 00:00:40,680 Back in ViewPagerFragment, let's add some space below where we set our view 9 00:00:40,680 --> 00:00:45,970 variable, and create a new variable for 10 00:00:45,970 --> 00:00:50,560 our view pager named ViewPager, 11 00:00:52,380 --> 00:00:59,223 and set it equal to view.findViewByid(R.id.viewPager) and 12 00:00:59,223 --> 00:01:01,920 use Alt+Enter to add the cast. 13 00:01:03,490 --> 00:01:07,360 Now that we've got our viewPager, we need to set it up with an adapter. 14 00:01:07,360 --> 00:01:08,580 On the next line, 15 00:01:08,580 --> 00:01:17,840 let's type viewPager.setAdapter, and remember, 16 00:01:17,840 --> 00:01:22,470 there's a special pager adapter just for fragments, fragment pager adapter. 17 00:01:23,790 --> 00:01:27,534 So let's pass in a new_FragmentPagerAdapter and 18 00:01:27,534 --> 00:01:30,150 hit enter to have it auto complete. 19 00:01:31,390 --> 00:01:36,180 Then we need to pass in a fragment manager to our fragment pager adapter. 20 00:01:36,180 --> 00:01:39,260 But instead of using get fragment manager or 21 00:01:39,260 --> 00:01:44,430 get support fragment manager, lets pass in getChildFragmentManager. 22 00:01:45,510 --> 00:01:48,650 When we're dealing with fragments within fragments, 23 00:01:48,650 --> 00:01:51,630 we need to use the ChildFragmentManager. 24 00:01:51,630 --> 00:01:52,670 It's just the way it is. 25 00:01:53,790 --> 00:01:58,280 So one more time, when we're dealing with fragments within fragments, 26 00:01:58,280 --> 00:02:00,530 we need to use the ChildFragmentManager. 27 00:02:01,660 --> 00:02:05,970 Cool, now we just need to fill out the getItem and getCount methods. 28 00:02:07,040 --> 00:02:08,470 GetCount is easy. 29 00:02:08,470 --> 00:02:13,900 Our view pager only hosts two fragments, ingredients, and directions. 30 00:02:13,900 --> 00:02:15,775 So getCount should always return two. 31 00:02:18,210 --> 00:02:22,220 GetItem, on the other hand, should return our ingredients fragment, or 32 00:02:22,220 --> 00:02:25,110 our directions fragment, depending on the position argument. 33 00:02:26,260 --> 00:02:29,340 But since these two fragments don't exist yet, 34 00:02:29,340 --> 00:02:32,040 now might be a good time to create them. 35 00:02:32,040 --> 00:02:35,260 Let's start by creating a layout for our ingredients fragment, 36 00:02:42,160 --> 00:02:43,300 and let's name it. 37 00:02:43,300 --> 00:02:43,930 Fragment. 38 00:02:43,930 --> 00:02:44,523 Ingredients. 39 00:02:49,857 --> 00:02:56,319 And then let's drag out a plain text view and change the text to say ingredients. 40 00:03:02,747 --> 00:03:06,835 This way, we can make sure everything is working with our view pager before we make 41 00:03:06,835 --> 00:03:08,270 this any more complicated. 42 00:03:09,710 --> 00:03:12,220 Then let's repeat those steps for our directions fragment. 43 00:03:13,950 --> 00:03:17,179 New layout file, 44 00:03:17,179 --> 00:03:23,220 name it fragment_directions. 45 00:03:23,220 --> 00:03:27,723 Drag out the text view and change its text to say directions. 46 00:03:33,637 --> 00:03:37,216 Now let's create the ingredients fragment class, 47 00:03:37,216 --> 00:03:40,152 which we'll call ingredientsfragment. 48 00:03:45,318 --> 00:03:47,675 Then let's extend the support fragment class. 49 00:03:52,876 --> 00:03:56,470 And use Ctrl+O to override the onCreateView method. 50 00:04:02,640 --> 00:04:05,298 And inside this method, let's create our view variable. 51 00:04:05,298 --> 00:04:14,592 View view =_Inflater.inflate(R.layout.fragment_ingr- 52 00:04:14,592 --> 00:04:17,750 edients), pass in the container. 53 00:04:17,750 --> 00:04:20,220 And false, since we don't want it to attach to the container, 54 00:04:20,220 --> 00:04:22,070 and then return our view. 55 00:04:24,890 --> 00:04:27,330 And now, let's do the same thing for our directions fragment. 56 00:04:28,580 --> 00:04:32,290 New class named DirectionsFragment. 57 00:04:35,340 --> 00:04:37,390 Make it extend the support fragment class. 58 00:04:40,570 --> 00:04:44,564 Then let's just copy the onCreateView method from ingredientsFragment, and 59 00:04:44,564 --> 00:04:45,464 paste it in here. 60 00:04:52,621 --> 00:04:56,446 And then change fragment_ingredients to fragment_directions. 61 00:04:56,446 --> 00:05:02,190 All right, now that we've got the ingredients and directions_fragments, 62 00:05:02,190 --> 00:05:05,450 back in view pager fragment, let's create these new fragments and 63 00:05:05,450 --> 00:05:08,830 return them in the getItem method of our adapter. 64 00:05:08,830 --> 00:05:14,560 Right below where we set our view, let's type IngredientsFragment. 65 00:05:15,610 --> 00:05:19,930 Name it ingredientsFragment and set it equal to a new IngredientsFragment. 66 00:05:21,730 --> 00:05:25,905 And then on the next line create our DirectionsFragment. 67 00:05:25,905 --> 00:05:28,590 DirectionsFragment, name it directionsFragment, and 68 00:05:28,590 --> 00:05:31,700 set it equal to a new DirectionsFragment. 69 00:05:31,700 --> 00:05:36,697 Lastly, inside the getItem method, let's return IngredientsFragment 70 00:05:36,697 --> 00:05:41,074 if the position is zero, and directions_fragment otherwise. 71 00:05:41,074 --> 00:05:44,893 if (position == 0), 72 00:05:44,893 --> 00:05:49,583 return ingredientsFragment, 73 00:05:49,583 --> 00:05:54,800 else return directionsFragment. 74 00:05:55,960 --> 00:05:57,380 And check this out. 75 00:05:57,380 --> 00:06:00,440 Since methods stop executing after returning, 76 00:06:00,440 --> 00:06:03,285 we can refactor this to only use three lines. 77 00:06:07,657 --> 00:06:11,315 And if we want to go further, we can get down to just one line. 78 00:06:22,688 --> 00:06:25,360 That should be enough to get a working app. 79 00:06:25,360 --> 00:06:27,037 Let's run this and see what we got. 80 00:06:36,327 --> 00:06:37,360 Click on a recipe. 81 00:06:37,360 --> 00:06:41,350 And there's our ingredients fragment! 82 00:06:41,350 --> 00:06:44,410 Awesome, but where's our directions fragment? 83 00:06:46,660 --> 00:06:47,900 There it is. 84 00:06:47,900 --> 00:06:50,660 Looks like our view pager is working after all. 85 00:06:50,660 --> 00:06:52,720 All that's missing are the tabs at the top. 86 00:06:53,780 --> 00:06:55,480 Let's fix that In the next video.