English - 07-37 Add the Other Team in XML

English subtitles

← Add the Other Team in XML

2 Followers
105 Lines

13 Languages

Download

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

Title:
Add the Other Team in XML
Description:
450 0:00 - 0:04

Before I begin coding,
I'm going to answer this question.
3650 0:04 - 0:07

I really still know about only two
view groups, LinearLayouts and
7460 0:07 - 0:09

RelativeLayouts.
8626 0:09 - 0:14

Now the key word right here was that
these two have to take up equal space.
13710 0:14 - 0:16

Using layout weight is
a really easy way to do this.
17480 0:17 - 0:20

Okay, let's go ahead and
look at the code.
20070 0:20 - 0:23

All right, I'm not working in Java
anymore, so I'm going to go ahead and
22880 0:23 - 0:25

go over to activity_main.xml.
25830 0:26 - 0:27

And here's my XML file.
28270 0:28 - 0:34

So I'm going to start by putting all
of this code to another LinearLayout.
33875 0:34 - 0:38

And this is the parent LinearLayout for
my two mini LinearLayouts.
39360 0:39 - 0:44

And I'm going to move
these two lines up here,
43900 0:44 - 0:50

because they need to be attached to
the root view, add a closing brace.
49670 0:50 - 0:54

Okay, Android Studio automatically
made a closing tag for me right here.
53990 0:54 - 0:55

So, I'm going to go ahead and
55060 0:55 - 0:59

cut this closing tag,
scroll down to the bottom, and paste it.
61160 1:01 - 1:06

Okay, now I got a red squiggly line,
and if I look at the error,
66450 1:06 - 1:11

I can see that it says I need to have
layout_height and layout_width defined.
70660 1:11 - 1:12

Whoops!
All right, let's do that.
73210 1:13 - 1:18

So because this is the root view, I'll
go ahead and make this match_parent.
80050 1:20 - 1:21

Okay, so
81140 1:21 - 1:26

I have one LinearLayout surrounding
a child LinearLayout right now.
85610 1:26 - 1:30

And if I go to the Preview,
it looks pretty much the same.
90500 1:30 - 1:36

Okay, so what I'm going to do,
is I'm going to copy everything in
95510 1:36 - 1:41

the Team A LinearLayout, and right
below Team A, I am going to paste it.
102160 1:42 - 1:47

And this is going to be
my Team B LinearLayout.
107026 1:47 - 1:52

So, now things are beginning to
look a little bit disorganized.
112209 1:52 - 1:57

So I am going to do a Cmd+A, or
a select all, and then I am going to
117264 1:57 - 2:04

use the keyboard shortcut
Cmd+Option+L to format my code.
123520 2:04 - 2:08

On Windows, that's Ctrl+Alt+L,
that looks a little bit better.
127930 2:08 - 2:12

Now, I just want to make sure that
you understand what's going on here.
131560 2:12 - 2:17

Scrolling to the top,
I have a root LinearLayout here.
136640 2:17 - 2:22

It starts here, and if I scroll all
the way to the bottom, it ends here.
143320 2:23 - 2:27

Inside of that root LinearLayout,
I'm going to scroll up again.
148220 2:28 - 2:32

I've got one child layout here,
which starts here.
151919 2:32 - 2:35

I'll scroll down slowly.
155459 2:35 - 2:37

And it ends here.
157150 2:37 - 2:39

This is for TeamA.
158860 2:39 - 2:42

And I have another child LinearLayout,
which starts here.
162260 2:42 - 2:47

Scroll down slowly, ends here for TeamB.
167418 2:47 - 2:50

All right,
now I noticed some red up at the top, so
169956 2:50 - 2:53

I'm going to scroll up again and
see what the error says.
174400 2:54 - 2:58

Wrong orientation, no orientation
specified, and default is horizontal.
178440 2:58 - 3:01

Yet this layout has multiple children,
180965 3:01 - 3:04

where at least one has
width match_parent.
183793 3:04 - 3:08

Hm, well I do want it to be horizontal,
but let's go ahead and
188092 3:08 - 3:10

specify the orientation.
191360 3:11 - 3:15

Again, this is not technically needed,
because the default is horizontal, but
195400 3:15 - 3:16

it's good to be explicit.
197950 3:18 - 3:22

