This course will be retired on July 14, 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
Well done!
You have completed Android Fragments!
You have completed Android Fragments!
Preview
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