This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll work on finishing up the ingredients Fragment!
Related Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up