YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 3 created 05/25/2016 by Udacity Robot.

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