1
00:00:00,450 --> 00:00:03,650
Before I begin coding,
I'm going to answer this question.

2
00:00:03,650 --> 00:00:07,460
I really still know about only two
view groups, LinearLayouts and

3
00:00:07,460 --> 00:00:08,626
RelativeLayouts.

4
00:00:08,626 --> 00:00:13,710
Now the key word right here was that
these two have to take up equal space.

5
00:00:13,710 --> 00:00:16,260
Using layout weight is
a really easy way to do this.

6
00:00:17,480 --> 00:00:20,070
Okay, let's go ahead and
look at the code.

7
00:00:20,070 --> 00:00:22,880
All right, I'm not working in Java
anymore, so I'm going to go ahead and

8
00:00:22,880 --> 00:00:24,775
go over to activity_main.xml.

9
00:00:25,830 --> 00:00:27,150
And here's my XML file.

10
00:00:28,270 --> 00:00:33,875
So I'm going to start by putting all
of this code to another LinearLayout.

11
00:00:33,875 --> 00:00:38,334
And this is the parent LinearLayout for
my two mini LinearLayouts.

12
00:00:39,360 --> 00:00:43,900
And I'm going to move
these two lines up here,

13
00:00:43,900 --> 00:00:49,670
because they need to be attached to
the root view, add a closing brace.

14
00:00:49,670 --> 00:00:53,990
Okay, Android Studio automatically
made a closing tag for me right here.

15
00:00:53,990 --> 00:00:55,060
So, I'm going to go ahead and

16
00:00:55,060 --> 00:00:59,370
cut this closing tag,
scroll down to the bottom, and paste it.

17
00:01:01,160 --> 00:01:06,450
Okay, now I got a red squiggly line,
and if I look at the error,

18
00:01:06,450 --> 00:01:10,660
I can see that it says I need to have
layout_height and layout_width defined.

19
00:01:10,660 --> 00:01:12,040
Whoops!
All right, let's do that.

20
00:01:13,210 --> 00:01:17,580
So because this is the root view, I'll
go ahead and make this match_parent.

21
00:01:20,050 --> 00:01:21,140
Okay, so

22
00:01:21,140 --> 00:01:25,610
I have one LinearLayout surrounding
a child LinearLayout right now.

23
00:01:25,610 --> 00:01:30,500
And if I go to the Preview,
it looks pretty much the same.

24
00:01:30,500 --> 00:01:35,510
Okay, so what I'm going to do,
is I'm going to copy everything in

25
00:01:35,510 --> 00:01:41,100
the Team A LinearLayout, and right
below Team A, I am going to paste it.

26
00:01:42,160 --> 00:01:47,026
And this is going to be
my Team B LinearLayout.

27
00:01:47,026 --> 00:01:52,209
So, now things are beginning to
look a little bit disorganized.

28
00:01:52,209 --> 00:01:57,264
So I am going to do a Cmd+A, or
a select all, and then I am going to

29
00:01:57,264 --> 00:02:03,520
use the keyboard shortcut
Cmd+Option+L to format my code.

30
00:02:03,520 --> 00:02:07,930
On Windows, that's Ctrl+Alt+L,
that looks a little bit better.

31
00:02:07,930 --> 00:02:11,560
Now, I just want to make sure that
you understand what's going on here.

32
00:02:11,560 --> 00:02:16,640
Scrolling to the top,
I have a root LinearLayout here.

33
00:02:16,640 --> 00:02:21,930
It starts here, and if I scroll all
the way to the bottom, it ends here.

34
00:02:23,320 --> 00:02:26,550
Inside of that root LinearLayout,
I'm going to scroll up again.

35
00:02:28,220 --> 00:02:31,919
I've got one child layout here,
which starts here.

36
00:02:31,919 --> 00:02:35,459
I'll scroll down slowly.

37
00:02:35,459 --> 00:02:37,150
And it ends here.

38
00:02:37,150 --> 00:02:38,860
This is for TeamA.

39
00:02:38,860 --> 00:02:42,260
And I have another child LinearLayout,
which starts here.

40
00:02:42,260 --> 00:02:47,418
Scroll down slowly, ends here for TeamB.

41
00:02:47,418 --> 00:02:49,956
All right,
now I noticed some red up at the top, so

42
00:02:49,956 --> 00:02:52,750
I'm going to scroll up again and
see what the error says.

43
00:02:54,400 --> 00:02:58,440
Wrong orientation, no orientation
specified, and default is horizontal.

44
00:02:58,440 --> 00:03:00,965
Yet this layout has multiple children,

45
00:03:00,965 --> 00:03:03,793
where at least one has
width match_parent.

46
00:03:03,793 --> 00:03:08,092
Hm, well I do want it to be horizontal,
but let's go ahead and

47
00:03:08,092 --> 00:03:10,010
specify the orientation.

48
00:03:11,360 --> 00:03:15,400
Again, this is not technically needed,
because the default is horizontal, but

49
00:03:15,400 --> 00:03:16,430
it's good to be explicit.

50
00:03:17,950 --> 00:03:22,168
Okay, and it was saying something
about children covering each other up.

51
00:03:22,168 --> 00:03:24,334
I'm going to click on Preview.

