WEBVTT 00:00:00.450 --> 00:00:03.650 Before I begin coding, I'm going to answer this question. 00:00:03.650 --> 00:00:07.460 I really still know about only two view groups, LinearLayouts and 00:00:07.460 --> 00:00:08.626 RelativeLayouts. 00:00:08.626 --> 00:00:13.710 Now the key word right here was that these two have to take up equal space. 00:00:13.710 --> 00:00:16.260 Using layout weight is a really easy way to do this. 00:00:17.480 --> 00:00:20.070 Okay, let's go ahead and look at the code. 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 00:00:22.880 --> 00:00:24.775 go over to activity_main.xml. 00:00:25.830 --> 00:00:27.150 And here's my XML file. 00:00:28.270 --> 00:00:33.875 So I'm going to start by putting all of this code to another LinearLayout. 00:00:33.875 --> 00:00:38.334 And this is the parent LinearLayout for my two mini LinearLayouts. 00:00:39.360 --> 00:00:43.900 And I'm going to move these two lines up here, 00:00:43.900 --> 00:00:49.670 because they need to be attached to the root view, add a closing brace. 00:00:49.670 --> 00:00:53.990 Okay, Android Studio automatically made a closing tag for me right here. 00:00:53.990 --> 00:00:55.060 So, I'm going to go ahead and 00:00:55.060 --> 00:00:59.370 cut this closing tag, scroll down to the bottom, and paste it. 00:01:01.160 --> 00:01:06.450 Okay, now I got a red squiggly line, and if I look at the error, 00:01:06.450 --> 00:01:10.660 I can see that it says I need to have layout_height and layout_width defined. 00:01:10.660 --> 00:01:12.040 Whoops! All right, let's do that. 00:01:13.210 --> 00:01:17.580 So because this is the root view, I'll go ahead and make this match_parent. 00:01:20.050 --> 00:01:21.140 Okay, so 00:01:21.140 --> 00:01:25.610 I have one LinearLayout surrounding a child LinearLayout right now. 00:01:25.610 --> 00:01:30.500 And if I go to the Preview, it looks pretty much the same. 00:01:30.500 --> 00:01:35.510 Okay, so what I'm going to do, is I'm going to copy everything in 00:01:35.510 --> 00:01:41.100 the Team A LinearLayout, and right below Team A, I am going to paste it. 00:01:42.160 --> 00:01:47.026 And this is going to be my Team B LinearLayout. 00:01:47.026 --> 00:01:52.209 So, now things are beginning to look a little bit disorganized. 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 00:01:57.264 --> 00:02:03.520 use the keyboard shortcut Cmd+Option+L to format my code. 00:02:03.520 --> 00:02:07.930 On Windows, that's Ctrl+Alt+L, that looks a little bit better. 00:02:07.930 --> 00:02:11.560 Now, I just want to make sure that you understand what's going on here. 00:02:11.560 --> 00:02:16.640 Scrolling to the top, I have a root LinearLayout here. 00:02:16.640 --> 00:02:21.930 It starts here, and if I scroll all the way to the bottom, it ends here. 00:02:23.320 --> 00:02:26.550 Inside of that root LinearLayout, I'm going to scroll up again. 00:02:28.220 --> 00:02:31.919 I've got one child layout here, which starts here. 00:02:31.919 --> 00:02:35.459 I'll scroll down slowly. 00:02:35.459 --> 00:02:37.150 And it ends here. 00:02:37.150 --> 00:02:38.860 This is for TeamA. 00:02:38.860 --> 00:02:42.260 And I have another child LinearLayout, which starts here. 00:02:42.260 --> 00:02:47.418 Scroll down slowly, ends here for TeamB. 00:02:47.418 --> 00:02:49.956 All right, now I noticed some red up at the top, so 00:02:49.956 --> 00:02:52.750 I'm going to scroll up again and see what the error says. 00:02:54.400 --> 00:02:58.440 Wrong orientation, no orientation specified, and default is horizontal. 00:02:58.440 --> 00:03:00.965 Yet this layout has multiple children, 00:03:00.965 --> 00:03:03.793 where at least one has width match_parent. 00:03:03.793 --> 00:03:08.092 Hm, well I do want it to be horizontal, but let's go ahead and 00:03:08.092 --> 00:03:10.010 specify the orientation. 00:03:11.360 --> 00:03:15.400 Again, this is not technically needed, because the default is horizontal, but 00:03:15.400 --> 00:03:16.430 it's good to be explicit. 00:03:17.950 --> 00:03:22.168 Okay, and it was saying something about children covering each other up. 00:03:22.168 --> 00:03:24.334 I'm going to click on Preview. 00:03:24.334 --> 00:03:27.901 Hm, And this doesn't seem to have really changed very much, even though I went 00:03:27.901 --> 00:03:30.842 to all the trouble of copying and pasting another LinearLayout. 00:03:31.905 --> 00:03:34.345 This might have had to do with the error that I just looked at. 00:03:35.525 --> 00:03:38.915 It was saying that it's a horizontal layout. 00:03:38.915 --> 00:03:42.615 So it's trying to lay these two LinearLayouts next to each other, but 00:03:42.615 --> 00:03:46.591 that the LinearLayout has a layout_width of 00:03:46.591 --> 00:03:49.940 match_parent which fills up the screen. 00:03:49.940 --> 00:03:54.510 So basically my first LinearLayout is filling up the screen, and 00:03:54.510 --> 00:03:58.510 then the other LinearLayout is getting placed next to it somewhere off screen. 00:04:00.000 --> 00:04:03.360 So let's think about what we actually want to have happen at this point. 00:04:03.360 --> 00:04:08.090 We want to have the two layouts taking up equal space and next to each other. 00:04:08.090 --> 00:04:11.860 So this when we're going to need to bring in layout_weights. 00:04:11.860 --> 00:04:16.267 I'm going to take the first LinearLayout and 00:04:16.267 --> 00:04:19.579 give it a layout_weight of 1. 00:04:21.140 --> 00:04:26.160 I'm also going to set its width to 0. 00:04:26.160 --> 00:04:29.940 Okay, so we can see already that we do in fact have two LinearLayouts, 00:04:29.940 --> 00:04:32.940 they're just not really being displayed properly. 00:04:32.940 --> 00:04:34.560 But this is a bit better. 00:04:34.560 --> 00:04:37.807 So I have to put a layout_weight also on my second LinearLayout, 00:04:37.807 --> 00:04:38.877 this one right here. 00:04:38.877 --> 00:04:40.500 So I'm going to scroll down. 00:04:40.500 --> 00:04:42.190 Here's my second LinearLayout. 00:04:42.190 --> 00:04:44.250 I'm going to do exactly the same thing. 00:04:44.250 --> 00:04:48.186 I'm going to say that it has a layout_weight of 1 as well, so 00:04:48.186 --> 00:04:51.080 now they have equivalent layout_weights. 00:04:52.650 --> 00:04:55.630 And then I'm going to set the width to 0. 00:04:55.630 --> 00:05:00.160 Okay, and the reason that I set the width of both of them to 0, 00:05:00.160 --> 00:05:04.588 is basically, that if both of these sides aren't taking up any width. 00:05:04.588 --> 00:05:06.850 Then, it's going to take all the extra space, 00:05:06.850 --> 00:05:11.340 which is the entire screen, and divide it up, giving half to one and 00:05:11.340 --> 00:05:14.950 half to the other, because they both have the same layout weight. 00:05:14.950 --> 00:05:17.650 If that's at all confusing, I've linked to a few videos in 00:05:17.650 --> 00:05:20.350 the instructor notes that talk about layout_weight. 00:05:20.350 --> 00:05:24.162 Okay, but this is looking pretty good, except it says Team A. 00:05:24.162 --> 00:05:29.310 I'm going to scroll down to change that here, change this to Team B. 00:05:30.460 --> 00:05:35.420 Now you might have noticed that there is also an error here, and 00:05:35.420 --> 00:05:39.760 that error occurs because, well, we have a duplicate ID. 00:05:39.760 --> 00:05:42.340 Remember, I just copied and pasted the code. 00:05:42.340 --> 00:05:46.090 So, we basically have two things that are trying to have the same id 00:05:46.090 --> 00:05:48.030 of team_a_score. 00:05:48.030 --> 00:05:51.800 So, I'm actually going to change this to team_b_score. 00:05:51.800 --> 00:05:53.840 Okay, this is looking pretty good. 00:05:53.840 --> 00:05:54.830 It's a little hard to see. 00:05:54.830 --> 00:05:55.420 I'll zoom in. 00:05:56.800 --> 00:05:58.150 But, it says Team B here. 00:05:59.290 --> 00:06:02.420 And I got all the correct buttons, and all the correct text views. 00:06:02.420 --> 00:06:03.870 So I'm going to try to run this on my phone. 00:06:05.490 --> 00:06:07.960 Okay, and this looks pretty good. 00:06:07.960 --> 00:06:13.418 Now if I press the Team A buttons, it's updating so that's great. 00:06:13.418 --> 00:06:18.840 If I press the Team B buttons, well, it's also updating. 00:06:18.840 --> 00:06:20.910 That's special. 00:06:20.910 --> 00:06:23.480 But remember, we just wanted to get the XML right. 00:06:23.480 --> 00:06:25.630 We didn't really care about the Java. 00:06:25.630 --> 00:06:29.140 But now that we got the XML working, why not fix the Java?