0:00:00.750,0:00:03.360
To build out this layout let's first[br]think about the views that we need.

0:00:03.360,0:00:07.420
I'm going to assume that all of this[br]is already built, and we're just

0:00:07.420,0:00:10.910
going to talk about the new things[br]that we need to add to our layout.

0:00:10.910,0:00:15.030
The two new views that we need to[br]add are a TextView for Toppings and

0:00:15.030,0:00:18.090
CheckBox view for[br]the Whipped cream item.

0:00:18.090,0:00:21.470
You probably didn't know that[br]this view existed in Android, but

0:00:21.470,0:00:24.210
hopefully doing a Google search[br]helped you find this answer.

0:00:25.380,0:00:28.300
Moving on to Step 2,[br]we need to position the views.

0:00:28.300,0:00:30.820
Assuming these views are already[br]correctly positioned,

0:00:30.820,0:00:35.470
we just need to add Toppings and Whipped[br]cream, vertically, in the same row.

0:00:35.470,0:00:37.000
Since the root view is a vertical,

0:00:37.000,0:00:39.990
linear layout, we can just add[br]these two Views at the top of it.

0:00:40.990,0:00:43.580
For the third step,[br]we need to style the views.

0:00:43.580,0:00:46.260
The style at the Toppings header[br]is the same as the Quantity and

0:00:46.260,0:00:49.030
Order Summary headers, so[br]we'll be able to just copy and

0:00:49.030,0:00:51.434
paste the headers that already exist.

0:00:51.434,0:00:54.920
The CheckBox view is new though so[br]we need to style it accordingly.

0:00:54.920,0:00:59.176
We should allow for 24 dp of space[br]in between the box and the text,

0:00:59.176,0:01:04.054
and we should change the font size of[br]Whipped cream to be font size of 16 sp.

0:01:04.054,0:01:05.910
Let's make these changes to our app now.

0:01:07.180,0:01:11.020
To add a Toppings header that looks like[br]the Quantity header, I can just copy and

0:01:11.020,0:01:12.730
paste this code.

0:01:12.730,0:01:16.775
I copy it and then add it to the top[br]of this vertical LinearLayout.

0:01:18.080,0:01:20.170
Okay, so[br]now it says Quantity twice here.

0:01:20.170,0:01:22.960
I'm going to change the text so[br]that it says Toppings.

0:01:22.960,0:01:25.380
I also copied the margin bottom over so

0:01:25.380,0:01:28.790
that there's some space in between[br]this header and the content below it.

0:01:30.260,0:01:32.660
Now we haven't added a CheckBox[br]to our app before, so

0:01:32.660,0:01:33.990
I'm going to Google search for[br]how to do it.

0:01:33.990,0:01:37.720
I'm going to search for[br]checkbox android.

0:01:37.720,0:01:40.840
Remember to add android because[br]there could be checkboxes for

0:01:40.840,0:01:44.850
other platforms, like for[br]the web or other mobile platforms,

0:01:44.850,0:01:48.090
this will help you get to[br]a specific result for Android.

0:01:48.090,0:01:49.760
Let's try the first link.

0:01:49.760,0:01:52.900
This is the reference documentation for[br]the CheckBox class.

0:01:52.900,0:01:56.420
I scroll through and[br]I see a nice class overview and

0:01:56.420,0:01:58.960
then it goes straight[br]into the XML attributes.

0:01:58.960,0:02:02.880
What I'd really like though is[br]an example of some XML for CheckBox.

0:02:02.880,0:02:05.100
So let's go back to the search results.

0:02:05.100,0:02:07.070
Let's click on the second link.

0:02:07.070,0:02:10.440
Cool, now it shows some[br]pictures of Checkboxes.

0:02:10.440,0:02:12.040
And here's some XML.

0:02:12.040,0:02:13.180
This looks pretty good.

0:02:13.180,0:02:16.140
It has two CheckBoxes[br]within a LinearLayout.

0:02:16.140,0:02:19.070
I'm just going to copy[br]this first CheckBox, and

0:02:19.070,0:02:20.330
then I'm going to paste it into our app.

0:02:21.590,0:02:25.912
Back in our app, I'm going to paste[br]it after the Toppings text, but

0:02:25.912,0:02:28.753
before the Quantity text, so right here.

0:02:28.753,0:02:33.040
I'm going to modify the XML because it[br]doesn't exactly quite fit our use case.

0:02:33.040,0:02:36.710
I'm going to remove the id and[br]also the text here.

0:02:36.710,0:02:39.750
Instead of meat, because our[br]coffee shop doesn't sell meat,

