1 00:00:04,730 --> 00:00:07,540 [SOUND] We've just finished creating and setting up our view pager. 2 00:00:07,540 --> 00:00:11,416 But it won't look very complete until we're also finished with our ingredients 3 00:00:11,416 --> 00:00:13,380 and directions fragments. 4 00:00:13,380 --> 00:00:17,010 Let's start with the ingredients fragment by taking another look at the mock ups. 5 00:00:18,020 --> 00:00:20,686 Looks like it's pretty much just a list of check boxes. 6 00:00:20,686 --> 00:00:23,290 One check box is for each ingredient. 7 00:00:23,290 --> 00:00:28,300 The only problem is that we don't know upfront how many check boxes we'll need. 8 00:00:28,300 --> 00:00:31,010 It depends on which recipe was selected, so 9 00:00:31,010 --> 00:00:34,300 we'll have to create and add these check boxes dynamically. 10 00:00:35,450 --> 00:00:39,650 But before we do that, let's go back to our fragment ingredients layout. 11 00:00:43,649 --> 00:00:45,870 And get rid of the TextView. 12 00:00:45,870 --> 00:00:46,960 We won't be needing it anymore. 13 00:00:49,540 --> 00:00:53,699 Also, let's give our linear layout an id of ingredientsLayout. 14 00:01:00,900 --> 00:01:04,860 This way, we'll be able to access it in code and add our check boxes. 15 00:01:05,890 --> 00:01:07,820 Now let's switch over to our ingredients fragment. 16 00:01:10,110 --> 00:01:12,630 And before we get started with our linear layout and 17 00:01:12,630 --> 00:01:17,420 our check boxes, it might be nice to know which recipe we're showing. 18 00:01:17,420 --> 00:01:19,670 Just like with our view pager fragment, 19 00:01:19,670 --> 00:01:23,640 we'll pass this in as a key value pair and a bundle. 20 00:01:23,640 --> 00:01:26,640 In fact, we don't even need a new key for this. 21 00:01:26,640 --> 00:01:29,640 We can just use the same key from ViewPagerFragment. 22 00:01:30,810 --> 00:01:33,410 So let's head over to our ViewPagerFragment class and 23 00:01:33,410 --> 00:01:34,290 make the magic happen. 24 00:01:35,900 --> 00:01:39,455 Right below where we create our IngredientsFragment, 25 00:01:39,455 --> 00:01:42,715 let's create a new bundle variable named bundle, 26 00:01:46,540 --> 00:01:50,500 = new_Bundle(). 27 00:01:50,500 --> 00:01:54,838 Then let's add our index to this bundle using our key, 28 00:01:54,838 --> 00:02:01,820 bundle.putInt(KEY_RECIPE_INDEX, index). 29 00:02:01,820 --> 00:02:06,304 And finally, let's set this bundle as the arguments for our ingredients fragment, 30 00:02:06,304 --> 00:02:13,340 ingredientsFragment.setArguments, and pass in our bundle. 31 00:02:13,340 --> 00:02:16,690 Now over an IngredientsFragment, 32 00:02:16,690 --> 00:02:22,330 we can retrieve this bundle in exactly the same way as we did with ViewPagerFragment. 33 00:02:22,330 --> 00:02:24,595 Let's add a line to the top of onCreateView. 34 00:02:26,660 --> 00:02:32,539 And then type int index = getArguments().getInt, 35 00:02:32,539 --> 00:02:37,792 and then pass in the key from ViewPagerFragment, 36 00:02:37,792 --> 00:02:44,070 ViewPagerFragment.KEY_RECIPE_INDEX, looks good. 37 00:02:44,070 --> 00:02:48,340 And now that we've got our index, we can start working on our check boxes. 38 00:02:48,340 --> 00:02:53,590 First we'll need to get an array of the ingredients for the chosen recipe. 39 00:02:53,590 --> 00:02:59,895 Below where we set our view, let's make a string array named ingredients. 40 00:03:05,040 --> 00:03:10,465 And let's set it equal to Recipes.ingredients, 41 00:03:10,465 --> 00:03:15,257 and pass in our index, and then .split, and 42 00:03:15,257 --> 00:03:20,304 then in double quotes, a back tick character, 43 00:03:20,304 --> 00:03:26,145 which is usually to the left of the number one. 44 00:03:26,145 --> 00:03:30,907 Recipes.ingredients at position index gives us the string 45 00:03:30,907 --> 00:03:34,670 containing all of the ingredients. 46 00:03:34,670 --> 00:03:39,790 And then split while passing in a back tick breaks up that string 47 00:03:39,790 --> 00:03:42,841 into a string array, depending on where the back ticks are. 48 00:03:43,920 --> 00:03:48,698 Since each ingredient entry in the ingredients array is one string 49 00:03:48,698 --> 00:03:53,600 with back ticks in it to determine where the ingredients are separated, 50 00:03:53,600 --> 00:03:58,370 this is a good way to turn the ingredients string into an ingredients array. 51 00:03:58,370 --> 00:04:02,400 Now let's loop through our array of ingredients, and for each ingredient, 52 00:04:02,400 --> 00:04:07,700 let's create a check box and add that check box to our fragments linear layout. 53 00:04:07,700 --> 00:04:10,540 Let's start by getting a reference to the linear layout. 54 00:04:11,640 --> 00:04:12,940 Let's add a line above this one. 55 00:04:15,081 --> 00:04:21,420 And create a new LinearLayout variable named linearLayout. 56 00:04:22,480 --> 00:04:27,925 And let's set it equal to view.findViewById(R.id 57 00:04:27,925 --> 00:04:33,750 .ingredientsLayout, and then use Alt+Enter to add the cast. 58 00:04:35,040 --> 00:04:38,050 Next, below where we set our ingredients array, 59 00:04:38,050 --> 00:04:41,678 let's create a forEach loop to loop over each ingredient. 60 00:04:41,678 --> 00:04:45,823 for (String ingredient_) and 61 00:04:45,823 --> 00:04:50,559 ingredients, and inside this loop, 62 00:04:50,559 --> 00:04:57,700 let's create a new check box for each ingredient. 63 00:04:57,700 --> 00:05:03,066 CheckBox, we'll call it checkBox, = new CheckBox, 64 00:05:03,066 --> 00:05:07,070 and pass in getActivity for the context. 65 00:05:09,400 --> 00:05:15,520 Then let's give our check box some padding, checkBox.setPadding. 66 00:05:15,520 --> 00:05:20,595 And let's do 8 on the left, 16 on top, 67 00:05:20,595 --> 00:05:25,100 8 on the right, and 16 on bottom. 68 00:05:25,100 --> 00:05:27,959 And add in my missing comma. 69 00:05:27,959 --> 00:05:32,778 Let's also change the text size to 20 sp, 70 00:05:32,778 --> 00:05:39,650 checkBox.setTextSize, then pass in 20 as a float. 71 00:05:39,650 --> 00:05:44,596 And let's not forget to set the actual text too, 72 00:05:44,596 --> 00:05:48,580 checkBox.setText(ingredient). 73 00:05:50,640 --> 00:05:56,607 Last but not least, let's call linearLayout.addView, 74 00:05:56,607 --> 00:06:01,390 and pass in our checkBox to add it to our layout. 75 00:06:03,200 --> 00:06:07,200 All right, now before we move on to testing, let's make our code 76 00:06:07,200 --> 00:06:11,578 a little easier to read by refactoring this loop into a new method. 77 00:06:11,578 --> 00:06:15,020 Below the onCreateView method, 78 00:06:15,020 --> 00:06:20,093 let's create a new method named setUpCheckBoxes, 79 00:06:20,093 --> 00:06:28,120 private void setupCheckBoxes, and let's give it two parameters. 80 00:06:28,120 --> 00:06:33,670 The first will be the ingredients array, ingredients. 81 00:06:35,820 --> 00:06:40,754 And the second will be the container view group for 82 00:06:40,754 --> 00:06:44,879 our check boxes, ViewGroup container. 83 00:06:48,758 --> 00:06:52,790 Then let's cut the loop out of onCreateView, and 84 00:06:52,790 --> 00:06:55,480 paste it in to setUpCheckBoxes. 85 00:06:57,260 --> 00:07:00,270 Then let's change linearLayout to container. 86 00:07:02,020 --> 00:07:06,202 And finally, let's add the call to setUpCheckBoxes back in onCreateView, 87 00:07:06,202 --> 00:07:13,970 setUpCheckBoxes(ingredients, linearLayout). 88 00:07:13,970 --> 00:07:16,590 Cool, now let's test it, and see what we've got. 89 00:07:21,889 --> 00:07:26,570 I'll pick this one, and bam, check boxes. 90 00:07:27,670 --> 00:07:30,960 Now we can easily keep track of which ingredients we've already added. 91 00:07:32,350 --> 00:07:34,810 It's so cool that you've been able to get this far. 92 00:07:36,820 --> 00:07:37,320 What? 93 00:07:38,600 --> 00:07:42,160 It looks like we should probably be saving the state of our check boxes, 94 00:07:42,160 --> 00:07:44,040 which we'll be doing in the next video.