1 00:00:04,730 --> 00:00:07,399 Alright, so let's start with the layout 2 00:00:07,399 --> 00:00:09,709 for the calculator app. Now we already 3 00:00:09,709 --> 00:00:11,269 know exactly what it should look like, 4 00:00:11,269 --> 00:00:13,969 because we've seen it running, but you 5 00:00:13,969 --> 00:00:15,469 wouldn't normally get to see a program 6 00:00:15,469 --> 00:00:18,020 running before you'd written it. Now the 7 00:00:18,020 --> 00:00:19,669 obvious thing to do would be to add the 8 00:00:19,669 --> 00:00:21,439 widgets in the order they'll appear on 9 00:00:21,439 --> 00:00:23,450 the screen, but you'll often want to add 10 00:00:23,450 --> 00:00:24,649 a widget that you hadn't originally 11 00:00:24,649 --> 00:00:27,680 decided you'd need. Now to show you how 12 00:00:27,680 --> 00:00:29,840 the layout designer can handle that, what 13 00:00:29,840 --> 00:00:31,880 I'm going to do is 'forget' that I need two 14 00:00:31,880 --> 00:00:33,559 EditText widgets, and then add the 15 00:00:33,559 --> 00:00:36,050 second one afterwards. So as you can see 16 00:00:36,050 --> 00:00:37,850 on screen, I'm in the layout designer, and 17 00:00:37,850 --> 00:00:40,520 if you've got the project pane open, 18 00:00:40,520 --> 00:00:42,200 shrink that to make a bit more room - and 19 00:00:42,200 --> 00:00:43,579 you can see that I've already done that. 20 00:00:43,579 --> 00:00:46,250 So we want an EditText widget at the 21 00:00:46,250 --> 00:00:48,710 top of the screen, and the data entry 22 00:00:48,710 --> 00:00:51,800 widgets are in the section titled Text, 23 00:00:51,800 --> 00:00:54,110 over here, which I can click and open. I 24 00:00:54,110 --> 00:00:55,400 can open this a little bit, just to see a 25 00:00:55,400 --> 00:00:58,340 bit more. Now Android actually provides 26 00:00:58,340 --> 00:01:00,079 quite a few widgets for entering data, 27 00:01:00,079 --> 00:01:02,960 including three for entering numbers. So 28 00:01:02,960 --> 00:01:05,420 we've got Number, Number Signed, as well 29 00:01:05,420 --> 00:01:08,329 as Number Decimal. Now our calculator is 30 00:01:08,329 --> 00:01:11,119 going to allow signed, decimal numbers, so 31 00:01:11,119 --> 00:01:12,200 we have to choose one of the available 32 00:01:12,200 --> 00:01:14,810 ones and modify it slightly. So we're 33 00:01:14,810 --> 00:01:17,899 going to go with the Number Signed. So 34 00:01:17,899 --> 00:01:19,490 we're going to delete, now, the Hello World 35 00:01:19,490 --> 00:01:22,639 TextView, so let's do that. Of course that 36 00:01:22,639 --> 00:01:24,350 was created automatically by Android 37 00:01:24,350 --> 00:01:27,350 Studio when the project was created. And 38 00:01:27,350 --> 00:01:28,789 what we're going to do is drag one of 39 00:01:28,789 --> 00:01:31,100 these widgets, the Number Signed, to the 40 00:01:31,100 --> 00:01:33,049 top of the screen. Now it's going to be 41 00:01:33,049 --> 00:01:34,520 centered eventually, so I'm not worried 42 00:01:34,520 --> 00:01:36,079 about where it's going - anywhere at the 43 00:01:36,079 --> 00:01:39,079 top will do for now. So I'm just going to 44 00:01:39,079 --> 00:01:42,740 put it up the top there. Now this is 45 00:01:42,740 --> 00:01:44,299 actually going to store the results of 46 00:01:44,299 --> 00:01:46,670 our calculations. So I'm going to change 47 00:01:46,670 --> 00:01:49,009 its ID up here, making sure that it's 48 00:01:49,009 --> 00:01:51,889 selected, which it is - change the ID to 49 00:01:51,889 --> 00:01:55,219 result. Press ENTER there, and you can see 50 00:01:55,219 --> 00:01:56,810 the name is also reflected in the left, 51 00:01:56,810 --> 00:01:59,240 under the Component Tree. Next we want to 52 00:01:59,240 --> 00:02:01,159 set a top constraint to the top of the 53 00:02:01,159 --> 00:02:03,499 layout, and left and right constraints to 54 00:02:03,499 --> 00:02:05,749 the edges. Before doing that, though, make 55 00:02:05,749 --> 00:02:08,240 sure that the default margin setting is 56 00:02:08,240 --> 00:02:10,250 set to 8dp. You can see over here that 57 00:02:10,250 --> 00:02:12,799 it is set to 8dp for me, but if for some 58 00:02:12,799 --> 00:02:14,959 reason it's not, change it back to 8dp. 59 00:02:14,959 --> 00:02:18,170 And if Autoconnect 60 00:02:18,170 --> 00:02:18,560 has 61 00:02:18,560 --> 00:02:20,030 already created some of the constraints, 62 00:02:20,030 --> 00:02:21,380 you can just change the margins 63 00:02:21,380 --> 00:02:23,569 yourself manually to 8. So I'm gonna 64 00:02:23,569 --> 00:02:25,310 go ahead and create the constraint from 65 00:02:25,310 --> 00:02:29,360 the result to the top, and also to the 66 00:02:29,360 --> 00:02:33,770 left, and also to the right. And we can 67 00:02:33,770 --> 00:02:34,880 see up here, in the top right-hand 68 00:02:34,880 --> 00:02:37,010 corner in the inspector, that we've got 69 00:02:37,010 --> 00:02:38,989 the correct margins of eight, for 70 00:02:38,989 --> 00:02:41,209 top left and right. Now the other 71 00:02:41,209 --> 00:02:43,160 thing you want to do is make sure that 72 00:02:43,160 --> 00:02:45,410 the widget's set to wrap_content, both 73 00:02:45,410 --> 00:02:47,150 horizontally and vertically - and you can 74 00:02:47,150 --> 00:02:49,400 see that's the case over here. Alright, 75 00:02:49,400 --> 00:02:51,019 now as I mentioned, I'm gonna skip the 76 00:02:51,019 --> 00:02:53,000 second EditText widget. I'm gonna 77 00:02:53,000 --> 00:02:54,709 start dragging buttons now onto the 78 00:02:54,709 --> 00:02:57,380 design, in a rough four by four grid. Now 79 00:02:57,380 --> 00:02:58,850 there's no point, here, worrying about 80 00:02:58,850 --> 00:03:01,310 placing them exactly just yet, and that's 81 00:03:01,310 --> 00:03:02,330 because all the positioning is 82 00:03:02,330 --> 00:03:03,440 ultimately going to be done using 83 00:03:03,440 --> 00:03:06,709 constraints. Now if Autoconnect is on 84 00:03:06,709 --> 00:03:08,299 for you, make sure you turn it off at 85 00:03:08,299 --> 00:03:09,890 this point. And you can see over here, 86 00:03:09,890 --> 00:03:11,540 that my Autoconnect is off because 87 00:03:11,540 --> 00:03:13,580 I've got the slash showing through, or 88 00:03:13,580 --> 00:03:15,290 over the top of the magnet icon, 89 00:03:15,290 --> 00:03:17,269 which of course, is the icon for Auto 90 00:03:17,269 --> 00:03:18,560 connect - so I'm making sure that that's 91 00:03:18,560 --> 00:03:21,290 turned off. And I'm doing that because it 92 00:03:21,290 --> 00:03:22,910 doesn't really do the same thing for 93 00:03:22,910 --> 00:03:24,530 each button, and I want them to follow a 94 00:03:24,530 --> 00:03:25,880 pattern in the way that 95 00:03:25,880 --> 00:03:27,890 their constraints are actually organized. 96 00:03:27,890 --> 00:03:30,109 So I'm gonna drag 16 buttons now, so 97 00:03:30,109 --> 00:03:31,280 I'm gonna click on All over here in 98 00:03:31,280 --> 00:03:33,530 the pallet and then move over, and 99 00:03:33,530 --> 00:03:37,549 start dragging some buttons. Again, it 100 00:03:37,549 --> 00:03:38,720 doesn't matter too much where these 101 00:03:38,720 --> 00:03:40,910 buttons are, because we're going to be 102 00:03:40,910 --> 00:03:43,280 using constraints to actually position 103 00:03:43,280 --> 00:03:48,260 them exactly. So a 4 by 4 grid, as I've 104 00:03:48,260 --> 00:03:51,000 mentioned. 105 00:03:51,000 --> 00:03:55,180 Okay, we're halfway there. 106 00:03:55,180 --> 00:04:00,220 Okay, three to go. 107 00:04:00,220 --> 00:04:02,320 And as you can see now, I've got all of 108 00:04:02,320 --> 00:04:03,850 them on there, and a little bit of a 109 00:04:03,850 --> 00:04:05,710 squeeze, but again, don't worry if they 110 00:04:05,710 --> 00:04:07,150 overlap, or don't line up properly, 111 00:04:07,150 --> 00:04:08,380 because we are going to be fixing that. 112 00:04:08,380 --> 00:04:10,570 And you saw that I turned off Auto 113 00:04:10,570 --> 00:04:11,860 connect for that, and I really do suggest 114 00:04:11,860 --> 00:04:13,810 that you do that - it really doesn't seem 115 00:04:13,810 --> 00:04:16,298 to cope well with a lot of widgets. Al 116 00:04:16,298 --> 00:04:18,010 right, now we want the buttons for the 117 00:04:18,010 --> 00:04:20,350 numbers to be called button 0 to button 118 00:04:20,350 --> 00:04:23,050 9, and if you'd look at the Component Tree 119 00:04:23,050 --> 00:04:25,450 to the left over here, we can see two 120 00:04:25,450 --> 00:04:27,220 things; firstly, there's this little error 121 00:04:27,220 --> 00:04:29,260 bar appearing, and it's complaining that 122 00:04:29,260 --> 00:04:31,420 the View isn't constrained, and that's 123 00:04:31,420 --> 00:04:32,980 because we haven't got any constraints 124 00:04:32,980 --> 00:04:34,660 because we had Autoconnect turned off. 125 00:04:34,660 --> 00:04:36,820 As you can see, that it has actually 126 00:04:36,820 --> 00:04:39,580 named this button 2 3 4 5 6 7 8 9 10 11 127 00:04:39,580 --> 00:04:42,430 through to 16. And that's because 128 00:04:42,430 --> 00:04:44,320 Android Studio automatically appends a 129 00:04:44,320 --> 00:04:46,540 number to the ID, when you put more than 130 00:04:46,540 --> 00:04:49,150 one of the same widget on the screen. Now 131 00:04:49,150 --> 00:04:50,770 you might be tempted, at this point, to 132 00:04:50,770 --> 00:04:53,110 work systematically up or down the 133 00:04:53,110 --> 00:04:54,460 screen changing the IDs, 134 00:04:54,460 --> 00:04:56,350 but you can't set a widget to have an ID 135 00:04:56,350 --> 00:04:59,200 that's already in use. Now you can, of 136 00:04:59,200 --> 00:05:01,270 course, do this any way you want, 137 00:05:01,270 --> 00:05:02,830 but what I'm gonna do is try and change 138 00:05:02,830 --> 00:05:05,290 as few IDs as possible. I'm gonna make 139 00:05:05,290 --> 00:05:07,870 the button text match the IDs that Android 140 00:05:07,870 --> 00:05:10,300 Studio has assigned for us. So I'm gonna go 141 00:05:10,300 --> 00:05:12,250 ahead and change, firstly, the ID 142 00:05:12,250 --> 00:05:14,680 of the first button - button. Click on that. 143 00:05:14,680 --> 00:05:16,720 And I'm going to change the ID of that to 144 00:05:16,720 --> 00:05:20,169 button0, and I'm also going to change 145 00:05:20,169 --> 00:05:24,640 its text to 0. And the Component Tree is 146 00:05:24,640 --> 00:05:26,740 very useful for work like this, 147 00:05:26,740 --> 00:05:28,510 you know, when selecting the buttons at 148 00:05:28,510 --> 00:05:29,680 this stage, because at the moment they 149 00:05:29,680 --> 00:05:31,630 all look the same in the layout. Alright, 150 00:05:31,630 --> 00:05:33,070 so you can see I've changed button zero's 151 00:05:33,070 --> 00:05:36,280 text and ID; button 0 and 0. respectively. 152 00:05:36,280 --> 00:05:37,840 I'm going to work my way through buttons 153 00:05:37,840 --> 00:05:39,520 2 through 9 in the Component Tree, 154 00:05:39,520 --> 00:05:40,840 giving them the correct text. So I'm 155 00:05:40,840 --> 00:05:43,990 going to click on button2, change the 156 00:05:43,990 --> 00:06:02,660 text to 2, button3, 3, 4, 4, 5, 5, 6. 157 00:06:02,660 --> 00:06:13,680 Okay 7, 8, okay, 9. So you 158 00:06:13,680 --> 00:06:16,080 can see we've got the buttons 0 2 3 4 5 159 00:06:16,080 --> 00:06:19,410 6 7 8 9 at the moment. Now we're missing 160 00:06:19,410 --> 00:06:21,330 button1 at the moment. Android Studio 161 00:06:21,330 --> 00:06:24,509 calls the second button, button2, but 162 00:06:24,509 --> 00:06:26,880 didn't create a button1, because when we 163 00:06:26,880 --> 00:06:28,169 added the first button, it didn't 164 00:06:28,169 --> 00:06:29,880 actually know there'd be more. So, what 165 00:06:29,880 --> 00:06:31,259 I'm going to do is change the ID of 166 00:06:31,259 --> 00:06:34,560 button 10, by clicking it. You can change 167 00:06:34,560 --> 00:06:40,470 that to button1. Then we're gonna change the 168 00:06:40,470 --> 00:06:45,389 text to 1 as well. Okay. Alright, so we've 169 00:06:45,389 --> 00:06:47,880 now got the 10 digit buttons, so it's 170 00:06:47,880 --> 00:06:49,889 time to start arranging them correctly. 171 00:06:49,889 --> 00:06:52,139 Now I could do with a bit more room at 172 00:06:52,139 --> 00:06:53,970 the top, because 7 is going to go at the 173 00:06:53,970 --> 00:06:55,860 top left of the button grid. But there's 174 00:06:55,860 --> 00:06:57,270 not enough room to really place it 175 00:06:57,270 --> 00:06:58,500 without overlapping - it's a little bit 176 00:06:58,500 --> 00:07:01,020 tight there. Now there's no reason you can't 177 00:07:01,020 --> 00:07:02,789 overlap buttons when you're creating the 178 00:07:02,789 --> 00:07:04,860 layout, but it does make getting to the 179 00:07:04,860 --> 00:07:07,110 constraint handles difficult. So rather 180 00:07:07,110 --> 00:07:08,340 than moving the buttons down 181 00:07:08,340 --> 00:07:10,349 individually, though, what I can do is 182 00:07:10,349 --> 00:07:12,120 just click, just below the 183 00:07:12,120 --> 00:07:15,419 bottom right button down here, and I can 184 00:07:15,419 --> 00:07:17,639 drag a rectangle out so that it extends 185 00:07:17,639 --> 00:07:20,280 over all the buttons. So I'm gonna do 186 00:07:20,280 --> 00:07:21,509 that, and there's actually no need to 187 00:07:21,509 --> 00:07:24,509 fully enclose the button - just any 188 00:07:24,509 --> 00:07:27,210 part of it will select it - and if the, 189 00:07:27,210 --> 00:07:29,159 basically, if the rectangle includes any 190 00:07:29,159 --> 00:07:30,539 part of one it's going to be selected. 191 00:07:30,539 --> 00:07:32,520 So when all the buttons are selected - 192 00:07:32,520 --> 00:07:34,440 which you can see that the rectangle is 193 00:07:34,440 --> 00:07:35,580 touching all of them now - I'm going to 194 00:07:35,580 --> 00:07:37,680 release the mouse. And you can see now 195 00:07:37,680 --> 00:07:39,419 that we've selected all the buttons, and you 196 00:07:39,419 --> 00:07:41,550 can see that clearly in the blueprint, 197 00:07:41,550 --> 00:07:44,370 but also in the Component Tree. So I'm 198 00:07:44,370 --> 00:07:45,570 going to drag them down now, just to 199 00:07:45,570 --> 00:07:46,680 make a bit more room for what we're 200 00:07:46,680 --> 00:07:49,169 doing - drag it right down towards the bottom. And 201 00:07:49,169 --> 00:07:50,909 you can click anywhere in a blank area 202 00:07:50,909 --> 00:07:52,740 of the Design or Blueprint. If you do that, 203 00:07:52,740 --> 00:07:55,110 that and unselects them, or deselects them - 204 00:07:55,110 --> 00:07:57,240 you can see that's happened there. Al 205 00:07:57,240 --> 00:07:58,740 right, now to lay out the grid, 206 00:07:58,740 --> 00:08:00,030 one of the buttons is going to be the 207 00:08:00,030 --> 00:08:02,729 key button. Now it's that one that's going 208 00:08:02,729 --> 00:08:04,919 to be used to constrain the entire array 209 00:08:04,919 --> 00:08:07,259 of buttons. And I'm going to choose 210 00:08:07,259 --> 00:08:09,150 button 7, which is the one that will be 211 00:08:09,150 --> 00:08:11,550 at the top left. Now you could use either 212 00:08:11,550 --> 00:08:13,770 the button 7 or the slash button, the 213 00:08:13,770 --> 00:08:14,790 forward slash, which will 214 00:08:14,790 --> 00:08:16,470 at the top right - the one that we're 215 00:08:16,470 --> 00:08:18,330 gonna be using for division - but we 216 00:08:18,330 --> 00:08:20,640 haven't named that one yet. So what I'm 217 00:08:20,640 --> 00:08:22,560 going to do is constrain the top of 218 00:08:22,560 --> 00:08:24,690 button seven to the bottom of the Edit 219 00:08:24,690 --> 00:08:26,880 Text widget, and then constrain its left 220 00:08:26,880 --> 00:08:29,430 edge to the left edge of the screen. So I'll 221 00:08:29,430 --> 00:08:31,050 do that. I'm going to click on the seven, 222 00:08:31,050 --> 00:08:33,150 and as I mentioned, I'm going to 223 00:08:33,150 --> 00:08:35,640 constrain it to the bottom of the Edit 224 00:08:35,640 --> 00:08:38,960 Text widget. So I'll do that first. And 225 00:08:38,960 --> 00:08:41,070 then I'm going to constrain its left 226 00:08:41,070 --> 00:08:45,420 edge to the left edge of the screen, like 227 00:08:45,420 --> 00:08:47,520 so. And you can see that it's been placed 228 00:08:47,520 --> 00:08:49,590 automatically, once the constraints are 229 00:08:49,590 --> 00:08:51,330 set, and that's why I haven't been too 230 00:08:51,330 --> 00:08:52,740 worried about trying to place the 231 00:08:52,740 --> 00:08:53,700 buttons accurately. 232 00:08:53,700 --> 00:08:55,320 Alright, the next thing I'm going to do 233 00:08:55,320 --> 00:08:58,440 is constrain the baseline of button 8 234 00:08:58,440 --> 00:09:00,660 the baseline of button 7, and the 235 00:09:00,660 --> 00:09:02,880 left edge of button 8 to the right edge 236 00:09:02,880 --> 00:09:05,130 of button 7. Now when you're doing 237 00:09:05,130 --> 00:09:06,780 things like that, I suggest leaving the 238 00:09:06,780 --> 00:09:09,660 baseline til last. If the buttons get 239 00:09:09,660 --> 00:09:11,790 too close together, then setting the 240 00:09:11,790 --> 00:09:13,260 constraint on the edge can be very 241 00:09:13,260 --> 00:09:15,450 fiddly. Now because the baseline 242 00:09:15,450 --> 00:09:16,860 constraint handles are in the middle of 243 00:09:16,860 --> 00:09:18,840 the widgets, they're actually much easier 244 00:09:18,840 --> 00:09:20,460 to work with when widgets are close 245 00:09:20,460 --> 00:09:22,890 together. So let's do button 8 first. I'm 246 00:09:22,890 --> 00:09:24,060 going to do the button 8 constraint 247 00:09:24,060 --> 00:09:25,410 from its left edge to the right of 248 00:09:25,410 --> 00:09:28,610 button 7. Click on button 8. 249 00:09:28,610 --> 00:09:32,820 Constrain it to the right of 7, as 250 00:09:32,820 --> 00:09:35,430 you can see there. Now if the display 251 00:09:35,430 --> 00:09:36,690 gets a bit messy, which you can see it's 252 00:09:36,690 --> 00:09:37,980 getting a little bit messy from my point 253 00:09:37,980 --> 00:09:40,980 of view now - we've got the eight button 254 00:09:40,980 --> 00:09:42,270 overlaying another number - 255 00:09:42,270 --> 00:09:44,100 don't worry too much about that, that's 256 00:09:44,100 --> 00:09:46,710 okay. As long as button eight is selected, 257 00:09:46,710 --> 00:09:49,020 which it still is, and if for some reason 258 00:09:49,020 --> 00:09:50,340 it isn't, remembering you can still 259 00:09:50,340 --> 00:09:52,050 select it from the Component Tree to the 260 00:09:52,050 --> 00:09:54,450 left. I can set a baseline constraint to 261 00:09:54,450 --> 00:09:56,910 button 7. If it gets hard to click on the 262 00:09:56,910 --> 00:09:58,290 constraint handles, then you may have to 263 00:09:58,290 --> 00:10:00,120 drag buttons around. But it doesn't 264 00:10:00,120 --> 00:10:01,680 really matter how chaotic the display 265 00:10:01,680 --> 00:10:03,780 starts to appear, because you'll get more 266 00:10:03,780 --> 00:10:05,370 and more organized as the constraints 267 00:10:05,370 --> 00:10:07,050 are actually created. So what I'm going 268 00:10:07,050 --> 00:10:09,390 to do now is, come down here and click on 269 00:10:09,390 --> 00:10:11,910 the ab button, which opens up the 270 00:10:11,910 --> 00:10:13,440 baseline constraint, and then I'm 271 00:10:13,440 --> 00:10:15,810 going to constrain this button eight 272 00:10:15,810 --> 00:10:17,700 baseline constraint to button seven. 273 00:10:17,700 --> 00:10:22,050 So I'm gonna click and hold. Come up and 274 00:10:22,050 --> 00:10:23,550 constrain it to button seven, and you can see 275 00:10:23,550 --> 00:10:24,960 it's been moved up for us automatically. 276 00:10:24,960 --> 00:10:27,270 And by the way, as you finish setting 277 00:10:27,270 --> 00:10:28,780 up the constraints for each button, 278 00:10:28,780 --> 00:10:30,610 make sure you do check the margins 279 00:10:30,610 --> 00:10:31,960 to make sure that they're set to 8. 280 00:10:31,960 --> 00:10:34,060 It's easier to do that when while 281 00:10:34,060 --> 00:10:35,590 the button's being selected, rather than 282 00:10:35,590 --> 00:10:37,150 going back and going through all them 283 00:10:37,150 --> 00:10:40,000 individually, later. Alright, so button 284 00:10:40,000 --> 00:10:41,920 nine has a constraint from its left 285 00:10:41,920 --> 00:10:45,760 edge to the right of button eight. So go 286 00:10:45,760 --> 00:10:46,960 ahead and do that. I'm going to click on 287 00:10:46,960 --> 00:10:50,760 button 9, and the left edge of button 9, I'm 288 00:10:50,760 --> 00:10:52,840 gonna constrain to the right edge of 289 00:10:52,840 --> 00:10:55,540 button 8. You can see that's moved over 290 00:10:55,540 --> 00:10:58,270 for us. So you can see that it did move 291 00:10:58,270 --> 00:10:59,890 but it's still selected. And again, as 292 00:10:59,890 --> 00:11:01,030 long as I don't click on anything 293 00:11:01,030 --> 00:11:03,130 else, I can turn on the baseline 294 00:11:03,130 --> 00:11:04,750 constraint handle then drag it to the 295 00:11:04,750 --> 00:11:06,370 baseline of button eight. So I'm gonna go 296 00:11:06,370 --> 00:11:06,940 ahead and do that - 297 00:11:06,940 --> 00:11:12,640 turn on the baseline, and then constrain 298 00:11:12,640 --> 00:11:14,560 it to 8, and you can see that moves up 299 00:11:14,560 --> 00:11:18,220 nicely for us. Now button 4 needs a top 300 00:11:18,220 --> 00:11:22,090 constraint to the bottom of button 7. Now 301 00:11:22,090 --> 00:11:23,500 it might be tempting now, to constrain 302 00:11:23,500 --> 00:11:25,150 the left edge of button 4 to the left 303 00:11:25,150 --> 00:11:27,430 edge of the layout. Really though, we want 304 00:11:27,430 --> 00:11:29,410 the entire array of buttons to work like 305 00:11:29,410 --> 00:11:32,110 a single group. So if we go constraining 306 00:11:32,110 --> 00:11:34,270 each row to the layout, then it won't behave 307 00:11:34,270 --> 00:11:36,610 as a single entity. So instead, what I'm 308 00:11:36,610 --> 00:11:37,900 going to do, is constrain the left edge 309 00:11:37,900 --> 00:11:40,570 of button 4 to the left edge of button 7, 310 00:11:40,570 --> 00:11:43,270 then set the margin to 0 so it lines up. 311 00:11:43,270 --> 00:11:45,400 But let's start, firstly, with button 4. 312 00:11:45,400 --> 00:11:47,470 We click on that, and we want to set 313 00:11:47,470 --> 00:11:49,240 the top constraint to the bottom of 314 00:11:49,240 --> 00:11:54,610 button 7. Do that initially. Then as I 315 00:11:54,610 --> 00:11:57,160 mentioned, we're going to constrain the 316 00:11:57,160 --> 00:11:59,080 left edge of button to 4 to the left 317 00:11:59,080 --> 00:12:00,610 edge of button 7. So I'm going to go 318 00:12:00,610 --> 00:12:05,860 ahead and do that. And you can see at the 319 00:12:05,860 --> 00:12:07,750 moment, looking at it there, it's got a margin 320 00:12:07,750 --> 00:12:10,420 of 8. But we want to change that margin 321 00:12:10,420 --> 00:12:12,430 to zero, so that it lines up directly 322 00:12:12,430 --> 00:12:16,150 under the button ID 7. So I'm gonna 323 00:12:16,150 --> 00:12:18,100 change that to zero, and you can see it's now 324 00:12:18,100 --> 00:12:19,900 lining up and looks quite nice, 325 00:12:19,900 --> 00:12:22,089 particularly in the Design. You can see 326 00:12:22,089 --> 00:12:23,589 over here, that it's alignment 327 00:12:23,589 --> 00:12:26,620 looks nice. And just to show that the 328 00:12:26,620 --> 00:12:27,610 reason that I've done that - if I now 329 00:12:27,610 --> 00:12:29,680 start dragging button 7 around the 330 00:12:29,680 --> 00:12:32,520 screen. So I just click on just button 7, 331 00:12:32,520 --> 00:12:34,540 you can see that as I drag that 332 00:12:34,540 --> 00:12:36,940 around, all four buttons are moving now, 333 00:12:36,940 --> 00:12:38,740 and that's exactly what I wanted to 334 00:12:38,740 --> 00:12:42,130 happen. Alright, I can just set that 335 00:12:42,130 --> 00:12:45,220 back to eight. Now I could have just 336 00:12:45,220 --> 00:12:46,810 changed the margins back to eight, 337 00:12:46,810 --> 00:12:48,940 instead of just dragging it back but I 338 00:12:48,940 --> 00:12:50,260 did a combination of both here, as you 339 00:12:50,260 --> 00:12:53,620 can see. Alright, now button five needs 340 00:12:53,620 --> 00:12:55,450 a left constraint to the right of button 341 00:12:55,450 --> 00:12:57,670 four, and a baseline constraint to it as 342 00:12:57,670 --> 00:12:59,470 well. So let's go ahead and do that. So 343 00:12:59,470 --> 00:13:03,190 button five, constrain the left first to 344 00:13:03,190 --> 00:13:06,490 the right of 4, and then we're going to 345 00:13:06,490 --> 00:13:08,020 do the same thing we've done before with 346 00:13:08,020 --> 00:13:12,700 other buttons. Set the baseline for 4 347 00:13:12,700 --> 00:13:15,400 there, so it lines up, and making 348 00:13:15,400 --> 00:13:16,720 sure the margin of eight is still 349 00:13:16,720 --> 00:13:19,450 correct. And button six is constrained to 350 00:13:19,450 --> 00:13:21,430 button five in the same way. So click 351 00:13:21,430 --> 00:13:24,100 on six, constrain the left edge 352 00:13:24,100 --> 00:13:28,950 first, and then we do the baseline. 353 00:13:28,950 --> 00:13:31,180 Select five to put it on to five 354 00:13:31,180 --> 00:13:33,220 as well, and we're checking that the 355 00:13:33,220 --> 00:13:35,280 margin's still eight as well. 356 00:13:35,280 --> 00:13:38,020 Alright, so button one - well that's a 357 00:13:38,020 --> 00:13:41,080 repeat of button 4. So it's top is 358 00:13:41,080 --> 00:13:42,790 constrained to the bottom of button 4, 359 00:13:42,790 --> 00:13:45,130 and it's left edge to the left edge of 360 00:13:45,130 --> 00:13:47,620 button four, with a margin of zero. So 361 00:13:47,620 --> 00:13:48,250 let's do that. 362 00:13:48,250 --> 00:13:52,500 So button one, constrain the top first. 363 00:13:52,500 --> 00:13:55,270 And then, as we've done previously for 364 00:13:55,270 --> 00:13:58,720 button four, constrain it to 365 00:13:58,720 --> 00:14:00,790 the left edge of that 366 00:14:00,790 --> 00:14:03,400 button, and then change the margin, 367 00:14:03,400 --> 00:14:06,730 the left margin for button 1, to zero, 368 00:14:06,730 --> 00:14:09,010 so that it lines up nicely. And we 369 00:14:09,010 --> 00:14:10,150 can confirm that things are still 370 00:14:10,150 --> 00:14:12,930 looking ok - we can move seven around. 371 00:14:12,930 --> 00:14:15,310 Click on button 7, we can move it - you can 372 00:14:15,310 --> 00:14:16,720 see that everything's moving 373 00:14:16,720 --> 00:14:18,610 nicely. And I can just quickly 374 00:14:18,610 --> 00:14:22,540 change these margins if I want to, to put 375 00:14:22,540 --> 00:14:24,280 seven back where it was, and 376 00:14:24,280 --> 00:14:25,690 consequently, all the other buttons move 377 00:14:25,690 --> 00:14:27,940 as well. Alright, so button 2 is 378 00:14:27,940 --> 00:14:29,890 constrained to button 1 and button 3 to 379 00:14:29,890 --> 00:14:32,050 button 2. So we need the left 380 00:14:32,050 --> 00:14:33,190 constrained to the right of the 381 00:14:33,190 --> 00:14:34,660 destination button and a baseline 382 00:14:34,660 --> 00:14:37,330 constraint as well. So let's do that for 383 00:14:37,330 --> 00:14:41,050 buttons 2 and 3. So button 2 constrained 384 00:14:41,050 --> 00:14:46,900 to the left of button 1, and the baseline 385 00:14:46,900 --> 00:14:49,570 constraint there, making sure the 386 00:14:49,570 --> 00:14:51,339 margin's set to eight, which it is. And 387 00:14:51,339 --> 00:14:54,250 then lastly, button 3 - constrain that 388 00:14:54,250 --> 00:14:57,850 to the right of button 2, and set 389 00:14:57,850 --> 00:15:01,690 our baseline constraint as well. Okay, and 390 00:15:01,690 --> 00:15:03,730 the margin, you can see in the inspector, 391 00:15:03,730 --> 00:15:07,240 is also set to eight. So at this point 392 00:15:07,240 --> 00:15:08,830 now, we've got a nice group of buttons 393 00:15:08,830 --> 00:15:10,390 that I can drag around as a single 394 00:15:10,390 --> 00:15:13,180 object. Again, I can just drag them around 395 00:15:13,180 --> 00:15:15,070 and you can see that all nine buttons 396 00:15:15,070 --> 00:15:18,610 are now moving around nicely. So again, 397 00:15:18,610 --> 00:15:20,680 I'll just change the margins back to 398 00:15:20,680 --> 00:15:22,270 eight so that's sitting in the right 399 00:15:22,270 --> 00:15:24,760 position. Alright, so let's finish the 400 00:15:24,760 --> 00:15:26,620 video here. In the next video, we've still 401 00:15:26,620 --> 00:15:28,720 got some remaining buttons that need to 402 00:15:28,720 --> 00:15:31,060 be changed, and also their text changed. So 403 00:15:31,060 --> 00:15:32,200 we'll start working on that 404 00:15:32,200 --> 00:15:34,860 in the next video.