WEBVTT 00:00:00.750 --> 00:00:03.360 To build out this layout let's first think about the views that we need. 00:00:03.360 --> 00:00:07.420 I'm going to assume that all of this is already built, and we're just 00:00:07.420 --> 00:00:10.910 going to talk about the new things that we need to add to our layout. 00:00:10.910 --> 00:00:15.030 The two new views that we need to add are a TextView for Toppings and 00:00:15.030 --> 00:00:18.090 CheckBox view for the Whipped cream item. 00:00:18.090 --> 00:00:21.470 You probably didn't know that this view existed in Android, but 00:00:21.470 --> 00:00:24.210 hopefully doing a Google search helped you find this answer. 00:00:25.380 --> 00:00:28.300 Moving on to Step 2, we need to position the views. 00:00:28.300 --> 00:00:30.820 Assuming these views are already correctly positioned, 00:00:30.820 --> 00:00:35.470 we just need to add Toppings and Whipped cream, vertically, in the same row. 00:00:35.470 --> 00:00:37.000 Since the root view is a vertical, 00:00:37.000 --> 00:00:39.990 linear layout, we can just add these two Views at the top of it. 00:00:40.990 --> 00:00:43.580 For the third step, we need to style the views. 00:00:43.580 --> 00:00:46.260 The style at the Toppings header is the same as the Quantity and 00:00:46.260 --> 00:00:49.030 Order Summary headers, so we'll be able to just copy and 00:00:49.030 --> 00:00:51.434 paste the headers that already exist. 00:00:51.434 --> 00:00:54.920 The CheckBox view is new though so we need to style it accordingly. 00:00:54.920 --> 00:00:59.176 We should allow for 24 dp of space in between the box and the text, 00:00:59.176 --> 00:01:04.054 and we should change the font size of Whipped cream to be font size of 16 sp. 00:01:04.054 --> 00:01:05.910 Let's make these changes to our app now. 00:01:07.180 --> 00:01:11.020 To add a Toppings header that looks like the Quantity header, I can just copy and 00:01:11.020 --> 00:01:12.730 paste this code. 00:01:12.730 --> 00:01:16.775 I copy it and then add it to the top of this vertical LinearLayout. 00:01:18.080 --> 00:01:20.170 Okay, so now it says Quantity twice here. 00:01:20.170 --> 00:01:22.960 I'm going to change the text so that it says Toppings. 00:01:22.960 --> 00:01:25.380 I also copied the margin bottom over so 00:01:25.380 --> 00:01:28.790 that there's some space in between this header and the content below it. 00:01:30.260 --> 00:01:32.660 Now we haven't added a CheckBox to our app before, so 00:01:32.660 --> 00:01:33.990 I'm going to Google search for how to do it. 00:01:33.990 --> 00:01:37.720 I'm going to search for checkbox android. 00:01:37.720 --> 00:01:40.840 Remember to add android because there could be checkboxes for 00:01:40.840 --> 00:01:44.850 other platforms, like for the web or other mobile platforms, 00:01:44.850 --> 00:01:48.090 this will help you get to a specific result for Android. 00:01:48.090 --> 00:01:49.760 Let's try the first link. 00:01:49.760 --> 00:01:52.900 This is the reference documentation for the CheckBox class. 00:01:52.900 --> 00:01:56.420 I scroll through and I see a nice class overview and 00:01:56.420 --> 00:01:58.960 then it goes straight into the XML attributes. 00:01:58.960 --> 00:02:02.880 What I'd really like though is an example of some XML for CheckBox. 00:02:02.880 --> 00:02:05.100 So let's go back to the search results. 00:02:05.100 --> 00:02:07.070 Let's click on the second link. 00:02:07.070 --> 00:02:10.440 Cool, now it shows some pictures of Checkboxes. 00:02:10.440 --> 00:02:12.040 And here's some XML. 00:02:12.040 --> 00:02:13.180 This looks pretty good. 00:02:13.180 --> 00:02:16.140 It has two CheckBoxes within a LinearLayout. 00:02:16.140 --> 00:02:19.070 I'm just going to copy this first CheckBox, and 00:02:19.070 --> 00:02:20.330 then I'm going to paste it into our app. 00:02:21.590 --> 00:02:25.912 Back in our app, I'm going to paste it after the Toppings text, but 00:02:25.912 --> 00:02:28.753 before the Quantity text, so right here. 00:02:28.753 --> 00:02:33.040 I'm going to modify the XML because it doesn't exactly quite fit our use case. 00:02:33.040 --> 00:02:36.710 I'm going to remove the id and also the text here. 00:02:36.710 --> 00:02:39.750 Instead of meat, because our coffee shop doesn't sell meat, 00:02:39.750 --> 00:02:41.660 I'm going to type in Whipped cream. 00:02:43.030 --> 00:02:45.940 By the way, what you saw before, @string/meat, 00:02:45.940 --> 00:02:50.410 was referring to a resource string in the strings.xml file. 00:02:50.410 --> 00:02:52.690 We'll talk about that a little more later, but for now, 00:02:52.690 --> 00:02:55.550 you can just type the string in directly here. 00:02:55.550 --> 00:02:59.350 And look, the preview updates, so now we have a Checkbox that says Whipped cream. 00:02:59.350 --> 00:03:03.380 What's cool about the Checkbox view is that it gives you a box, 00:03:03.380 --> 00:03:08.100 as well as some text, so you don't have to add another text view here. 00:03:08.100 --> 00:03:10.850 We also don't need this line here that talks about onClick. 00:03:12.089 --> 00:03:16.500 All we care about for this coding task is making the CheckBox appear here. 00:03:16.500 --> 00:03:20.260 The other way you could've arrived at this XML is by checking the common 00:03:20.260 --> 00:03:21.460 Android views cheat sheet. 00:03:22.540 --> 00:03:25.410 This cheat sheet lists a bunch of common Android views and 00:03:25.410 --> 00:03:27.460 it has examples for the XML as well. 00:03:28.480 --> 00:03:32.739 Here's the CheckBox view and here's an example of what it would look like and 00:03:32.739 --> 00:03:34.125 the corresponding XML. 00:03:34.125 --> 00:03:37.270 You could have copied the XML from here and pasted it into the app. 00:03:38.340 --> 00:03:41.010 Going back to Android Studio let's run the app to see how it looks. 00:03:42.480 --> 00:03:43.320 And here it is. 00:03:43.320 --> 00:03:44.050 It looks pretty good. 00:03:44.050 --> 00:03:46.695 We have the Toppings header and a Whipped cream CheckBox. 00:03:47.750 --> 00:03:50.330 We also get this cool animation when we check the box. 00:03:51.360 --> 00:03:54.790 The only problem I see though is that the spacing is off. 00:03:54.790 --> 00:03:57.840 For example, it's too tight in between the Quantity header and 00:03:57.840 --> 00:04:01.390 the Whipped cream CheckBox, and there's also not enough space in between here. 00:04:02.410 --> 00:04:04.480 Going back to the red lines that were provided, 00:04:04.480 --> 00:04:09.370 we should add 24 dp of space here, and change the font size to be 16 sp. 00:04:10.830 --> 00:04:12.960 First I'm going to change the font size. 00:04:12.960 --> 00:04:18.110 I'm going to type in android:textSize and then put in a 16sp. 00:04:18.110 --> 00:04:22.043 I'm going to open up the preview here to check that it actually increased in font 00:04:22.043 --> 00:04:23.690 size, and it did. 00:04:23.690 --> 00:04:26.600 If you're not sure if it refreshed or not you can always hit this button. 00:04:26.600 --> 00:04:27.430 Okay. 00:04:27.430 --> 00:04:29.950 Now to figure out the spacing I actually got it to work 00:04:29.950 --> 00:04:32.240 by doing a bunch of trial and error. 00:04:32.240 --> 00:04:34.370 I tried to set the margin values and 00:04:34.370 --> 00:04:38.340 then I tried to set the padding values, and it turned out that paddingLeft 00:04:38.340 --> 00:04:42.520 does control the spacing in between the box and the text here. 00:04:42.520 --> 00:04:43.285 Let's add the padding now. 00:04:44.900 --> 00:04:46.960 Cool, the text moved over. 00:04:46.960 --> 00:04:49.040 I still see one more problem, though. 00:04:49.040 --> 00:04:53.090 There's enough vertical space here, but there's not enough vertical space here. 00:04:53.090 --> 00:04:57.760 I either need to add bottom padding, or bottom margin to this CheckBox view, or 00:04:57.760 --> 00:05:01.720 I need to add top padding, or top margin to this Quantity header. 00:05:01.720 --> 00:05:02.620 Either way would work, 00:05:02.620 --> 00:05:07.110 I'm just going to add a top margin to this Quantity header. 00:05:07.110 --> 00:05:08.880 There, that looks better! 00:05:08.880 --> 00:05:10.990 Now things appear more equally spaced. 00:05:10.990 --> 00:05:12.790 I'm going to run this app on my device. 00:05:14.210 --> 00:05:15.170 And here's the app. 00:05:15.170 --> 00:05:16.320 It looks really good. 00:05:16.320 --> 00:05:17.460 Great job. 00:05:17.460 --> 00:05:21.250 When you need to add more UI changes to your app, you can follow this pattern 00:05:21.250 --> 00:05:25.360 of Google searching for the information online and then applying it to your app.