1 00:00:05,560 --> 00:00:08,260 Alright, so apart from the two EditText 2 00:00:08,260 --> 00:00:10,000 widgets and the position of the 3 00:00:10,000 --> 00:00:13,090 operation TextView, the portrait layout's 4 00:00:13,090 --> 00:00:15,699 identical to the landscape version. As is 5 00:00:15,699 --> 00:00:17,230 often the case, though, there are several 6 00:00:17,230 --> 00:00:19,720 ways to achieve the same effect, so let's 7 00:00:19,720 --> 00:00:22,300 look at two different ways of adding 8 00:00:22,300 --> 00:00:25,859 this negButton to our portrait layout. 9 00:00:25,859 --> 00:00:28,240 Now the first slide here is showing a 10 00:00:28,240 --> 00:00:30,039 similar approach as in the landscape 11 00:00:30,039 --> 00:00:32,470 layout. The buttons in the second column - 12 00:00:32,470 --> 00:00:35,170 that's 8 down to the dot - are constrained 13 00:00:35,170 --> 00:00:36,880 to the left of the button to their right, 14 00:00:36,880 --> 00:00:39,430 but it's the same otherwise. The 15 00:00:39,430 --> 00:00:41,290 important thing is that all the buttons 16 00:00:41,290 --> 00:00:43,090 are constrained towards the key button - 17 00:00:43,090 --> 00:00:46,300 which in this example is button9. Now 18 00:00:46,300 --> 00:00:47,800 the buttons in the first two columns 19 00:00:47,800 --> 00:00:49,270 have a constraint from their right edge 20 00:00:49,270 --> 00:00:51,100 to the button on their right, and a 21 00:00:51,100 --> 00:00:53,410 baseline constraint also to the button 22 00:00:53,410 --> 00:00:55,480 on their right. And the buttons in the 23 00:00:55,480 --> 00:00:57,670 last two columns go the other way; so 24 00:00:57,670 --> 00:00:59,410 their left edge is constrained to the 25 00:00:59,410 --> 00:01:01,390 buttons on their left, and the baseline 26 00:01:01,390 --> 00:01:03,910 constraint is also to the left. So that 27 00:01:03,910 --> 00:01:05,199 way, all the columns are being 28 00:01:05,199 --> 00:01:07,680 constrained towards the central column. 29 00:01:07,680 --> 00:01:09,880 Now constraining the buttons like this 30 00:01:09,880 --> 00:01:12,130 makes sure that they're a fixed 31 00:01:12,130 --> 00:01:14,259 distance from their neighbour, and aligned 32 00:01:14,259 --> 00:01:17,229 correctly with their neighbour's baseline. Now 33 00:01:17,229 --> 00:01:19,149 the overall horizontal and vertical 34 00:01:19,149 --> 00:01:21,549 alignment is handled by constraints in 35 00:01:21,549 --> 00:01:24,039 the central column; each button has a 36 00:01:24,039 --> 00:01:26,380 vertical constraint from its top edge to 37 00:01:26,380 --> 00:01:28,479 the bottom of the button above, which 38 00:01:28,479 --> 00:01:30,069 takes care of the spacing between the 39 00:01:30,069 --> 00:01:33,670 rows of buttons. Now to keep the columns 40 00:01:33,670 --> 00:01:34,810 in a straight line, 41 00:01:34,810 --> 00:01:37,659 each button in the central column has 42 00:01:37,659 --> 00:01:39,729 its left edge lined up with the 43 00:01:39,729 --> 00:01:41,920 left edge of the button above 44 00:01:41,920 --> 00:01:44,770 it. Now one disadvantage of this approach, 45 00:01:44,770 --> 00:01:47,259 is that you'd have to change 13 margins 46 00:01:47,259 --> 00:01:49,240 if you wanted to allow the spacing 47 00:01:49,240 --> 00:01:50,619 between, or if you wanted to alter rather, 48 00:01:50,619 --> 00:01:53,679 the spacing between the columns. All the 49 00:01:53,679 --> 00:01:55,209 constraints from the right edge of one 50 00:01:55,209 --> 00:01:57,130 button to the left edge of its neighbor 51 00:01:57,130 --> 00:01:59,799 would have to be changed, and vice-versa 52 00:01:59,799 --> 00:02:01,779 for the buttons to the right of centre. 53 00:02:01,779 --> 00:02:03,579 So let's look at a slightly different 54 00:02:03,579 --> 00:02:08,229 approach to this in the next slide. Now 55 00:02:08,229 --> 00:02:09,580 here, the rows are still lined up 56 00:02:09,580 --> 00:02:11,800 vertically by their baseline constraints, 57 00:02:11,800 --> 00:02:14,319 and the row spacing set by vertical 58 00:02:14,319 --> 00:02:17,140 constraints in the central column. Now 59 00:02:17,140 --> 00:02:19,300 the columns are lined up by constraining 60 00:02:19,300 --> 00:02:21,970 the edge of a button to the edge of the 61 00:02:21,970 --> 00:02:24,550 button above. Now I've used the left edge, 62 00:02:24,550 --> 00:02:26,340 but the right edge would do just as well, 63 00:02:26,340 --> 00:02:28,450 because all the buttons are the same 64 00:02:28,450 --> 00:02:31,450 size. Now the column spacing is set by 65 00:02:31,450 --> 00:02:33,760 the horizontal constraints in the top 66 00:02:33,760 --> 00:02:36,400 row. Now you'd only have to change the 67 00:02:36,400 --> 00:02:38,950 margins on four constraints to alter the 68 00:02:38,950 --> 00:02:41,260 column spacing, in this scenario, and 69 00:02:41,260 --> 00:02:43,030 three constraints to alter the row 70 00:02:43,030 --> 00:02:46,000 spacing. And as I mentioned, there's 71 00:02:46,000 --> 00:02:47,380 nearly always more than one way to do 72 00:02:47,380 --> 00:02:48,760 things, so it's worth looking at 73 00:02:48,760 --> 00:02:50,770 alternatives, to see if there's any 74 00:02:50,770 --> 00:02:53,230 advantage to be gained from choosing one 75 00:02:53,230 --> 00:02:55,450 way or the other. In this video, we're 76 00:02:55,450 --> 00:02:56,950 going to use that second approach, or 77 00:02:56,950 --> 00:02:58,360 this second approach for the portrait 78 00:02:58,360 --> 00:03:00,760 layout. It's probably not a good idea to 79 00:03:00,760 --> 00:03:02,350 do things differently in a landscape and 80 00:03:02,350 --> 00:03:05,110 portrait layout, unless you have to, so 81 00:03:05,110 --> 00:03:06,550 I'm just doing it in this example, just 82 00:03:06,550 --> 00:03:08,200 so you can see the different approaches. 83 00:03:08,200 --> 00:03:09,970 In your own apps, though, you really want to 84 00:03:09,970 --> 00:03:12,990 try to be consistent wherever possible. 85 00:03:12,990 --> 00:03:15,430 Okay, so I'm editing the portrait layout 86 00:03:15,430 --> 00:03:18,310 in activity_main.xml, and we 87 00:03:18,310 --> 00:03:20,350 can obviously see up here in the tab, its 88 00:03:20,350 --> 00:03:22,450 layout/activity_main, 89 00:03:22,450 --> 00:03:24,250 and it's not land which was our 90 00:03:24,250 --> 00:03:26,200 landscape one, and obviously, clearly we 91 00:03:26,200 --> 00:03:28,060 can see that this is a portrait layout 92 00:03:28,060 --> 00:03:30,430 anyway. Alright, so the first thing we 93 00:03:30,430 --> 00:03:32,140 need to do is clear all the constraints 94 00:03:32,140 --> 00:03:34,390 from the buttons. Now there's only three 95 00:03:34,390 --> 00:03:36,820 widgets that aren't buttons, so it could 96 00:03:36,820 --> 00:03:38,110 actually just make sense to use the 97 00:03:38,110 --> 00:03:40,230 Clear all constraints button, and 98 00:03:40,230 --> 00:03:42,700 re-create the constraints on the Edit 99 00:03:42,700 --> 00:03:43,720 Views and the TextView. 100 00:03:43,720 --> 00:03:45,970 Now if the layout was more complicated, 101 00:03:45,970 --> 00:03:48,790 that could be a bit of a pain. So, there's 102 00:03:48,790 --> 00:03:50,650 another way that's not obvious, but is 103 00:03:50,650 --> 00:03:52,300 a bit quicker than selecting each button 104 00:03:52,300 --> 00:03:54,670 in turn, and clicking its clear 105 00:03:54,670 --> 00:03:57,280 constraints button. So what you need to 106 00:03:57,280 --> 00:03:59,590 do is draw a rectangle to enclose all 107 00:03:59,590 --> 00:04:02,050 the buttons, taking care to avoid the 108 00:04:02,050 --> 00:04:03,910 other three widgets. So I want to come 109 00:04:03,910 --> 00:04:05,410 down here and click, and I'm going to be 110 00:04:05,410 --> 00:04:08,320 very careful just to include the 16 111 00:04:08,320 --> 00:04:11,350 buttons. So I haven't touched the 112 00:04:11,350 --> 00:04:14,440 TextView or either of the two EditTexts. 113 00:04:14,440 --> 00:04:15,640 And by the way, you can confirm that 114 00:04:15,640 --> 00:04:18,459 looking in the Component Tree, that both 115 00:04:18,459 --> 00:04:20,798 EditTexts and the TextViews haven't 116 00:04:20,798 --> 00:04:22,660 been selected here, but all the other 117 00:04:22,660 --> 00:04:25,150 buttons have been selected. And again, 118 00:04:25,150 --> 00:04:26,290 remember when you're doing that, you 119 00:04:26,290 --> 00:04:28,060 don't have to fully enclose a button to 120 00:04:28,060 --> 00:04:30,640 select it. And another alternative to that 121 00:04:30,640 --> 00:04:32,090 was that I can just 122 00:04:32,090 --> 00:04:34,040 unclick that or de-select that. I can 123 00:04:34,040 --> 00:04:36,230 actually click on one button, and I can 124 00:04:36,230 --> 00:04:38,470 right-click and click on Select, and 125 00:04:38,470 --> 00:04:41,750 Select Same Type. That will then select 126 00:04:41,750 --> 00:04:43,490 the rest of the buttons, or in this case, 127 00:04:43,490 --> 00:04:46,190 all the widgets on screen of the same 128 00:04:46,190 --> 00:04:49,040 type, which is button in this case. Now 129 00:04:49,040 --> 00:04:52,370 once all the buttons are selected, if we 130 00:04:52,370 --> 00:04:54,410 hover over that, we can see that the 131 00:04:54,410 --> 00:04:56,720 clear constraints button for each one 132 00:04:56,720 --> 00:04:58,940 becomes visible as we move over it, so we 133 00:04:58,940 --> 00:05:00,940 just need to carefully click each one. I 134 00:05:00,940 --> 00:05:02,840 just need to come over here and just click 135 00:05:02,840 --> 00:05:12,350 each one as we go through. Now if you go 136 00:05:12,350 --> 00:05:13,760 a bit fast, you might find that the 137 00:05:13,760 --> 00:05:15,770 buttons get un-selected. That's fine - it just 138 00:05:15,770 --> 00:05:17,450 take seconds to select them all again, 139 00:05:17,450 --> 00:05:18,889 using either of the methods that I've shown 140 00:05:18,889 --> 00:05:21,340 you. So I'm going to continue through and 141 00:05:21,340 --> 00:05:23,419 clear the rest of the constraints for 142 00:05:23,419 --> 00:05:28,970 the buttons - and the last four now. Alright, 143 00:05:28,970 --> 00:05:30,410 so that's now the constraints cleared. 144 00:05:30,410 --> 00:05:33,740 Did I miss that one? Yes I did. So, you can 145 00:05:33,740 --> 00:05:35,240 see now on the screen, that looks to me 146 00:05:35,240 --> 00:05:36,680 like we've actually now successfully 147 00:05:36,680 --> 00:05:37,160 deleted 148 00:05:37,160 --> 00:05:39,100 all the constraints from the buttons. 149 00:05:39,100 --> 00:05:40,910 Now that I've done that, I'm just going 150 00:05:40,910 --> 00:05:43,100 to click on a blank area. And because 151 00:05:43,100 --> 00:05:44,690 we're in portrait, what I'm going to do 152 00:05:44,690 --> 00:05:49,990 is just bring back the Designer as well. 153 00:05:49,990 --> 00:05:52,849 Obviously, with the landscape version 154 00:05:52,849 --> 00:05:53,930 when we're editing that, it made more 155 00:05:53,930 --> 00:05:55,610 sense just to have the Blueprint. Because 156 00:05:55,610 --> 00:05:57,200 we can fit both on there, I like to see 157 00:05:57,200 --> 00:05:58,550 them both at once if possible, 158 00:05:58,550 --> 00:06:00,440 although I still do my work in the 159 00:06:00,440 --> 00:06:03,530 Blueprint. But just if you did want to 160 00:06:03,530 --> 00:06:04,970 have just the one, another alternative is 161 00:06:04,970 --> 00:06:08,090 just to go back to the Blueprint, and you 162 00:06:08,090 --> 00:06:10,639 can then increase the size and get that 163 00:06:10,639 --> 00:06:12,050 bigger - obviously, that's too big for my 164 00:06:12,050 --> 00:06:14,000 monitor now - if you want to sort of see it in a 165 00:06:14,000 --> 00:06:16,070 larger size. But in this case, we've got 166 00:06:16,070 --> 00:06:17,810 enough screen real estate for both, so 167 00:06:17,810 --> 00:06:18,950 I'm going to have both and leave them on the 168 00:06:18,950 --> 00:06:21,200 screen. Alright, so I need another button, 169 00:06:21,200 --> 00:06:23,810 and I could just drag one in from the 170 00:06:23,810 --> 00:06:25,789 palette, and set all its size 171 00:06:25,789 --> 00:06:28,099 properties, etc. But again, when you're 172 00:06:28,099 --> 00:06:29,539 working with a group of widgets that are 173 00:06:29,539 --> 00:06:32,120 all very similar, it's often easier to 174 00:06:32,120 --> 00:06:33,740 just copy and paste one of them, as we've 175 00:06:33,740 --> 00:06:36,560 seen in previous videos. So again, going 176 00:06:36,560 --> 00:06:38,750 to choose the divide button, I'm just 177 00:06:38,750 --> 00:06:40,190 going to right-click that and choose 178 00:06:40,190 --> 00:06:43,909 copy. Then I'm going to right-click on a 179 00:06:43,909 --> 00:06:45,860 blank area of the Blueprint 180 00:06:45,860 --> 00:06:49,460 and choose Paste. As before, you 181 00:06:49,460 --> 00:06:51,710 briefly saw another button animate and 182 00:06:51,710 --> 00:06:53,990 appear over the top of the divide. You 183 00:06:53,990 --> 00:06:55,610 want to make sure that it's selected in 184 00:06:55,610 --> 00:06:57,020 the Component Tree, and we've got this button 185 00:06:57,020 --> 00:06:58,189 Divide2, so I'm going to click on 186 00:06:58,189 --> 00:06:58,490 that 187 00:06:58,490 --> 00:07:00,650 so it's selected. And we're going to 188 00:07:00,650 --> 00:07:02,180 change a few things, and we're going to call 189 00:07:02,180 --> 00:07:04,210 it buttonNeg, like we called it in the 190 00:07:04,210 --> 00:07:07,789 landscape version - the landscape 191 00:07:07,789 --> 00:07:10,069 layout - a buttonNeg. And we also have 192 00:07:10,069 --> 00:07:12,020 the text here. We're going to change that, 193 00:07:12,020 --> 00:07:16,669 and the text will say Neg. Press Enter 194 00:07:16,669 --> 00:07:18,379 there. And the other thing we're going to 195 00:07:18,379 --> 00:07:20,779 do, if you recall, we changed the text 196 00:07:20,779 --> 00:07:22,370 properly, or sorry, the textSize property 197 00:07:22,370 --> 00:07:24,529 to 12sp. So let's go ahead and do that 198 00:07:24,529 --> 00:07:28,580 as well - 12sp - just so it fits in a 199 00:07:28,580 --> 00:07:29,840 little bit nicer with the rest of the 200 00:07:29,840 --> 00:07:33,349 buttons. Now, here the ID is very 201 00:07:33,349 --> 00:07:36,080 important. It has to be the same ID that 202 00:07:36,080 --> 00:07:37,759 we've given it in the landscape layout, 203 00:07:37,759 --> 00:07:39,680 and if we just briefly go back to the 204 00:07:39,680 --> 00:07:41,719 landscape layout - our NEG button. 205 00:07:41,719 --> 00:07:46,370 We call it buttonNeg, back here, button 206 00:07:46,370 --> 00:07:49,099 Neg in the portrait version. And 207 00:07:49,099 --> 00:07:50,089 remember that our code's already 208 00:07:50,089 --> 00:07:51,819 referring to a by ID, in any event. 209 00:07:51,819 --> 00:07:53,930 Alright, so what we need next is a 210 00:07:53,930 --> 00:07:56,839 baseline constraint from each button in 211 00:07:56,839 --> 00:07:59,300 the two outer columns, to the button on 212 00:07:59,300 --> 00:08:01,490 its right or left, working in towards the 213 00:08:01,490 --> 00:08:02,529 central row. 214 00:08:02,529 --> 00:08:04,490 So let's go ahead and do that. So I'm 215 00:08:04,490 --> 00:08:06,979 going to start over here with the 7. So I'm 216 00:08:06,979 --> 00:08:10,669 gonna set a baseline constraint, and set 217 00:08:10,669 --> 00:08:15,680 that to 8, and 8 I'm going to set to 9. So 218 00:08:15,680 --> 00:08:21,139 select 8, constraint, set that to 9. And 219 00:08:21,139 --> 00:08:22,520 the other thing I haven't done yet, I 220 00:08:22,520 --> 00:08:25,430 haven't moved the NEG button. So I'm 221 00:08:25,430 --> 00:08:26,629 gonna move that briefly so we can see it a 222 00:08:26,629 --> 00:08:27,849 little bit there. 223 00:08:27,849 --> 00:08:30,560 Now with the NEG button, we want to set 224 00:08:30,560 --> 00:08:34,039 the constraint to the left, in this case. 225 00:08:34,039 --> 00:08:35,539 So I'm going to select that, select the 226 00:08:35,539 --> 00:08:37,940 baseline constraint, constrain that to the 227 00:08:37,940 --> 00:08:41,719 divide. Then the divide button, I'm going 228 00:08:41,719 --> 00:08:43,760 to set a constraint to that - that's going 229 00:08:43,760 --> 00:08:46,640 to be constrained to the 9. So I'm going to 230 00:08:46,640 --> 00:08:47,810 do the same now for the rest of the 231 00:08:47,810 --> 00:08:49,899 buttons. So I'm going to do the 4; 232 00:08:49,899 --> 00:08:55,579 baseline constraint to the 5. The 5; baseline 233 00:08:55,579 --> 00:08:57,620 constraint to the 6, 234 00:08:57,620 --> 00:08:59,510 and then the asterisk, we're going to a 235 00:08:59,510 --> 00:09:03,770 baseline constraint to the 6. And let's 236 00:09:03,770 --> 00:09:05,080 go and continue on now with the 1; 237 00:09:05,080 --> 00:09:08,570 baseline constraint to the 2 - try that 238 00:09:08,570 --> 00:09:12,589 again. And the 2, we're going to constrain 239 00:09:12,589 --> 00:09:14,990 to the baseline - whoops, I'll just undo 240 00:09:14,990 --> 00:09:17,720 that change - baseline constraint to the 241 00:09:17,720 --> 00:09:20,900 3, and the minus sign; baseline 242 00:09:20,900 --> 00:09:25,370 constraint to the 3. And the last 243 00:09:25,370 --> 00:09:27,680 line now; baseline constraint for the 244 00:09:27,680 --> 00:09:32,570 zero to the dot, and select the dot; baseline 245 00:09:32,570 --> 00:09:35,779 constraint to the equals. And the plus, 246 00:09:35,779 --> 00:09:37,670 we're going to do a baseline constraint 247 00:09:37,670 --> 00:09:41,779 to the equals, and then the NEG - I need to 248 00:09:41,779 --> 00:09:46,250 do a baseline constraint to that. I'll do 249 00:09:46,250 --> 00:09:48,170 that when I try to move it, and then I'm 250 00:09:48,170 --> 00:09:49,820 going to baseline constraint to the 251 00:09:49,820 --> 00:09:53,150 division, the divide by button. Alright, so that's the 252 00:09:53,150 --> 00:09:55,730 first step done. Next on the top row only, 253 00:09:55,730 --> 00:09:57,770 we need a right or left constraint on 254 00:09:57,770 --> 00:09:59,600 each button in the outer two columns, 255 00:09:59,600 --> 00:10:02,000 again, working in towards the central 256 00:10:02,000 --> 00:10:03,620 column. They're all actually a little bit 257 00:10:03,620 --> 00:10:05,839 close together at the moment. So starting 258 00:10:05,839 --> 00:10:07,880 at 7 - this is the top row only - we 259 00:10:07,880 --> 00:10:09,680 want that, we need a right or left 260 00:10:09,680 --> 00:10:11,480 constraint on each end of the button 261 00:10:11,480 --> 00:10:13,970 in the outer two columns, again working 262 00:10:13,970 --> 00:10:16,130 in towards the central column. So I'm 263 00:10:16,130 --> 00:10:20,560 going to add the constraint to the e6, 264 00:10:20,560 --> 00:10:22,760 and the 8, I'm going to add a constraint 265 00:10:22,760 --> 00:10:25,100 to the 9. On the other side, I'm going 266 00:10:25,100 --> 00:10:27,260 to add the constraint for the NEG to 267 00:10:27,260 --> 00:10:29,420 the divide, and then click on the divide, 268 00:10:29,420 --> 00:10:32,720 constrain that to the 9. And they are 269 00:10:32,720 --> 00:10:34,160 pretty close together, so it's a good 270 00:10:34,160 --> 00:10:35,930 idea to check the inspector as you're 271 00:10:35,930 --> 00:10:37,670 doing that, just to make sure that they 272 00:10:37,670 --> 00:10:41,050 are constrained. So we've got 8 and 273 00:10:41,050 --> 00:10:43,010 7 both constrained, as you can see 274 00:10:43,010 --> 00:10:45,459 there, NEG is constrained, as is the 275 00:10:45,459 --> 00:10:48,709 divide. Now 9, at the moment, 276 00:10:48,709 --> 00:10:50,900 hasn't got any constraints. We're going 277 00:10:50,900 --> 00:10:52,670 to now, moving up, working up from the 278 00:10:52,670 --> 00:10:55,730 equals button, up down here, each button 279 00:10:55,730 --> 00:10:58,400 in that central column, effectively, needs 280 00:10:58,400 --> 00:11:00,350 its top edge constrained to the bottom of 281 00:11:00,350 --> 00:11:02,000 the button above. So I'm going to click 282 00:11:02,000 --> 00:11:03,980 on that; constrain the equals to the 283 00:11:03,980 --> 00:11:06,589 3. I can see at the top there, where 284 00:11:06,589 --> 00:11:08,870 I've added the constraint or not. From 285 00:11:08,870 --> 00:11:10,520 the 3, I'm going to constrain to the 286 00:11:10,520 --> 00:11:11,530 6, and 287 00:11:11,530 --> 00:11:13,180 again, I'm looking at the margins in the 288 00:11:13,180 --> 00:11:14,410 inspector to say that that is working. 289 00:11:14,410 --> 00:11:17,740 And from the 6, I'm going to constrain 290 00:11:17,740 --> 00:11:20,110 that to the 9, and you can see that 291 00:11:20,110 --> 00:11:21,490 we've added the constraint at the top 292 00:11:21,490 --> 00:11:24,130 there, for that as well. Now button9 293 00:11:24,130 --> 00:11:25,930 will have its top edge constrained to 294 00:11:25,930 --> 00:11:28,330 the bottom of the newNumber EditText 295 00:11:28,330 --> 00:11:31,540 widget, and if you recall, newNumber is the 296 00:11:31,540 --> 00:11:33,730 second one. So I'm gonna click on 9 297 00:11:33,730 --> 00:11:37,000 and constrain that to the newNumber, and you 298 00:11:37,000 --> 00:11:38,140 can see we've got a constraint on there 299 00:11:38,140 --> 00:11:38,500 now. 300 00:11:38,500 --> 00:11:41,440 Alright, so finally, every button in the 301 00:11:41,440 --> 00:11:43,570 bottom three rows needs to have its left 302 00:11:43,570 --> 00:11:46,360 edge constrained to the left edge of the 303 00:11:46,360 --> 00:11:49,210 button above, with a margin of zero. And 304 00:11:49,210 --> 00:11:51,280 you can make that easier if you like, by 305 00:11:51,280 --> 00:11:52,810 changing the default margins to zero, 306 00:11:52,810 --> 00:11:55,570 using the button on the toolbar. So I'm 307 00:11:55,570 --> 00:11:58,810 going to go ahead and do that, and change 308 00:11:58,810 --> 00:12:01,300 that to zero. So again, what we're doing 309 00:12:01,300 --> 00:12:03,370 is, for every button in the bottom of 310 00:12:03,370 --> 00:12:05,230 three rows, we want its left edge 311 00:12:05,230 --> 00:12:07,060 constrained to the left edge of the 312 00:12:07,060 --> 00:12:09,520 button above. So I'm going to start with 313 00:12:09,520 --> 00:12:13,870 4; constrain that to the 7, the 314 00:12:13,870 --> 00:12:15,460 1, I'm going to constrain to the 4, 315 00:12:15,460 --> 00:12:20,430 and the zero; constrain that to the 1. 316 00:12:20,430 --> 00:12:22,390 And I'm going to do the same for the 317 00:12:22,390 --> 00:12:23,530 next row, because we're doing this 318 00:12:23,530 --> 00:12:26,980 for the bottom of three rows now, have 319 00:12:26,980 --> 00:12:30,970 everything in those three rows. 2 there, 320 00:12:30,970 --> 00:12:35,440 the 2, and for the 2 we're going to 321 00:12:35,440 --> 00:12:38,650 constrain that to the 5. The 5 I'm 322 00:12:38,650 --> 00:12:42,550 going to constrain to the 8, the 323 00:12:42,550 --> 00:12:44,530 equals I'm going to constrain to the 324 00:12:44,530 --> 00:12:53,440 3, the 3 to the 6 and 6 to the 9, and 325 00:12:53,440 --> 00:12:55,000 then the plus, I'm going to constrain 326 00:12:55,000 --> 00:12:58,120 to the minus. The minus, I'm going to 327 00:12:58,120 --> 00:13:00,490 constrain to the multiplication one, and 328 00:13:00,490 --> 00:13:02,290 the multiply, I'm going to 329 00:13:02,290 --> 00:13:06,550 constrain to the divide. And I'm not sure 330 00:13:06,550 --> 00:13:07,930 whether I did the minus there, did I? 331 00:13:07,930 --> 00:13:10,810 Yes that's constrained. And again, when in 332 00:13:10,810 --> 00:13:13,510 doubt you can click on any control, and 333 00:13:13,510 --> 00:13:15,100 just check that we've actually got a 334 00:13:15,100 --> 00:13:18,339 margin there, and that it has been 335 00:13:18,339 --> 00:13:21,420 constrained. 336 00:13:21,420 --> 00:13:24,670 Okay. 337 00:13:24,670 --> 00:13:27,490 Now I know that I deleted all the 338 00:13:27,490 --> 00:13:29,170 baseline and edge constraints just to 339 00:13:29,170 --> 00:13:31,360 recreate some of them again, but it's 340 00:13:31,360 --> 00:13:33,580 often safer to work with a clear slate, 341 00:13:33,580 --> 00:13:35,890 when you're making significant changes 342 00:13:35,890 --> 00:13:37,210 to constraints, like we were here. 343 00:13:37,210 --> 00:13:39,460 Deleting just the side constraints for each 344 00:13:39,460 --> 00:13:40,930 button individually would have been very 345 00:13:40,930 --> 00:13:43,120 fiddly as well, and a good way to make a 346 00:13:43,120 --> 00:13:46,330 mistake. So the layout now, should match 347 00:13:46,330 --> 00:13:47,860 that second slide, which I'll just put on 348 00:13:47,860 --> 00:13:50,530 the screen briefly. And I can test that 349 00:13:50,530 --> 00:13:52,150 now, now we're back in Android Studio, by 350 00:13:52,150 --> 00:13:53,860 dragging the button9 around. Let's go 351 00:13:53,860 --> 00:13:56,620 ahead and do that, and you can see when 352 00:13:56,620 --> 00:13:58,030 I'm moving button9 around, everything 353 00:13:58,030 --> 00:14:00,070 is actually moving correctly. So 354 00:14:00,070 --> 00:14:01,060 basically, all the other buttons are 355 00:14:01,060 --> 00:14:03,160 following it. Now if any don't follow, it's 356 00:14:03,160 --> 00:14:04,780 very easy to spot and fix up their 357 00:14:04,780 --> 00:14:06,550 constraint, because you'll know the 358 00:14:06,550 --> 00:14:07,930 button that's not moving that needs to 359 00:14:07,930 --> 00:14:10,180 be actually adjusted. Now I didn't 360 00:14:10,180 --> 00:14:11,650 actually increase all the margins when 361 00:14:11,650 --> 00:14:14,020 producing the slide, so it was easier to 362 00:14:14,020 --> 00:14:16,090 see the constraints clearly, but, apart 363 00:14:16,090 --> 00:14:18,070 from the spacing, our layout should match 364 00:14:18,070 --> 00:14:20,350 that slide. If any buttons look out of 365 00:14:20,350 --> 00:14:22,030 line, then check the top and left or 366 00:14:22,030 --> 00:14:23,440 right constraint margins, as 367 00:14:23,440 --> 00:14:25,990 appropriate. Alright, the final step now 368 00:14:25,990 --> 00:14:28,020 is to centre button9 in the layout. 369 00:14:28,020 --> 00:14:29,610 We're going to do that by creating 370 00:14:29,610 --> 00:14:31,450 constraints from its left and right 371 00:14:31,450 --> 00:14:33,370 edges to the edges of the layout, and 372 00:14:33,370 --> 00:14:35,290 then making sure that it's horizontal 373 00:14:35,290 --> 00:14:38,380 slider is set to 50%. So I'm going to 374 00:14:38,380 --> 00:14:40,380 start by doing that. So I've got the 9 - 375 00:14:40,380 --> 00:14:43,840 constrain that to the left first. And you 376 00:14:43,840 --> 00:14:45,040 can see that it's all moved off screen, 377 00:14:45,040 --> 00:14:46,300 but that's fine, we're gonna click on 9 378 00:14:46,300 --> 00:14:48,600 again and constrain the right hand side. 379 00:14:48,600 --> 00:14:51,280 That brings it all back nicely. And we 380 00:14:51,280 --> 00:14:52,210 just want to make sure that the 381 00:14:52,210 --> 00:14:54,010 horizontal slider up here in the 382 00:14:54,010 --> 00:14:56,830 inspector, is set to 50, which it is in 383 00:14:56,830 --> 00:15:00,580 this case. Now button9's top constraint 384 00:15:00,580 --> 00:15:02,440 margin should be 8dp. At the moment, it's 385 00:15:02,440 --> 00:15:04,600 much larger - it's set to 20. So let's change 386 00:15:04,600 --> 00:15:07,240 that to 8dp, so it's closer to the Edit 387 00:15:07,240 --> 00:15:09,910 Text. And as you saw me do it there, it's 388 00:15:09,910 --> 00:15:11,440 a lot easier to do that in the inspector, 389 00:15:11,440 --> 00:15:12,760 rather than trying to drag it into 390 00:15:12,760 --> 00:15:14,860 position. Alright, now that we've done 391 00:15:14,860 --> 00:15:16,450 that, I'm gonna drag the buttonNeg in 392 00:15:16,450 --> 00:15:18,820 the Component Tree, so that it's just 393 00:15:18,820 --> 00:15:21,910 below the buttonDivide, as I did for 394 00:15:21,910 --> 00:15:25,150 landscape - our version of this layout. And 395 00:15:25,150 --> 00:15:29,280 now I'm just going to reformat the XML; 396 00:15:29,280 --> 00:15:33,340 Code, Reformat Code. No lines needed to 397 00:15:33,340 --> 00:15:35,530 be changed there. And importantly, let's 398 00:15:35,530 --> 00:15:37,390 now run the app to make sure it works in 399 00:15:37,390 --> 00:15:38,350 both portrait and landscape, 400 00:15:38,350 --> 00:15:41,890 bearing in mind that last time when 401 00:15:41,890 --> 00:15:43,150 we went into portrait mode we had a 402 00:15:43,150 --> 00:15:47,140 crash. And now it's working nicely, as you 403 00:15:47,140 --> 00:15:48,520 can see. So I should be able to press the 404 00:15:48,520 --> 00:15:53,050 NEG button; 55 equals. That's working 405 00:15:53,050 --> 00:15:54,520 nicely, and I should be able to go to 406 00:15:54,520 --> 00:15:58,050 landscape mode again and put NEG 407 00:15:58,050 --> 00:16:03,000 twelve times, and that's working nicely. 408 00:16:03,000 --> 00:16:05,470 Now if he app happened to crash in 409 00:16:05,470 --> 00:16:07,420 portrait mode when you tapped the Neg 410 00:16:07,420 --> 00:16:09,700 button, use the option, back here in 411 00:16:09,700 --> 00:16:12,370 Android Studio under Build, to Rebuild 412 00:16:12,370 --> 00:16:16,000 Project. And that's because Instant Run 413 00:16:16,000 --> 00:16:17,640 tries to update the app on the device, 414 00:16:17,640 --> 00:16:19,900 rather than installing it from scratch, 415 00:16:19,900 --> 00:16:21,250 and it can sometimes run into 416 00:16:21,250 --> 00:16:23,230 difficulties and cause problems. But 417 00:16:23,230 --> 00:16:25,780 rebuilding the project will fix that. And 418 00:16:25,780 --> 00:16:28,120 in my testing, I did find it failed to 419 00:16:28,120 --> 00:16:29,680 update the portrait layout correctly on 420 00:16:29,680 --> 00:16:31,750 Windows sometimes, but rebuilding the 421 00:16:31,750 --> 00:16:34,780 project solved that problem. Alright, so 422 00:16:34,780 --> 00:16:36,160 that's actually the end of the 423 00:16:36,160 --> 00:16:38,440 Calculator app, and this section - for now 424 00:16:38,440 --> 00:16:40,510 anyway. I want to show you how to use the 425 00:16:40,510 --> 00:16:42,640 chains in the ConstraintLayout, and 426 00:16:42,640 --> 00:16:44,740 our grid of buttons is a great 427 00:16:44,740 --> 00:16:46,450 way to demonstrate that. So I'm going to 428 00:16:46,450 --> 00:16:47,950 be coming back to this app a little bit 429 00:16:47,950 --> 00:16:50,320 later. But in this section, we covered 430 00:16:50,320 --> 00:16:51,940 layouts and the layout designer in 431 00:16:51,940 --> 00:16:54,190 greater detail, as well as looking at 432 00:16:54,190 --> 00:16:55,990 ways to constrain groups of widgets 433 00:16:55,990 --> 00:16:58,000 together, and to position the group in 434 00:16:58,000 --> 00:17:00,100 the layout. And we also looked at 435 00:17:00,100 --> 00:17:01,750 the guidelines that are available in the 436 00:17:01,750 --> 00:17:04,660 ConstraintLayout. We created code to 437 00:17:04,660 --> 00:17:06,430 respond to button clicks, and used the 438 00:17:06,430 --> 00:17:08,109 same listener for groups of buttons - 439 00:17:08,109 --> 00:17:10,240 which is generally more efficient when 440 00:17:10,240 --> 00:17:12,670 the buttons performs similar tasks. We 441 00:17:12,670 --> 00:17:14,290 also saw how to create different 442 00:17:14,290 --> 00:17:16,270 layouts for both portrait and landscape 443 00:17:16,270 --> 00:17:18,849 modes, to handle situations where widgets 444 00:17:18,849 --> 00:17:20,920 just wouldn't fit comfortably in both 445 00:17:20,920 --> 00:17:23,829 orientations. Now I also showed you a 446 00:17:23,829 --> 00:17:25,750 technique for testing a layout with your 447 00:17:25,750 --> 00:17:27,910 code, before creating all the layouts 448 00:17:27,910 --> 00:17:29,830 that are required - that way you can be 449 00:17:29,830 --> 00:17:30,850 sure that you're on the right track, 450 00:17:30,850 --> 00:17:33,100 before investing a lot of time creating 451 00:17:33,100 --> 00:17:36,280 multiple layouts. Alright, I've got some 452 00:17:36,280 --> 00:17:38,350 homework now to finish off this section, 453 00:17:38,350 --> 00:17:39,970 and to do that, we need the calculator 454 00:17:39,970 --> 00:17:42,180 running. So I'm just going to run that again, 455 00:17:42,180 --> 00:17:45,370 and we'll go hover over to it. So a strange 456 00:17:45,370 --> 00:17:47,020 quirk of the calculator is that you have 457 00:17:47,020 --> 00:17:49,030 to use the equals button to clear 458 00:17:49,030 --> 00:17:50,980 everything off, in order to start a 459 00:17:50,980 --> 00:17:52,210 completely new calculation. 460 00:17:52,210 --> 00:17:55,390 For example, if I type in six divided by 461 00:17:55,390 --> 00:18:01,899 two minus three, three equals; zero. But if 462 00:18:01,899 --> 00:18:04,480 now I want to multiply nine by five, I enter 463 00:18:04,480 --> 00:18:08,409 nine multiply, but because that tries 464 00:18:08,409 --> 00:18:10,390 to multiply zero by nine, it doesn't work. 465 00:18:10,390 --> 00:18:13,029 So what I actually have to do, is type 466 00:18:13,029 --> 00:18:17,200 equals, or press equals, nine equals 467 00:18:17,200 --> 00:18:21,940 star five, and now I get the answer 45 468 00:18:21,940 --> 00:18:24,270 when I press the next operator button. 469 00:18:24,270 --> 00:18:26,500 That's not very intuitive, and it might 470 00:18:26,500 --> 00:18:27,970 be better to have some sort of clear 471 00:18:27,970 --> 00:18:29,950 button to clear the result and start 472 00:18:29,950 --> 00:18:32,380 again. So as an exercise, your homework is 473 00:18:32,380 --> 00:18:34,570 to add a clear button to the calculator. 474 00:18:34,570 --> 00:18:36,010 Now I'm not going to be going 475 00:18:36,010 --> 00:18:37,360 through that solution to that in a video. 476 00:18:37,360 --> 00:18:39,480 The real test that you've got here is, 477 00:18:39,480 --> 00:18:41,679 does it work when you try to implement 478 00:18:41,679 --> 00:18:45,220 your solution. Alright, so moving on in 479 00:18:45,220 --> 00:18:46,480 the next section, we're going to start 480 00:18:46,480 --> 00:18:48,760 looking at downloading XML data from the 481 00:18:48,760 --> 00:18:51,220 internet, and parsing it to display the 482 00:18:51,220 --> 00:18:53,169 information. And we're also going to look 483 00:18:53,169 --> 00:18:55,390 at performing slow operations, such as 484 00:18:55,390 --> 00:18:57,700 downloading on a separate thread, so the 485 00:18:57,700 --> 00:18:59,799 app remains responsive even if it's busy 486 00:18:59,799 --> 00:19:01,990 downloading. So let's move on now to the 487 00:19:01,990 --> 00:19:04,440 next section.