52
00:03:24,334 --> 00:03:27,901
Hm, And this doesn't seem to have really
changed very much, even though I went

53
00:03:27,901 --> 00:03:30,842
to all the trouble of copying and
pasting another LinearLayout.

54
00:03:31,905 --> 00:03:34,345
This might have had to do with
the error that I just looked at.

55
00:03:35,525 --> 00:03:38,915
It was saying that it's
a horizontal layout.

56
00:03:38,915 --> 00:03:42,615
So it's trying to lay these two
LinearLayouts next to each other, but

57
00:03:42,615 --> 00:03:46,591
that the LinearLayout
has a layout_width of

58
00:03:46,591 --> 00:03:49,940
match_parent which fills up the screen.

59
00:03:49,940 --> 00:03:54,510
So basically my first LinearLayout
is filling up the screen, and

60
00:03:54,510 --> 00:03:58,510
then the other LinearLayout is getting
placed next to it somewhere off screen.

61
00:04:00,000 --> 00:04:03,360
So let's think about what we actually
want to have happen at this point.

62
00:04:03,360 --> 00:04:08,090
We want to have the two layouts taking
up equal space and next to each other.

63
00:04:08,090 --> 00:04:11,860
So this when we're going to need
to bring in layout_weights.

64
00:04:11,860 --> 00:04:16,267
I'm going to take
the first LinearLayout and

65
00:04:16,267 --> 00:04:19,579
give it a layout_weight of 1.

66
00:04:21,140 --> 00:04:26,160
I'm also going to set its width to 0.

67
00:04:26,160 --> 00:04:29,940
Okay, so we can see already that we
do in fact have two LinearLayouts,

68
00:04:29,940 --> 00:04:32,940
they're just not really
being displayed properly.

69
00:04:32,940 --> 00:04:34,560
But this is a bit better.

70
00:04:34,560 --> 00:04:37,807
So I have to put a layout_weight
also on my second LinearLayout,

71
00:04:37,807 --> 00:04:38,877
this one right here.

72
00:04:38,877 --> 00:04:40,500
So I'm going to scroll down.

73
00:04:40,500 --> 00:04:42,190
Here's my second LinearLayout.

74
00:04:42,190 --> 00:04:44,250
I'm going to do exactly the same thing.

75
00:04:44,250 --> 00:04:48,186
I'm going to say that it has
a layout_weight of 1 as well, so

76
00:04:48,186 --> 00:04:51,080
now they have equivalent layout_weights.

77
00:04:52,650 --> 00:04:55,630
And then I'm going to
set the width to 0.

78
00:04:55,630 --> 00:05:00,160
Okay, and the reason that I set
the width of both of them to 0,

79
00:05:00,160 --> 00:05:04,588
is basically, that if both of these
sides aren't taking up any width.

80
00:05:04,588 --> 00:05:06,850
Then, it's going to take
all the extra space,

81
00:05:06,850 --> 00:05:11,340
which is the entire screen, and
divide it up, giving half to one and

82
00:05:11,340 --> 00:05:14,950
half to the other, because they
both have the same layout weight.

83
00:05:14,950 --> 00:05:17,650
If that's at all confusing,
I've linked to a few videos in

84
00:05:17,650 --> 00:05:20,350
the instructor notes that
talk about layout_weight.

85
00:05:20,350 --> 00:05:24,162
Okay, but this is looking pretty good,
except it says Team A.

86
00:05:24,162 --> 00:05:29,310
I'm going to scroll down to change
that here, change this to Team B.

87
00:05:30,460 --> 00:05:35,420
Now you might have noticed that
there is also an error here, and

88
00:05:35,420 --> 00:05:39,760
that error occurs because,
well, we have a duplicate ID.

89
00:05:39,760 --> 00:05:42,340
Remember, I just copied and
pasted the code.

90
00:05:42,340 --> 00:05:46,090
So, we basically have two things
that are trying to have the same id

91
00:05:46,090 --> 00:05:48,030
of team_a_score.

92
00:05:48,030 --> 00:05:51,800
So, I'm actually going to
change this to team_b_score.

93
00:05:51,800 --> 00:05:53,840
Okay, this is looking pretty good.

94
00:05:53,840 --> 00:05:54,830
It's a little hard to see.

95
00:05:54,830 --> 00:05:55,420
I'll zoom in.

96
00:05:56,800 --> 00:05:58,150
But, it says Team B here.

97
00:05:59,290 --> 00:06:02,420
And I got all the correct buttons,
and all the correct text views.

98
00:06:02,420 --> 00:06:03,870
So I'm going to try to
run this on my phone.

99
00:06:05,490 --> 00:06:07,960
Okay, and this looks pretty good.

100
00:06:07,960 --> 00:06:13,418
Now if I press the Team A buttons,
it's updating so that's great.

101
00:06:13,418 --> 00:06:18,840
If I press the Team B buttons,
well, it's also updating.

102
00:06:18,840 --> 00:06:20,910
That's special.

103
00:06:20,910 --> 00:06:23,480
But remember,
we just wanted to get the XML right.

104
00:06:23,480 --> 00:06:25,630
We didn't really care about the Java.

105
00:06:25,630 --> 00:06:29,140
But now that we got the XML working,
why not fix the Java?