English subtitles

← Build Layout

Get Embed Code
13 Languages

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

  1. To build this layout,
    I open up the activity_main.xml file.
  2. I know that I need a vertical linear
    layout to put each of these views
  3. in a vertical column.
  4. So, I'm going to first change the
    relative layout into a linear layout.
  5. Immediately, it shows an error saying
    that the opening tag does not match
  6. the closing tag, so I can just copy
    this over and then paste it down here.
  7. Now the tags match.
  8. Next, I can add in the views.
  9. First, I have a quantity text view.
  10. So I'm going to take this text view and
    then change the text inside to quantity.
  11. Next, I have a text view that says zero.
  12. So I can copy the first text view and
    paste it below it.
  13. I'm going to change it so the text says
    zero to match the screenshot here.
  14. The last child in this
    linear layout is a button.
  15. We haven't added a button before in our
    layout, so let's Google Search that.
  16. If you open up a browser you
    can search for button android.
  17. This first link looks good,
    it's a developer.android.com site.
  18. And here's the documentation for button,
    we can ignore most of this text here.
  19. We scroll down to read
    the class overview.
  20. It talks a little bit about some Java
    code, which we haven't learned yet but
  21. down here we have some xml for a button.
  22. We can copy this and
    see what it does in our code.
  23. In our layout I'm going to add
    a button below these two text views.
  24. I'm going to paste the code
    from the documentation here.
  25. And now instead of the self destruct
    string, I'm going to go for
  26. something a little
    friendlier like order.
  27. This last line we can also
    delete because we don't need it.
  28. Cool, so now you have a quantity text
    view, a text view that says zero, and
  29. an order button.
  30. Let's run it on our app,
    to see what it looks like,
  31. by hitting the green play button.
  32. We can see down here
    that it's still building.
  33. Oh, this isn't what we wanted.
  34. It appears that our linear layout is
    actually horizontal instead of vertical.
  35. So let's make sure that we add
    the orientation attribute.
  36. We're going to change this to say
    android;orientation="vertical".
  37. That should fix the problem.
  38. So let's hit run again.
  39. Okay, that's better now.
  40. The three children are showing
    up in a vertical column.
  41. Now we just need to
    style these fields so
  42. they look a little bit more like
    the screenshot we were given.
  43. From this screenshot we see that
    the quantity text view is in all caps.
  44. In lesson one we learned about
    an attribute called android:textAllCaps,
  45. and it's showing up here
    in the auto-complete.
  46. If it shows up like this,
    you can just hit enter and
  47. it automatically adds it
    in the code here for you.
  48. We set that value to be true
    because we want it in all caps.
  49. The reason why it's better to use
    this attribute to capitalize the text
  50. is because if we ever want to change the
    UI so that quantity is in lower case,
  51. like this, all we need to do
    is just remove this attribute
  52. instead of going and changing this text.
  53. Next, for this text here that says zero,
    we should use a text size of 16sp.
  54. Let me add that now and it shows up
    in the auto-complete suggestions so
  55. I just hit enter and
    then I choose 16sp for the value.
  56. We also want it to be
    a black font color.
  57. I'm going to use the Android
    system color for
  58. black, which is referred to like this.
  59. Cool, that takes care of both
    the quantity and the zero text views.
  60. The order button is fine as is, it will
    automatically capitalize the text for
  61. you in a button and the height and
    width are wrap content.
  62. We do have a need to resolve
    this vertical space here.
  63. We want 16dp of padding or
    margin in between the quantity and
  64. the zero text views.
  65. We also want also want 16dp of
    padding in between the zero and
  66. the order button.
  67. You can implement this
    in many different ways,
  68. I'm just going to choose to add it as
    layout top margin for this button.
  69. And I'm going to add it as a bottom
    margin for this quantity text view.
  70. Feel free to do it a different
    way as long as it looks the same.
  71. The reason why I chose to do a bottom
    margin and a top margin is because I
  72. know that this middle area
    here is going to change later.
  73. We're going to change it to be
    a quantity picker with a plus and
  74. minus button, and I still want to have
    16dp of space between the quantity
  75. title and the picker.
  76. Same for the button.
  77. Okay, let's run it again
    now on our device.
  78. Cool, and it looks just like we wanted.
  79. The quantity text view is in all caps,
    the zero text view is in
  80. black font color, size 16sp, and
    we have the order button here.
  81. We also have 16dp of space
    between these views.
  82. Good job.
    Oh, and I almost forgot.
  83. The quiz also asks for what happens
    when you click on this button.
  84. Well, actually it does nothing,
    for now at least.
  85. Keep watching to find
    out what happens next.