Return to Video

Adding a CheckBox - Solution

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

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

English subtitles

Revisions Compare revisions