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

I really still know about only two
view groups, LinearLayouts and

RelativeLayouts.

Now the key word right here was that
these two have to take up equal space.

Using layout weight is
a really easy way to do this.

Okay, let's go ahead and
look at the code.

All right, I'm not working in Java
anymore, so I'm going to go ahead and

go over to activity_main.xml.

And here's my XML file.

So I'm going to start by putting all
of this code to another LinearLayout.

And this is the parent LinearLayout for
my two mini LinearLayouts.

And I'm going to move
these two lines up here,

because they need to be attached to
the root view, add a closing brace.

Okay, Android Studio automatically
made a closing tag for me right here.

So, I'm going to go ahead and

cut this closing tag,
scroll down to the bottom, and paste it.

Okay, now I got a red squiggly line,
and if I look at the error,

I can see that it says I need to have
layout_height and layout_width defined.

Whoops!
All right, let's do that.

So because this is the root view, I'll
go ahead and make this match_parent.

Okay, so

I have one LinearLayout surrounding
a child LinearLayout right now.

And if I go to the Preview,
it looks pretty much the same.

Okay, so what I'm going to do,
is I'm going to copy everything in

the Team A LinearLayout, and right
below Team A, I am going to paste it.

And this is going to be
my Team B LinearLayout.

So, now things are beginning to
look a little bit disorganized.

So I am going to do a Cmd+A, or
a select all, and then I am going to

use the keyboard shortcut
Cmd+Option+L to format my code.

On Windows, that's Ctrl+Alt+L,
that looks a little bit better.

Now, I just want to make sure that
you understand what's going on here.

Scrolling to the top,
I have a root LinearLayout here.

It starts here, and if I scroll all
the way to the bottom, it ends here.

Inside of that root LinearLayout,
I'm going to scroll up again.

I've got one child layout here,
which starts here.

I'll scroll down slowly.

And it ends here.

This is for TeamA.

And I have another child LinearLayout,
which starts here.

Scroll down slowly, ends here for TeamB.

All right,
now I noticed some red up at the top, so

I'm going to scroll up again and
see what the error says.

Wrong orientation, no orientation
specified, and default is horizontal.

Yet this layout has multiple children,

where at least one has
width match_parent.

Hm, well I do want it to be horizontal,
but let's go ahead and

specify the orientation.

Again, this is not technically needed,
because the default is horizontal, but

it's good to be explicit.

Okay, and it was saying something
about children covering each other up.

I'm going to click on Preview.

Hm, And this doesn't seem to have really
changed very much, even though I went

to all the trouble of copying and
pasting another LinearLayout.

This might have had to do with
the error that I just looked at.

It was saying that it's
a horizontal layout.

So it's trying to lay these two
LinearLayouts next to each other, but

that the LinearLayout
has a layout_width of

match_parent which fills up the screen.

So basically my first LinearLayout
is filling up the screen, and

then the other LinearLayout is getting
placed next to it somewhere off screen.

So let's think about what we actually
want to have happen at this point.

We want to have the two layouts taking
up equal space and next to each other.

So this when we're going to need
to bring in layout_weights.

I'm going to take
the first LinearLayout and

give it a layout_weight of 1.

I'm also going to set its width to 0.

Okay, so we can see already that we
do in fact have two LinearLayouts,

they're just not really
being displayed properly.

But this is a bit better.

So I have to put a layout_weight
also on my second LinearLayout,

this one right here.

So I'm going to scroll down.

Here's my second LinearLayout.

I'm going to do exactly the same thing.

I'm going to say that it has
a layout_weight of 1 as well, so

now they have equivalent layout_weights.

And then I'm going to
set the width to 0.

Okay, and the reason that I set
the width of both of them to 0,

is basically, that if both of these
sides aren't taking up any width.

Then, it's going to take
all the extra space,

which is the entire screen, and
divide it up, giving half to one and

half to the other, because they
both have the same layout weight.

If that's at all confusing,
I've linked to a few videos in

the instructor notes that
talk about layout_weight.

Okay, but this is looking pretty good,
except it says Team A.

I'm going to scroll down to change
that here, change this to Team B.

Now you might have noticed that
there is also an error here, and

that error occurs because,
well, we have a duplicate ID.

Remember, I just copied and
pasted the code.

So, we basically have two things
that are trying to have the same id

of team_a_score.

So, I'm actually going to
change this to team_b_score.

Okay, this is looking pretty good.

It's a little hard to see.

I'll zoom in.

But, it says Team B here.

And I got all the correct buttons,
and all the correct text views.

So I'm going to try to
run this on my phone.

Okay, and this looks pretty good.

Now if I press the Team A buttons,
it's updating so that's great.

If I press the Team B buttons,
well, it's also updating.

That's special.

But remember,
we just wanted to get the XML right.

We didn't really care about the Java.

But now that we got the XML working,
why not fix the Java?