Okay, and it was saying something
about children covering each other up.
202168 3:22 - 3:24

I'm going to click on Preview.
204334 3:24 - 3:28

Hm, And this doesn't seem to have really
changed very much, even though I went
207901 3:28 - 3:31

to all the trouble of copying and
pasting another LinearLayout.
211905 3:32 - 3:34

This might have had to do with
the error that I just looked at.
215525 3:36 - 3:39

It was saying that it's
a horizontal layout.
218915 3:39 - 3:43

So it's trying to lay these two
LinearLayouts next to each other, but
222615 3:43 - 3:47

that the LinearLayout
has a layout_width of
226591 3:47 - 3:50

match_parent which fills up the screen.
229940 3:50 - 3:55

So basically my first LinearLayout
is filling up the screen, and
234510 3:55 - 3:59

then the other LinearLayout is getting
placed next to it somewhere off screen.
240000 4:00 - 4:03

So let's think about what we actually
want to have happen at this point.
243360 4:03 - 4:08

We want to have the two layouts taking
up equal space and next to each other.
248090 4:08 - 4:12

So this when we're going to need
to bring in layout_weights.
251860 4:12 - 4:16

I'm going to take
the first LinearLayout and
256267 4:16 - 4:20

give it a layout_weight of 1.
261140 4:21 - 4:26

I'm also going to set its width to 0.
266160 4:26 - 4:30

Okay, so we can see already that we
do in fact have two LinearLayouts,
269940 4:30 - 4:33

they're just not really
being displayed properly.
272940 4:33 - 4:35

But this is a bit better.
274560 4:35 - 4:38

So I have to put a layout_weight
also on my second LinearLayout,
277807 4:38 - 4:39

this one right here.
278877 4:39 - 4:40

So I'm going to scroll down.
280500 4:40 - 4:42

Here's my second LinearLayout.
282190 4:42 - 4:44

I'm going to do exactly the same thing.
284250 4:44 - 4:48

I'm going to say that it has
a layout_weight of 1 as well, so
288186 4:48 - 4:51

now they have equivalent layout_weights.
292650 4:53 - 4:56

And then I'm going to
set the width to 0.
295630 4:56 - 5:00

Okay, and the reason that I set
the width of both of them to 0,
300160 5:00 - 5:05

is basically, that if both of these
sides aren't taking up any width.
304588 5:05 - 5:07

Then, it's going to take
all the extra space,
306850 5:07 - 5:11

which is the entire screen, and
divide it up, giving half to one and
311340 5:11 - 5:15

half to the other, because they
both have the same layout weight.
314950 5:15 - 5:18

If that's at all confusing,
I've linked to a few videos in
317650 5:18 - 5:20

the instructor notes that
talk about layout_weight.
320350 5:20 - 5:24

Okay, but this is looking pretty good,
except it says Team A.
324162 5:24 - 5:29

I'm going to scroll down to change
that here, change this to Team B.
330460 5:30 - 5:35

Now you might have noticed that
there is also an error here, and
335420 5:35 - 5:40

that error occurs because,
well, we have a duplicate ID.
339760 5:40 - 5:42

Remember, I just copied and
pasted the code.
342340 5:42 - 5:46

So, we basically have two things
that are trying to have the same id
346090 5:46 - 5:48

of team_a_score.
348030 5:48 - 5:52

So, I'm actually going to
change this to team_b_score.
351800 5:52 - 5:54

Okay, this is looking pretty good.
353840 5:54 - 5:55

It's a little hard to see.
354830 5:55 - 5:55

I'll zoom in.
356800 5:57 - 5:58

But, it says Team B here.
359290 5:59 - 6:02

And I got all the correct buttons,
and all the correct text views.
362420 6:02 - 6:04

So I'm going to try to
run this on my phone.
365490 6:05 - 6:08

Okay, and this looks pretty good.
367960 6:08 - 6:13

Now if I press the Team A buttons,
it's updating so that's great.
373418 6:13 - 6:19

If I press the Team B buttons,
well, it's also updating.
378840 6:19 - 6:21

That's special.
380910 6:21 - 6:23

But remember,
we just wanted to get the XML right.
383480 6:23 - 6:26

We didn't really care about the Java.
385630 6:26 - 6:29

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

Add a new language!

This video is in English

English subtitles

← Add the Other Team in XML

Embed video

Share