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

1. Title:
   Add the Other Team in XML
2. Description:

3. 450 0:00 - 0:04
   Before I begin coding,
   I'm going to answer this question.

   ¶

4. 3650 0:04 - 0:07
   I really still know about only two
   view groups, LinearLayouts and
5. 7460 0:07 - 0:09
   RelativeLayouts.
6. 8626 0:09 - 0:14
   Now the key word right here was that
   these two have to take up equal space.
7. 13710 0:14 - 0:16
   Using layout weight is
   a really easy way to do this.
8. 17480 0:17 - 0:20
   Okay, let's go ahead and
   look at the code.
9. 20070 0:20 - 0:23
   All right, I'm not working in Java
   anymore, so I'm going to go ahead and
10. 22880 0:23 - 0:25
    go over to activity_main.xml.
11. 25830 0:26 - 0:27
    And here's my XML file.
12. 28270 0:28 - 0:34
    So I'm going to start by putting all
    of this code to another LinearLayout.
13. 33875 0:34 - 0:38
    And this is the parent LinearLayout for
    my two mini LinearLayouts.
14. 39360 0:39 - 0:44
    And I'm going to move
    these two lines up here,
15. 43900 0:44 - 0:50
    because they need to be attached to
    the root view, add a closing brace.
16. 49670 0:50 - 0:54
    Okay, Android Studio automatically
    made a closing tag for me right here.
17. 53990 0:54 - 0:55
    So, I'm going to go ahead and
18. 55060 0:55 - 0:59
    cut this closing tag,
    scroll down to the bottom, and paste it.
19. 61160 1:01 - 1:06
    Okay, now I got a red squiggly line,
    and if I look at the error,
20. 66450 1:06 - 1:11
    I can see that it says I need to have
    layout_height and layout_width defined.
21. 70660 1:11 - 1:12
    Whoops!
    All right, let's do that.
22. 73210 1:13 - 1:18
    So because this is the root view, I'll
    go ahead and make this match_parent.
23. 80050 1:20 - 1:21
    Okay, so
24. 81140 1:21 - 1:26
    I have one LinearLayout surrounding
    a child LinearLayout right now.
25. 85610 1:26 - 1:31
    And if I go to the Preview,
    it looks pretty much the same.
26. 90500 1:31 - 1:36
    Okay, so what I'm going to do,
    is I'm going to copy everything in
27. 95510 1:36 - 1:41
    the Team A LinearLayout, and right
    below Team A, I am going to paste it.
28. 102160 1:42 - 1:47
    And this is going to be
    my Team B LinearLayout.
29. 107026 1:47 - 1:52
    So, now things are beginning to
    look a little bit disorganized.
30. 112209 1:52 - 1:57
    So I am going to do a Cmd+A, or
    a select all, and then I am going to
31. 117264 1:57 - 2:04
    use the keyboard shortcut
    Cmd+Option+L to format my code.
32. 123520 2:04 - 2:08
    On Windows, that's Ctrl+Alt+L,
    that looks a little bit better.
33. 127930 2:08 - 2:12
    Now, I just want to make sure that
    you understand what's going on here.
34. 131560 2:12 - 2:17
    Scrolling to the top,
    I have a root LinearLayout here.
35. 136640 2:17 - 2:22
    It starts here, and if I scroll all
    the way to the bottom, it ends here.
36. 143320 2:23 - 2:27
    Inside of that root LinearLayout,
    I'm going to scroll up again.
37. 148220 2:28 - 2:32
    I've got one child layout here,
    which starts here.
38. 151919 2:32 - 2:35
    I'll scroll down slowly.
39. 155459 2:35 - 2:37
    And it ends here.
40. 157150 2:37 - 2:39
    This is for TeamA.
41. 158860 2:39 - 2:42
    And I have another child LinearLayout,
    which starts here.
42. 162260 2:42 - 2:47
    Scroll down slowly, ends here for TeamB.
43. 167418 2:47 - 2:50
    All right,
    now I noticed some red up at the top, so
44. 169956 2:50 - 2:53
    I'm going to scroll up again and
    see what the error says.
45. 174400 2:54 - 2:58
    Wrong orientation, no orientation
    specified, and default is horizontal.
46. 178440 2:58 - 3:01
    Yet this layout has multiple children,
47. 180965 3:01 - 3:04
    where at least one has
    width match_parent.
48. 183793 3:04 - 3:08
    Hm, well I do want it to be horizontal,
    but let's go ahead and
49. 188092 3:08 - 3:10
    specify the orientation.
50. 191360 3:11 - 3:15
    Again, this is not technically needed,
    because the default is horizontal, but
51. 195400 3:15 - 3:16
    it's good to be explicit.
52. 197950 3:18 - 3:22
    Okay, and it was saying something
    about children covering each other up.
53. 202168 3:22 - 3:24
    I'm going to click on Preview.
