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