-
Title:
Add the Other Team in XML
-
Description:
-
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?