To build out this layout let's first
think about the views that we need.
I'm going to assume that all of this
is already built, and we're just
going to talk about the new things
that we need to add to our layout.
The two new views that we need to
add are a TextView for Toppings and
CheckBox view for
the Whipped cream item.
You probably didn't know that
this view existed in Android, but
hopefully doing a Google search
helped you find this answer.
Moving on to Step 2,
we need to position the views.
Assuming these views are already
correctly positioned,
we just need to add Toppings and Whipped
cream, vertically, in the same row.
Since the root view is a vertical,
linear layout, we can just add
these two Views at the top of it.
For the third step,
we need to style the views.
The style at the Toppings header
is the same as the Quantity and
Order Summary headers, so
we'll be able to just copy and
paste the headers that already exist.
The CheckBox view is new though so
we need to style it accordingly.
We should allow for 24 dp of space
in between the box and the text,
and we should change the font size of
Whipped cream to be font size of 16 sp.
Let's make these changes to our app now.
To add a Toppings header that looks like
the Quantity header, I can just copy and
paste this code.
I copy it and then add it to the top
of this vertical LinearLayout.
Okay, so
now it says Quantity twice here.
I'm going to change the text so
that it says Toppings.
I also copied the margin bottom over so
that there's some space in between
this header and the content below it.
Now we haven't added a CheckBox
to our app before, so
I'm going to Google search for
how to do it.
I'm going to search for
checkbox android.
Remember to add android because
there could be checkboxes for
other platforms, like for
the web or other mobile platforms,
this will help you get to
a specific result for Android.
Let's try the first link.
This is the reference documentation for
the CheckBox class.
I scroll through and
I see a nice class overview and
then it goes straight
into the XML attributes.
What I'd really like though is
an example of some XML for CheckBox.
So let's go back to the search results.
Let's click on the second link.
Cool, now it shows some
pictures of Checkboxes.
And here's some XML.
This looks pretty good.
It has two CheckBoxes
within a LinearLayout.
I'm just going to copy
this first CheckBox, and
then I'm going to paste it into our app.
Back in our app, I'm going to paste
it after the Toppings text, but
before the Quantity text, so right here.
I'm going to modify the XML because it
doesn't exactly quite fit our use case.
I'm going to remove the id and
also the text here.
Instead of meat, because our
coffee shop doesn't sell meat,
I'm going to type in Whipped cream.
By the way, what you saw before,
@string/meat,
was referring to a resource
string in the strings.xml file.
We'll talk about that a little
more later, but for now,
you can just type the string
in directly here.
And look, the preview updates, so now we
have a Checkbox that says Whipped cream.
What's cool about the Checkbox
view is that it gives you a box,
as well as some text, so you don't
have to add another text view here.
We also don't need this line
here that talks about onClick.
All we care about for this coding task
is making the CheckBox appear here.
The other way you could've arrived at
this XML is by checking the common
Android views cheat sheet.
This cheat sheet lists a bunch
of common Android views and
it has examples for the XML as well.
Here's the CheckBox view and here's an
example of what it would look like and
the corresponding XML.
You could have copied the XML from
here and pasted it into the app.
Going back to Android Studio let's
run the app to see how it looks.
And here it is.
It looks pretty good.
We have the Toppings header and
a Whipped cream CheckBox.
We also get this cool animation
when we check the box.
The only problem I see though
is that the spacing is off.
For example, it's too tight in
between the Quantity header and
the Whipped cream CheckBox, and there's
also not enough space in between here.
Going back to the red
lines that were provided,
we should add 24 dp of space here,
and change the font size to be 16 sp.
First I'm going to change the font size.
I'm going to type in android:textSize
and then put in a 16sp.
I'm going to open up the preview here to
check that it actually increased in font
size, and it did.
If you're not sure if it refreshed or
not you can always hit this button.
Okay.
Now to figure out the spacing
I actually got it to work
by doing a bunch of trial and error.
I tried to set the margin values and
then I tried to set the padding values,
and it turned out that paddingLeft
does control the spacing in
between the box and the text here.
Let's add the padding now.
Cool, the text moved over.
I still see one more problem, though.
There's enough vertical space here, but
there's not enough vertical space here.
I either need to add bottom padding, or
bottom margin to this CheckBox view, or
I need to add top padding, or
top margin to this Quantity header.
Either way would work,
I'm just going to add a top
margin to this Quantity header.
There, that looks better!
Now things appear more equally spaced.
I'm going to run this app on my device.
And here's the app.
It looks really good.
Great job.
When you need to add more UI changes to
your app, you can follow this pattern
of Google searching for the information
online and then applying it to your app.