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.