1 00:00:00,450 --> 00:00:03,650 Before I begin coding, I'm going to answer this question. 2 00:00:03,650 --> 00:00:07,460 I really still know about only two view groups, LinearLayouts and 3 00:00:07,460 --> 00:00:08,626 RelativeLayouts. 4 00:00:08,626 --> 00:00:13,710 Now the key word right here was that these two have to take up equal space. 5 00:00:13,710 --> 00:00:16,260 Using layout weight is a really easy way to do this. 6 00:00:17,480 --> 00:00:20,070 Okay, let's go ahead and look at the code. 7 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 8 00:00:22,880 --> 00:00:24,775 go over to activity_main.xml. 9 00:00:25,830 --> 00:00:27,150 And here's my XML file. 10 00:00:28,270 --> 00:00:33,875 So I'm going to start by putting all of this code to another LinearLayout. 11 00:00:33,875 --> 00:00:38,334 And this is the parent LinearLayout for my two mini LinearLayouts. 12 00:00:39,360 --> 00:00:43,900 And I'm going to move these two lines up here, 13 00:00:43,900 --> 00:00:49,670 because they need to be attached to the root view, add a closing brace. 14 00:00:49,670 --> 00:00:53,990 Okay, Android Studio automatically made a closing tag for me right here. 15 00:00:53,990 --> 00:00:55,060 So, I'm going to go ahead and 16 00:00:55,060 --> 00:00:59,370 cut this closing tag, scroll down to the bottom, and paste it. 17 00:01:01,160 --> 00:01:06,450 Okay, now I got a red squiggly line, and if I look at the error, 18 00:01:06,450 --> 00:01:10,660 I can see that it says I need to have layout_height and layout_width defined. 19 00:01:10,660 --> 00:01:12,040 Whoops! All right, let's do that. 20 00:01:13,210 --> 00:01:17,580 So because this is the root view, I'll go ahead and make this match_parent. 21 00:01:20,050 --> 00:01:21,140 Okay, so 22 00:01:21,140 --> 00:01:25,610 I have one LinearLayout surrounding a child LinearLayout right now. 23 00:01:25,610 --> 00:01:30,500 And if I go to the Preview, it looks pretty much the same. 24 00:01:30,500 --> 00:01:35,510 Okay, so what I'm going to do, is I'm going to copy everything in 25 00:01:35,510 --> 00:01:41,100 the Team A LinearLayout, and right below Team A, I am going to paste it. 26 00:01:42,160 --> 00:01:47,026 And this is going to be my Team B LinearLayout. 27 00:01:47,026 --> 00:01:52,209 So, now things are beginning to look a little bit disorganized. 28 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 29 00:01:57,264 --> 00:02:03,520 use the keyboard shortcut Cmd+Option+L to format my code. 30 00:02:03,520 --> 00:02:07,930 On Windows, that's Ctrl+Alt+L, that looks a little bit better. 31 00:02:07,930 --> 00:02:11,560 Now, I just want to make sure that you understand what's going on here. 32 00:02:11,560 --> 00:02:16,640 Scrolling to the top, I have a root LinearLayout here. 33 00:02:16,640 --> 00:02:21,930 It starts here, and if I scroll all the way to the bottom, it ends here. 34 00:02:23,320 --> 00:02:26,550 Inside of that root LinearLayout, I'm going to scroll up again. 35 00:02:28,220 --> 00:02:31,919 I've got one child layout here, which starts here. 36 00:02:31,919 --> 00:02:35,459 I'll scroll down slowly. 37 00:02:35,459 --> 00:02:37,150 And it ends here. 38 00:02:37,150 --> 00:02:38,860 This is for TeamA. 39 00:02:38,860 --> 00:02:42,260 And I have another child LinearLayout, which starts here. 40 00:02:42,260 --> 00:02:47,418 Scroll down slowly, ends here for TeamB. 41 00:02:47,418 --> 00:02:49,956 All right, now I noticed some red up at the top, so 42 00:02:49,956 --> 00:02:52,750 I'm going to scroll up again and see what the error says. 43 00:02:54,400 --> 00:02:58,440 Wrong orientation, no orientation specified, and default is horizontal. 44 00:02:58,440 --> 00:03:00,965 Yet this layout has multiple children, 45 00:03:00,965 --> 00:03:03,793 where at least one has width match_parent. 46 00:03:03,793 --> 00:03:08,092 Hm, well I do want it to be horizontal, but let's go ahead and 47 00:03:08,092 --> 00:03:10,010 specify the orientation. 48 00:03:11,360 --> 00:03:15,400 Again, this is not technically needed, because the default is horizontal, but 49 00:03:15,400 --> 00:03:16,430 it's good to be explicit. 50 00:03:17,950 --> 00:03:22,168 Okay, and it was saying something about children covering each other up. 51 00:03:22,168 --> 00:03:24,334 I'm going to click on Preview. 52 00:03:24,334 --> 00:03:27,901 Hm, And this doesn't seem to have really changed very much, even though I went 53 00:03:27,901 --> 00:03:30,842 to all the trouble of copying and pasting another LinearLayout. 54 00:03:31,905 --> 00:03:34,345 This might have had to do with the error that I just looked at. 55 00:03:35,525 --> 00:03:38,915 It was saying that it's a horizontal layout. 56 00:03:38,915 --> 00:03:42,615 So it's trying to lay these two LinearLayouts next to each other, but 57 00:03:42,615 --> 00:03:46,591 that the LinearLayout has a layout_width of 58 00:03:46,591 --> 00:03:49,940 match_parent which fills up the screen. 59 00:03:49,940 --> 00:03:54,510 So basically my first LinearLayout is filling up the screen, and 60 00:03:54,510 --> 00:03:58,510 then the other LinearLayout is getting placed next to it somewhere off screen. 61 00:04:00,000 --> 00:04:03,360 So let's think about what we actually want to have happen at this point. 62 00:04:03,360 --> 00:04:08,090 We want to have the two layouts taking up equal space and next to each other. 63 00:04:08,090 --> 00:04:11,860 So this when we're going to need to bring in layout_weights. 64 00:04:11,860 --> 00:04:16,267 I'm going to take the first LinearLayout and 65 00:04:16,267 --> 00:04:19,579 give it a layout_weight of 1. 66 00:04:21,140 --> 00:04:26,160 I'm also going to set its width to 0. 67 00:04:26,160 --> 00:04:29,940 Okay, so we can see already that we do in fact have two LinearLayouts, 68 00:04:29,940 --> 00:04:32,940 they're just not really being displayed properly. 69 00:04:32,940 --> 00:04:34,560 But this is a bit better. 70 00:04:34,560 --> 00:04:37,807 So I have to put a layout_weight also on my second LinearLayout, 71 00:04:37,807 --> 00:04:38,877 this one right here. 72 00:04:38,877 --> 00:04:40,500 So I'm going to scroll down. 73 00:04:40,500 --> 00:04:42,190 Here's my second LinearLayout. 74 00:04:42,190 --> 00:04:44,250 I'm going to do exactly the same thing. 75 00:04:44,250 --> 00:04:48,186 I'm going to say that it has a layout_weight of 1 as well, so 76 00:04:48,186 --> 00:04:51,080 now they have equivalent layout_weights. 77 00:04:52,650 --> 00:04:55,630 And then I'm going to set the width to 0. 78 00:04:55,630 --> 00:05:00,160 Okay, and the reason that I set the width of both of them to 0, 79 00:05:00,160 --> 00:05:04,588 is basically, that if both of these sides aren't taking up any width. 80 00:05:04,588 --> 00:05:06,850 Then, it's going to take all the extra space, 81 00:05:06,850 --> 00:05:11,340 which is the entire screen, and divide it up, giving half to one and 82 00:05:11,340 --> 00:05:14,950 half to the other, because they both have the same layout weight. 83 00:05:14,950 --> 00:05:17,650 If that's at all confusing, I've linked to a few videos in 84 00:05:17,650 --> 00:05:20,350 the instructor notes that talk about layout_weight. 85 00:05:20,350 --> 00:05:24,162 Okay, but this is looking pretty good, except it says Team A. 86 00:05:24,162 --> 00:05:29,310 I'm going to scroll down to change that here, change this to Team B. 87 00:05:30,460 --> 00:05:35,420 Now you might have noticed that there is also an error here, and 88 00:05:35,420 --> 00:05:39,760 that error occurs because, well, we have a duplicate ID. 89 00:05:39,760 --> 00:05:42,340 Remember, I just copied and pasted the code. 90 00:05:42,340 --> 00:05:46,090 So, we basically have two things that are trying to have the same id 91 00:05:46,090 --> 00:05:48,030 of team_a_score. 92 00:05:48,030 --> 00:05:51,800 So, I'm actually going to change this to team_b_score. 93 00:05:51,800 --> 00:05:53,840 Okay, this is looking pretty good. 94 00:05:53,840 --> 00:05:54,830 It's a little hard to see. 95 00:05:54,830 --> 00:05:55,420 I'll zoom in. 96 00:05:56,800 --> 00:05:58,150 But, it says Team B here. 97 00:05:59,290 --> 00:06:02,420 And I got all the correct buttons, and all the correct text views. 98 00:06:02,420 --> 00:06:03,870 So I'm going to try to run this on my phone. 99 00:06:05,490 --> 00:06:07,960 Okay, and this looks pretty good. 100 00:06:07,960 --> 00:06:13,418 Now if I press the Team A buttons, it's updating so that's great. 101 00:06:13,418 --> 00:06:18,840 If I press the Team B buttons, well, it's also updating. 102 00:06:18,840 --> 00:06:20,910 That's special. 103 00:06:20,910 --> 00:06:23,480 But remember, we just wanted to get the XML right. 104 00:06:23,480 --> 00:06:25,630 We didn't really care about the Java. 105 00:06:25,630 --> 00:06:29,140 But now that we got the XML working, why not fix the Java?