54. 204334 3:24 - 3:28
    Hm, And this doesn't seem to have really
    changed very much, even though I went
55. 207901 3:28 - 3:31
    to all the trouble of copying and
    pasting another LinearLayout.
56. 211905 3:32 - 3:34
    This might have had to do with
    the error that I just looked at.
57. 215525 3:36 - 3:39
    It was saying that it's
    a horizontal layout.
58. 218915 3:39 - 3:43
    So it's trying to lay these two
    LinearLayouts next to each other, but
59. 222615 3:43 - 3:47
    that the LinearLayout
    has a layout_width of
60. 226591 3:47 - 3:50
    match_parent which fills up the screen.
61. 229940 3:50 - 3:55
    So basically my first LinearLayout
    is filling up the screen, and
62. 234510 3:55 - 3:59
    then the other LinearLayout is getting
    placed next to it somewhere off screen.
63. 240000 4:00 - 4:03
    So let's think about what we actually
    want to have happen at this point.
64. 243360 4:03 - 4:08
    We want to have the two layouts taking
    up equal space and next to each other.
65. 248090 4:08 - 4:12
    So this when we're going to need
    to bring in layout_weights.
66. 251860 4:12 - 4:16
    I'm going to take
    the first LinearLayout and
67. 256267 4:16 - 4:20
    give it a layout_weight of 1.
68. 261140 4:21 - 4:26
    I'm also going to set its width to 0.
69. 266160 4:26 - 4:30
    Okay, so we can see already that we
    do in fact have two LinearLayouts,
70. 269940 4:30 - 4:33
    they're just not really
    being displayed properly.
71. 272940 4:33 - 4:35
    But this is a bit better.
72. 274560 4:35 - 4:38
    So I have to put a layout_weight
    also on my second LinearLayout,
73. 277807 4:38 - 4:39
    this one right here.
74. 278877 4:39 - 4:41
    So I'm going to scroll down.
75. 280500 4:41 - 4:42
    Here's my second LinearLayout.
76. 282190 4:42 - 4:44
    I'm going to do exactly the same thing.
77. 284250 4:44 - 4:48
    I'm going to say that it has
    a layout_weight of 1 as well, so
78. 288186 4:48 - 4:51
    now they have equivalent layout_weights.
79. 292650 4:53 - 4:56
    And then I'm going to
    set the width to 0.
80. 295630 4:56 - 5:00
    Okay, and the reason that I set
    the width of both of them to 0,
81. 300160 5:00 - 5:05
    is basically, that if both of these
    sides aren't taking up any width.
82. 304588 5:05 - 5:07
    Then, it's going to take
    all the extra space,
83. 306850 5:07 - 5:11
    which is the entire screen, and
    divide it up, giving half to one and
84. 311340 5:11 - 5:15
    half to the other, because they
    both have the same layout weight.
85. 314950 5:15 - 5:18
    If that's at all confusing,
    I've linked to a few videos in
86. 317650 5:18 - 5:20
    the instructor notes that
    talk about layout_weight.
87. 320350 5:20 - 5:24
    Okay, but this is looking pretty good,
    except it says Team A.
88. 324162 5:24 - 5:29
    I'm going to scroll down to change
    that here, change this to Team B.
89. 330460 5:30 - 5:35
    Now you might have noticed that
    there is also an error here, and
90. 335420 5:35 - 5:40
    that error occurs because,
    well, we have a duplicate ID.
91. 339760 5:40 - 5:42
    Remember, I just copied and
    pasted the code.
92. 342340 5:42 - 5:46
    So, we basically have two things
    that are trying to have the same id
93. 346090 5:46 - 5:48
    of team_a_score.
94. 348030 5:48 - 5:52
    So, I'm actually going to
    change this to team_b_score.
95. 351800 5:52 - 5:54
    Okay, this is looking pretty good.
96. 353840 5:54 - 5:55
    It's a little hard to see.
97. 354830 5:55 - 5:55
    I'll zoom in.
98. 356800 5:57 - 5:58
    But, it says Team B here.
99. 359290 5:59 - 6:02
    And I got all the correct buttons,
    and all the correct text views.
100. 362420 6:02 - 6:04
     So I'm going to try to
     run this on my phone.
101. 365490 6:05 - 6:08
     Okay, and this looks pretty good.
102. 367960 6:08 - 6:13
     Now if I press the Team A buttons,
     it's updating so that's great.
103. 373418 6:13 - 6:19
     If I press the Team B buttons,
     well, it's also updating.
104. 378840 6:19 - 6:21
     That's special.
105. 380910 6:21 - 6:23
     But remember,
     we just wanted to get the XML right.
106. 383480 6:23 - 6:26
     We didn't really care about the Java.
107. 385630 6:26 - 6:29
     But now that we got the XML working,
     why not fix the Java?