The Ingredients Fragment

[SOUND] We've just finished creating and setting up our view pager. 0:04 But it won't look very complete until we're also finished with our ingredients 0:07 and directions fragments. 0:11 Let's start with the ingredients fragment by taking another look at the mock ups. 0:13 Looks like it's pretty much just a list of check boxes. 0:18 One check box is for each ingredient. 0:20 The only problem is that we don't know upfront how many check boxes we'll need. 0:23 It depends on which recipe was selected, so 0:28 we'll have to create and add these check boxes dynamically. 0:31 But before we do that, let's go back to our fragment ingredients layout. 0:35 And get rid of the TextView. 0:43 We won't be needing it anymore. 0:45 Also, let's give our linear layout an id of ingredientsLayout. 0:49 This way, we'll be able to access it in code and add our check boxes. 1:00 Now let's switch over to our ingredients fragment. 1:05 And before we get started with our linear layout and 1:10 our check boxes, it might be nice to know which recipe we're showing. 1:12 Just like with our view pager fragment, 1:17 we'll pass this in as a key value pair and a bundle. 1:19 In fact, we don't even need a new key for this. 1:23 We can just use the same key from ViewPagerFragment. 1:26 So let's head over to our ViewPagerFragment class and 1:30 make the magic happen. 1:33 Right below where we create our IngredientsFragment, 1:35 let's create a new bundle variable named bundle, 1:39 = new_Bundle(). 1:46 Then let's add our index to this bundle using our key, 1:50 bundle.putInt(KEY_RECIPE_INDEX, index). 1:54 And finally, let's set this bundle as the arguments for our ingredients fragment, 2:01 ingredientsFragment.setArguments, and pass in our bundle. 2:06 Now over an IngredientsFragment, 2:13 we can retrieve this bundle in exactly the same way as we did with ViewPagerFragment. 2:16 Let's add a line to the top of onCreateView. 2:22 And then type int index = getArguments().getInt, 2:26 and then pass in the key from ViewPagerFragment, 2:32 ViewPagerFragment.KEY_RECIPE_INDEX, looks good. 2:37 And now that we've got our index, we can start working on our check boxes. 2:44 First we'll need to get an array of the ingredients for the chosen recipe. 2:48 Below where we set our view, let's make a string array named ingredients. 2:53 And let's set it equal to Recipes.ingredients, 3:05 and pass in our index, and then .split, and 3:10 then in double quotes, a back tick character, 3:15 which is usually to the left of the number one. 3:20 Recipes.ingredients at position index gives us the string 3:26 containing all of the ingredients. 3:30 And then split while passing in a back tick breaks up that string 3:34 into a string array, depending on where the back ticks are. 3:39 Since each ingredient entry in the ingredients array is one string 3:43 with back ticks in it to determine where the ingredients are separated, 3:48 this is a good way to turn the ingredients string into an ingredients array. 3:53 Now let's loop through our array of ingredients, and for each ingredient, 3:58 let's create a check box and add that check box to our fragments linear layout. 4:02 Let's start by getting a reference to the linear layout. 4:07 Let's add a line above this one. 4:11 And create a new LinearLayout variable named linearLayout. 4:15 And let's set it equal to view.findViewById(R.id 4:22 .ingredientsLayout, and then use Alt+Enter to add the cast. 4:27 Next, below where we set our ingredients array, 4:35 let's create a forEach loop to loop over each ingredient. 4:38 for (String ingredient_) and 4:41 ingredients, and inside this loop, 4:45 let's create a new check box for each ingredient. 4:50 CheckBox, we'll call it checkBox, = new CheckBox, 4:57 and pass in getActivity for the context. 5:03 Then let's give our check box some padding, checkBox.setPadding. 5:09 And let's do 8 on the left, 16 on top, 5:15 8 on the right, and 16 on bottom. 5:20 And add in my missing comma. 5:25 Let's also change the text size to 20 sp, 5:27 checkBox.setTextSize, then pass in 20 as a float. 5:32 And let's not forget to set the actual text too, 5:39 checkBox.setText(ingredient). 5:44 Last but not least, let's call linearLayout.addView, 5:50 and pass in our checkBox to add it to our layout. 5:56 All right, now before we move on to testing, let's make our code 6:03 a little easier to read by refactoring this loop into a new method. 6:07 Below the onCreateView method, 6:11 let's create a new method named setUpCheckBoxes, 6:15 private void setupCheckBoxes, and let's give it two parameters. 6:20 The first will be the ingredients array, ingredients. 6:28 And the second will be the container view group for 6:35 our check boxes, ViewGroup container. 6:40 Then let's cut the loop out of onCreateView, and 6:48 paste it in to setUpCheckBoxes. 6:52 Then let's change linearLayout to container. 6:57 And finally, let's add the call to setUpCheckBoxes back in onCreateView, 7:02 setUpCheckBoxes(ingredients, linearLayout). 7:06 Cool, now let's test it, and see what we've got. 7:13 I'll pick this one, and bam, check boxes. 7:21 Now we can easily keep track of which ingredients we've already added. 7:27 It's so cool that you've been able to get this far. 7:32 What? 7:36 It looks like we should probably be saving the state of our check boxes, 7:38 which we'll be doing in the next video. 7:42