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

1. Title:
   Build Layout
2. Description:

3. 180 0:00 - 0:05
   To build this layout,
   I open up the activity_main.xml file.
4. 4710 0:05 - 0:08
   I know that I need a vertical linear
   layout to put each of these views
5. 7670 0:08 - 0:09
   in a vertical column.
6. 9340 0:09 - 0:13
   So, I'm going to first change the
   relative layout into a linear layout.
7. 12870 0:13 - 0:17
   Immediately, it shows an error saying
   that the opening tag does not match
8. 17110 0:17 - 0:21
   the closing tag, so I can just copy
   this over and then paste it down here.
9. 20840 0:21 - 0:22
   Now the tags match.
10. 22100 0:22 - 0:24
    Next, I can add in the views.
11. 23930 0:24 - 0:26
    First, I have a quantity text view.
12. 25720 0:26 - 0:30
    So I'm going to take this text view and
    then change the text inside to quantity.
13. 29880 0:30 - 0:32
    Next, I have a text view that says zero.
14. 31960 0:32 - 0:34
    So I can copy the first text view and
    paste it below it.
15. 34460 0:34 - 0:38
    I'm going to change it so the text says
    zero to match the screenshot here.
16. 38430 0:38 - 0:42
    The last child in this
    linear layout is a button.
17. 41500 0:42 - 0:45
    We haven't added a button before in our
    layout, so let's Google Search that.
18. 45020 0:45 - 0:48
    If you open up a browser you
    can search for button android.
19. 48160 0:48 - 0:52
    This first link looks good,
    it's a developer.android.com site.
20. 52570 0:53 - 0:57
    And here's the documentation for button,
    we can ignore most of this text here.
21. 56700 0:57 - 0:59
    We scroll down to read
    the class overview.
22. 59250 0:59 - 1:03
    It talks a little bit about some Java
    code, which we haven't learned yet but
23. 63000 1:03 - 1:06
    down here we have some xml for a button.
24. 66300 1:06 - 1:09
    We can copy this and
    see what it does in our code.
25. 69280 1:09 - 1:12
    In our layout I'm going to add
    a button below these two text views.
26. 72420 1:12 - 1:16
    I'm going to paste the code
    from the documentation here.
27. 76030 1:16 - 1:19
    And now instead of the self destruct
    string, I'm going to go for
28. 78900 1:19 - 1:22
    something a little
    friendlier like order.
29. 82280 1:22 - 1:25
    This last line we can also
    delete because we don't need it.
30. 84900 1:25 - 1:29
    Cool, so now you have a quantity text
    view, a text view that says zero, and
31. 88580 1:29 - 1:29
    an order button.
32. 90320 1:30 - 1:32
    Let's run it on our app,
    to see what it looks like,
33. 92220 1:32 - 1:34
    by hitting the green play button.
34. 93540 1:34 - 1:36
    We can see down here
    that it's still building.
35. 97690 1:38 - 1:39
    Oh, this isn't what we wanted.
36. 98660 1:39 - 1:43
    It appears that our linear layout is
    actually horizontal instead of vertical.
37. 103470 1:43 - 1:48
    So let's make sure that we add
    the orientation attribute.
38. 107586 1:48 - 1:52
    We're going to change this to say
    android;orientation="vertical".
39. 112020 1:52 - 1:54
    That should fix the problem.
40. 113570 1:54 - 1:54
    So let's hit run again.
41. 115520 1:56 - 1:57
    Okay, that's better now.
42. 117010 1:57 - 2:00
    The three children are showing
    up in a vertical column.
43. 120270 2:00 - 2:02
    Now we just need to
    style these fields so
44. 121810 2:02 - 2:04
    they look a little bit more like
    the screenshot we were given.
45. 125280 2:05 - 2:08
    From this screenshot we see that
    the quantity text view is in all caps.
46. 129600 2:10 - 2:14
    In lesson one we learned about
    an attribute called android:textAllCaps,
47. 133950 2:14 - 2:16
    and it's showing up here
    in the auto-complete.
48. 136230 2:16 - 2:18
    If it shows up like this,
    you can just hit enter and
49. 138310 2:18 - 2:20
    it automatically adds it
    in the code here for you.
50. 141400 2:21 - 2:25
    We set that value to be true
    because we want it in all caps.
51. 144970 2:25 - 2:29
    The reason why it's better to use
    this attribute to capitalize the text
52. 148580 2:29 - 2:33
    is because if we ever want to change the
    UI so that quantity is in lower case,
53. 152620 2:33 - 2:36
    like this, all we need to do
    is just remove this attribute
54. 155650 2:36 - 2:38
    instead of going and changing this text.
55. 158020 2:38 - 2:42
    Next, for this text here that says zero,
    we should use a text size of 16sp.
56. 161840 2:42 - 2:46
    Let me add that now and it shows up
    in the auto-complete suggestions so
57. 165970 2:46 - 2:50
    I just hit enter and
    then I choose 16sp for the value.
58. 170000 2:50 - 2:52
    We also want it to be
    a black font color.
59. 172450 2:52 - 2:55
    I'm going to use the Android
    system color for
60. 174700 2:55 - 2:57
    black, which is referred to like this.
61. 177380 2:57 - 3:01
    Cool, that takes care of both
    the quantity and the zero text views.
62. 180558 3:01 - 3:05
    The order button is fine as is, it will
    automatically capitalize the text for
63. 185011 3:05 - 3:09
    you in a button and the height and
    width are wrap content.
64. 188820 3:09 - 3:12
    We do have a need to resolve
    this vertical space here.
65. 191898 3:12 - 3:16
    We want 16dp of padding or
    margin in between the quantity and
66. 195810 3:16 - 3:17
    the zero text views.
67. 197190 3:17 - 3:20
    We also want also want 16dp of
    padding in between the zero and
68. 200027 3:20 - 3:21
    the order button.
69. 201430 3:21 - 3:24
    You can implement this
    in many different ways,
70. 203960 3:24 - 3:28
    I'm just going to choose to add it as
    layout top margin for this button.
71. 211410 3:31 - 3:34
    And I'm going to add it as a bottom
    margin for this quantity text view.
72. 217810 3:38 - 3:41
    Feel free to do it a different
    way as long as it looks the same.
73. 220810 3:41 - 3:44
    The reason why I chose to do a bottom
    margin and a top margin is because I
74. 224000 3:44 - 3:47
    know that this middle area
    here is going to change later.
75. 227040 3:47 - 3:50
    We're going to change it to be
    a quantity picker with a plus and
76. 229670 3:50 - 3:55
    minus button, and I still want to have
    16dp of space between the quantity
77. 234620 3:55 - 3:57
    title and the picker.
78. 236830 3:57 - 3:58
    Same for the button.
79. 238610 3:59 - 4:01
    Okay, let's run it again
    now on our device.
80. 241280 4:01 - 4:03
    Cool, and it looks just like we wanted.
81. 243350 4:03 - 4:07
    The quantity text view is in all caps,
    the zero text view is in
82. 247150 4:07 - 4:12
    black font color, size 16sp, and
    we have the order button here.
83. 251710 4:12 - 4:15
    We also have 16dp of space
    between these views.
84. 255760 4:16 - 4:18
    Good job.
    Oh, and I almost forgot.
85. 258240 4:18 - 4:22
    The quiz also asks for what happens
    when you click on this button.
86. 261560 4:22 - 4:26
    Well, actually it does nothing,
    for now at least.
87. 265950 4:26 - 4:28
    Keep watching to find
    out what happens next.