0:02:39.750,0:02:41.660
I'm going to type in Whipped cream.

0:02:43.030,0:02:45.940
By the way, what you saw before,[br]@string/meat,

0:02:45.940,0:02:50.410
was referring to a resource[br]string in the strings.xml file.

0:02:50.410,0:02:52.690
We'll talk about that a little[br]more later, but for now,

0:02:52.690,0:02:55.550
you can just type the string[br]in directly here.

0:02:55.550,0:02:59.350
And look, the preview updates, so now we[br]have a Checkbox that says Whipped cream.

0:02:59.350,0:03:03.380
What's cool about the Checkbox[br]view is that it gives you a box,

0:03:03.380,0:03:08.100
as well as some text, so you don't[br]have to add another text view here.

0:03:08.100,0:03:10.850
We also don't need this line[br]here that talks about onClick.

0:03:12.089,0:03:16.500
All we care about for this coding task[br]is making the CheckBox appear here.

0:03:16.500,0:03:20.260
The other way you could've arrived at[br]this XML is by checking the common

0:03:20.260,0:03:21.460
Android views cheat sheet.

0:03:22.540,0:03:25.410
This cheat sheet lists a bunch[br]of common Android views and

0:03:25.410,0:03:27.460
it has examples for the XML as well.

0:03:28.480,0:03:32.739
Here's the CheckBox view and here's an[br]example of what it would look like and

0:03:32.739,0:03:34.125
the corresponding XML.

0:03:34.125,0:03:37.270
You could have copied the XML from[br]here and pasted it into the app.

0:03:38.340,0:03:41.010
Going back to Android Studio let's[br]run the app to see how it looks.

0:03:42.480,0:03:43.320
And here it is.

0:03:43.320,0:03:44.050
It looks pretty good.

0:03:44.050,0:03:46.695
We have the Toppings header and[br]a Whipped cream CheckBox.

0:03:47.750,0:03:50.330
We also get this cool animation[br]when we check the box.

0:03:51.360,0:03:54.790
The only problem I see though[br]is that the spacing is off.

0:03:54.790,0:03:57.840
For example, it's too tight in[br]between the Quantity header and

0:03:57.840,0:04:01.390
the Whipped cream CheckBox, and there's[br]also not enough space in between here.

0:04:02.410,0:04:04.480
Going back to the red[br]lines that were provided,

0:04:04.480,0:04:09.370
we should add 24 dp of space here,[br]and change the font size to be 16 sp.

0:04:10.830,0:04:12.960
First I'm going to change the font size.

0:04:12.960,0:04:18.110
I'm going to type in android:textSize[br]and then put in a 16sp.

0:04:18.110,0:04:22.043
I'm going to open up the preview here to[br]check that it actually increased in font

0:04:22.043,0:04:23.690
size, and it did.

0:04:23.690,0:04:26.600
If you're not sure if it refreshed or[br]not you can always hit this button.

0:04:26.600,0:04:27.430
Okay.

0:04:27.430,0:04:29.950
Now to figure out the spacing[br]I actually got it to work

0:04:29.950,0:04:32.240
by doing a bunch of trial and error.

0:04:32.240,0:04:34.370
I tried to set the margin values and

0:04:34.370,0:04:38.340
then I tried to set the padding values,[br]and it turned out that paddingLeft

0:04:38.340,0:04:42.520
does control the spacing in[br]between the box and the text here.

0:04:42.520,0:04:43.285
Let's add the padding now.

0:04:44.900,0:04:46.960
Cool, the text moved over.

0:04:46.960,0:04:49.040
I still see one more problem, though.

0:04:49.040,0:04:53.090
There's enough vertical space here, but[br]there's not enough vertical space here.

0:04:53.090,0:04:57.760
I either need to add bottom padding, or[br]bottom margin to this CheckBox view, or

0:04:57.760,0:05:01.720
I need to add top padding, or[br]top margin to this Quantity header.

0:05:01.720,0:05:02.620
Either way would work,

0:05:02.620,0:05:07.110
I'm just going to add a top[br]margin to this Quantity header.

0:05:07.110,0:05:08.880
There, that looks better!

0:05:08.880,0:05:10.990
Now things appear more equally spaced.

0:05:10.990,0:05:12.790
I'm going to run this app on my device.

0:05:14.210,0:05:15.170
And here's the app.

0:05:15.170,0:05:16.320
It looks really good.

0:05:16.320,0:05:17.460
Great job.

0:05:17.460,0:05:21.250
When you need to add more UI changes to[br]your app, you can follow this pattern

0:05:21.250,0:05:25.360
of Google searching for the information[br]online and then applying it to your app.