YouTube

Got a YouTube account?

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

English subtitles

← Add the Other Team in XML

Get Embed Code
13 Languages

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

  1. Before I begin coding,
    I'm going to answer this question.

  2. I really still know about only two
    view groups, LinearLayouts and
  3. RelativeLayouts.
  4. Now the key word right here was that
    these two have to take up equal space.
  5. Using layout weight is
    a really easy way to do this.
  6. Okay, let's go ahead and
    look at the code.
  7. All right, I'm not working in Java
    anymore, so I'm going to go ahead and
  8. go over to activity_main.xml.
  9. And here's my XML file.
  10. So I'm going to start by putting all
    of this code to another LinearLayout.
  11. And this is the parent LinearLayout for
    my two mini LinearLayouts.
  12. And I'm going to move
    these two lines up here,
  13. because they need to be attached to
    the root view, add a closing brace.
  14. Okay, Android Studio automatically
    made a closing tag for me right here.
  15. So, I'm going to go ahead and
  16. cut this closing tag,
    scroll down to the bottom, and paste it.
  17. Okay, now I got a red squiggly line,
    and if I look at the error,
  18. I can see that it says I need to have
    layout_height and layout_width defined.
  19. Whoops!
    All right, let's do that.
  20. So because this is the root view, I'll
    go ahead and make this match_parent.
  21. Okay, so
  22. I have one LinearLayout surrounding
    a child LinearLayout right now.
  23. And if I go to the Preview,
    it looks pretty much the same.
  24. Okay, so what I'm going to do,
    is I'm going to copy everything in
  25. the Team A LinearLayout, and right
    below Team A, I am going to paste it.
  26. And this is going to be
    my Team B LinearLayout.
  27. So, now things are beginning to
    look a little bit disorganized.
  28. So I am going to do a Cmd+A, or
    a select all, and then I am going to
  29. use the keyboard shortcut
    Cmd+Option+L to format my code.
  30. On Windows, that's Ctrl+Alt+L,
    that looks a little bit better.
  31. Now, I just want to make sure that
    you understand what's going on here.
  32. Scrolling to the top,
    I have a root LinearLayout here.
  33. It starts here, and if I scroll all
    the way to the bottom, it ends here.
  34. Inside of that root LinearLayout,
    I'm going to scroll up again.
  35. I've got one child layout here,
    which starts here.
  36. I'll scroll down slowly.
  37. And it ends here.
  38. This is for TeamA.
  39. And I have another child LinearLayout,
    which starts here.
  40. Scroll down slowly, ends here for TeamB.
  41. All right,
    now I noticed some red up at the top, so
  42. I'm going to scroll up again and
    see what the error says.
  43. Wrong orientation, no orientation
    specified, and default is horizontal.
  44. Yet this layout has multiple children,
  45. where at least one has
    width match_parent.
  46. Hm, well I do want it to be horizontal,
    but let's go ahead and
  47. specify the orientation.
  48. Again, this is not technically needed,
    because the default is horizontal, but
  49. it's good to be explicit.
  50. Okay, and it was saying something
    about children covering each other up.
  51. I'm going to click on Preview.
  52. Hm, And this doesn't seem to have really
    changed very much, even though I went
  53. to all the trouble of copying and
    pasting another LinearLayout.
  54. This might have had to do with
    the error that I just looked at.
  55. It was saying that it's
    a horizontal layout.
  56. So it's trying to lay these two
    LinearLayouts next to each other, but
  57. that the LinearLayout
    has a layout_width of
  58. match_parent which fills up the screen.
  59. So basically my first LinearLayout
    is filling up the screen, and
  60. then the other LinearLayout is getting
    placed next to it somewhere off screen.
  61. So let's think about what we actually
    want to have happen at this point.
  62. We want to have the two layouts taking
    up equal space and next to each other.
  63. So this when we're going to need
    to bring in layout_weights.
  64. I'm going to take
    the first LinearLayout and
  65. give it a layout_weight of 1.
  66. I'm also going to set its width to 0.
  67. Okay, so we can see already that we
    do in fact have two LinearLayouts,
  68. they're just not really
    being displayed properly.
  69. But this is a bit better.
  70. So I have to put a layout_weight
    also on my second LinearLayout,
  71. this one right here.
  72. So I'm going to scroll down.
  73. Here's my second LinearLayout.
  74. I'm going to do exactly the same thing.
  75. I'm going to say that it has
    a layout_weight of 1 as well, so
  76. now they have equivalent layout_weights.
  77. And then I'm going to
    set the width to 0.
  78. Okay, and the reason that I set
    the width of both of them to 0,
  79. is basically, that if both of these
    sides aren't taking up any width.
  80. Then, it's going to take
    all the extra space,
  81. which is the entire screen, and
    divide it up, giving half to one and
  82. half to the other, because they
    both have the same layout weight.
  83. If that's at all confusing,
    I've linked to a few videos in
  84. the instructor notes that
    talk about layout_weight.
  85. Okay, but this is looking pretty good,
    except it says Team A.
  86. I'm going to scroll down to change
    that here, change this to Team B.
  87. Now you might have noticed that
    there is also an error here, and
  88. that error occurs because,
    well, we have a duplicate ID.
  89. Remember, I just copied and
    pasted the code.
  90. So, we basically have two things
    that are trying to have the same id
  91. of team_a_score.
  92. So, I'm actually going to
    change this to team_b_score.
  93. Okay, this is looking pretty good.
  94. It's a little hard to see.
  95. I'll zoom in.
  96. But, it says Team B here.
  97. And I got all the correct buttons,
    and all the correct text views.
  98. So I'm going to try to
    run this on my phone.
  99. Okay, and this looks pretty good.
  100. Now if I press the Team A buttons,
    it's updating so that's great.
  101. If I press the Team B buttons,
    well, it's also updating.
  102. That's special.
  103. But remember,
    we just wanted to get the XML right.
  104. We didn't really care about the Java.
  105. But now that we got the XML working,
    why not fix the Java?