1
00:00:00,083 --> 00:00:03,166
(lighthearted music)

2
00:00:05,560 --> 00:00:07,410
Our calculator app looks like it centres

3
00:00:07,410 --> 00:00:09,320
the array of buttons in portrait,

4
00:00:09,320 --> 00:00:10,390
so you can see on the screen there,

5
00:00:10,390 --> 00:00:13,770
but if we move over to the landscape layout,

6
00:00:13,770 --> 00:00:15,810
it's obvious that things aren't centred.

7
00:00:15,810 --> 00:00:18,340
In fact, to looking back in portrait,

8
00:00:18,340 --> 00:00:19,840
we've taken advantage of the fact

9
00:00:19,840 --> 00:00:22,380
that the layout contains a centred widget

10
00:00:22,380 --> 00:00:25,220
that's very close to the width of the buttons.

11
00:00:25,220 --> 00:00:27,860
So, we're able to constrain the key button,

12
00:00:27,860 --> 00:00:30,210
which recall was button seven,

13
00:00:30,210 --> 00:00:32,549
to the new number, F text widget,

14
00:00:32,549 --> 00:00:36,010
and have something that looks pretty central on the screen.

15
00:00:36,010 --> 00:00:37,920
We didn't really centre the buttons though,

16
00:00:37,920 --> 00:00:40,020
and obviously in landscape,

17
00:00:40,020 --> 00:00:42,800
it becomes very obvious that we didn't.

18
00:00:42,800 --> 00:00:45,530
Now, the landscape layout does still work quite well,

19
00:00:45,530 --> 00:00:47,850
and you may not actually even feel that the buttons

20
00:00:47,850 --> 00:00:50,990
should be centred as they look all right where they are.

21
00:00:50,990 --> 00:00:53,280
Now, I tend to agree but it is useful

22
00:00:53,280 --> 00:00:55,730
to know how to centre a group of widgets,

23
00:00:55,730 --> 00:00:57,010
and this is a good opportunity

24
00:00:57,010 --> 00:00:59,280
to look at a couple of ways to do this.

25
00:00:59,280 --> 00:01:01,010
Now, for this particular layer,

26
00:01:01,010 --> 00:01:03,530
there's actually a third approach you could take

27
00:01:03,530 --> 00:01:05,280
and that's using chains,

28
00:01:05,280 --> 00:01:07,730
and these became available with a recent release

29
00:01:07,730 --> 00:01:10,900
of the constraint layout, but there was no support for them

30
00:01:10,900 --> 00:01:14,300
in the Android Studio 2 layout designer.

31
00:01:14,300 --> 00:01:15,940
Now, they're not always appropriate,

32
00:01:15,940 --> 00:01:19,310
which is why I'm showing these other two approaches first,

33
00:01:19,310 --> 00:01:21,250
and, in fact, I'll create a separate video

34
00:01:21,250 --> 00:01:23,700
to show you how to use chains later.

35
00:01:23,700 --> 00:01:25,320
In the next few videos, we're going to have a look

36
00:01:25,320 --> 00:01:28,420
at one way we can centre groups of widgets.

37
00:01:28,420 --> 00:01:29,810
I'm then gonna set you a challenge

38
00:01:29,810 --> 00:01:31,410
to centre them another way,

39
00:01:31,410 --> 00:01:34,130
and if you keep in mind the concept of a key widget

40
00:01:34,130 --> 00:01:36,000
that all the others are constrained to,

41
00:01:36,000 --> 00:01:38,550
then you should be able to work the challenge out.

42
00:01:38,550 --> 00:01:40,840
So, I'm gonna start out with the calculator app loaded

43
00:01:40,840 --> 00:01:42,870
in Android Studio as I've got,

44
00:01:42,870 --> 00:01:46,280
and open the landscape version of the layout for editing,

45
00:01:46,280 --> 00:01:48,820
and I suggest you close down the project pane as well

46
00:01:48,820 --> 00:01:50,320
so that there's more room on the screen,

47
00:01:50,320 --> 00:01:52,183
and again I've done that.

48
00:01:52,183 --> 00:01:53,740
What we're going to do is we're gonna start

49
00:01:53,740 --> 00:01:56,890
by centering the two edit text widgets.

50
00:01:56,890 --> 00:01:58,290
Now, because there's only two of those,

51
00:01:58,290 --> 00:02:01,300
it's easier to then see what's going on.

52
00:02:01,300 --> 00:02:03,180
First though, I'm going to show you guidelines,

53
00:02:03,180 --> 00:02:04,410
which is what we're going to be using

54
00:02:04,410 --> 00:02:06,550
to constrain the widgets to.

55
00:02:06,550 --> 00:02:09,430
Now, guidelines don't appear in the palette of widgets,

56
00:02:09,430 --> 00:02:11,210
but you can place one on the layout

57
00:02:11,210 --> 00:02:13,760
by right-clicking the layout and selecting Helpers,

58
00:02:15,782 --> 00:02:17,140
then come down here and select Helpers,

59
00:02:17,140 --> 00:02:20,750
and I can click on add vertical or add horizontal guideline.

60
00:02:20,750 --> 00:02:23,170
Now, because we wanna centre things horizontally,

61
00:02:23,170 --> 00:02:24,450
we're gonna be choosing the option

62
00:02:24,450 --> 00:02:26,750
to add vertical guidelines.

63
00:02:26,750 --> 00:02:28,960
We can also come up here to the toolbar.

64
00:02:28,960 --> 00:02:29,793
There's an option there

65
00:02:29,793 --> 00:02:33,240
to add a vertical guideline or horizontal guideline.

66
00:02:33,240 --> 00:02:35,640
So, I'm going to click on add vertical guideline

67
00:02:36,610 --> 00:02:38,960
and, by the way, it's easy to see this in the blueprint

68
00:02:38,960 --> 00:02:41,640
because it doesn't show in the designer until you move

69
00:02:41,640 --> 00:02:43,780
the mouse over into the designer side,

70
00:02:43,780 --> 00:02:48,040
but I've got this set up in blueprint mode as you can see,

71
00:02:48,040 --> 00:02:50,770
and, by the way, sometimes when you go to add a guideline,

72
00:02:50,770 --> 00:02:52,680
it doesn't appear, and you can see here

73
00:02:52,680 --> 00:02:54,950
that it didn't appear for me when I did that,

74
00:02:54,950 --> 00:02:57,500
but you can come down here into the Component Tree,

75
00:02:58,740 --> 00:03:00,100
and you can see that it's been added down the bottom,

76
00:03:00,100 --> 00:03:02,070
and you can click on there to select it.

77
00:03:02,070 --> 00:03:05,520
Now, guidelines have widths and properties showing

78
00:03:05,520 --> 00:03:07,160
on the right-hand properties panel

79
00:03:07,160 --> 00:03:09,420
as you can see over here when I've clicked it,

80
00:03:09,420 --> 00:03:10,990
but there's little point changing them,

81
00:03:10,990 --> 00:03:13,970
and that's because they don't behave like normal widgets,

82
00:03:13,970 --> 00:03:16,473
and the documentation which I'll take you to now,

83
00:03:19,560 --> 00:03:21,470
and you can see the link on the screen there,

84
00:03:21,470 --> 00:03:23,780
it actually mentions that vertical guidelines

85
00:03:23,780 --> 00:03:25,840
have a width of zero and the height

86
00:03:25,840 --> 00:03:27,660
of the constraint layout parent,

87
00:03:27,660 --> 00:03:29,560
and horizontal guidelines have a height of zero

88
00:03:29,560 --> 00:03:32,750
and the width of their constraint layout parent.

89
00:03:32,750 --> 00:03:35,010
So, in other words, there's no point altering the layout

90
00:03:35,010 --> 00:03:38,550
width and layout height attributes for a guideline.

91
00:03:38,550 --> 00:03:41,600
In fact, there's no point altering any of their attributes.

92
00:03:41,600 --> 00:03:42,610
The only thing you can change

93
00:03:42,610 --> 00:03:45,380
is how far along the layout they are.

94
00:03:45,380 --> 00:03:47,290
You go back to Android Studio.

95
00:03:47,290 --> 00:03:49,400
So, you can drag them left and right

96
00:03:49,400 --> 00:03:51,210
to position them on the layout.

97
00:03:51,210 --> 00:03:52,870
Now, obviously a horizontal guideline

98
00:03:52,870 --> 00:03:55,060
would be dragged up and down instead,

99
00:03:55,060 --> 00:03:57,750
so although I'm working with a vertical guideline here,

100
00:03:57,750 --> 00:03:59,910
the same thing applies to horizontal guidelines,

101
00:03:59,910 --> 00:04:01,380
just the other way around.

102
00:04:01,380 --> 00:04:03,410
Now, the guideline's got a measure showing

103
00:04:03,410 --> 00:04:05,900
how far along the left edge of the height

104
00:04:05,900 --> 00:04:07,940
we are as a percentage, and if I just drag

105
00:04:07,940 --> 00:04:09,700
that over a little bit, we can see that number

106
00:04:09,700 --> 00:04:12,513
is increasing as I'm dragging it over to the right.

107
00:04:13,400 --> 00:04:16,100
Now, I can also measure from the right edge instead

108
00:04:16,100 --> 00:04:17,269
by clicking on the top of the guideline,

109
00:04:17,269 --> 00:04:18,519
so I'm gonna do that now,

110
00:04:19,450 --> 00:04:22,420
and you can see the number has now changed,

111
00:04:22,420 --> 00:04:24,290
and we're actually now measuring

112
00:04:24,290 --> 00:04:26,750
from the right-hand side to the left.

113
00:04:26,750 --> 00:04:29,480
In fact, each time it's clicked, it switches from left.

114
00:04:29,480 --> 00:04:30,500
I can click on it again and went to right.

115
00:04:30,500 --> 00:04:33,430
I can click on it again, and it's now in percentage mode,

116
00:04:33,430 --> 00:04:35,910
and that's percentage of how far along

117
00:04:37,131 --> 00:04:38,630
from the left-hand side that we're in position

118
00:04:38,630 --> 00:04:40,230
at the moment,

119
00:04:40,230 --> 00:04:42,150
and keep in mind that sometimes these don't work

120
00:04:42,150 --> 00:04:44,410
quite right until you actually move it a little bit.

121
00:04:44,410 --> 00:04:46,130
So, you might have to move the guideline

122
00:04:46,130 --> 00:04:47,620
before this takes effect,

123
00:04:47,620 --> 00:04:51,490
but I'm actually going to move this over now to exactly 50%,

124
00:04:51,490 --> 00:04:54,000
which is a percentage so therefore it's directly

125
00:04:54,000 --> 00:04:55,860
in the middle of the screen.

126
00:04:55,860 --> 00:04:58,500
And, as I mentioned before, I suggest you close

127
00:04:58,500 --> 00:05:00,990
the project pane and work just with the blueprint

128
00:05:00,990 --> 00:05:03,540
'cause that gives you more space to see what's going on.

129
00:05:03,540 --> 00:05:06,700
So, again, if I want this guideline centred, which I do,

130
00:05:06,700 --> 00:05:09,230
we just need to click until we get the percentage showing,

131
00:05:09,230 --> 00:05:11,350
and then move it until it's on 50%,

132
00:05:11,350 --> 00:05:15,540
and we're now directly centred in the middle of the layout.

133
00:05:15,540 --> 00:05:17,060
So, what I'm going to do now is delete

134
00:05:17,060 --> 00:05:20,133
the right-hand constraint of the new number widget,

135
00:05:20,133 --> 00:05:23,096
then I'm gonna constrain it to the guideline instead.

136
00:05:23,096 --> 00:05:26,200
So, I'm gonna come over here, select the new number widget,

137
00:05:26,200 --> 00:05:28,460
gonna delete the constraint which is currently

138
00:05:28,460 --> 00:05:30,700
constrained to the result edit text,

139
00:05:30,700 --> 00:05:33,630
delete that, then I'm gonna constrain it

140
00:05:33,630 --> 00:05:36,670
to the guideline instead as you can see over there.

141
00:05:36,670 --> 00:05:41,670
Now, the result edit text is constrained at the moment

142
00:05:41,990 --> 00:05:44,500
to the right-hand side, but we'll leave that.

143
00:05:44,500 --> 00:05:46,760
What we're gonna do is I'm gonna select that,

144
00:05:46,760 --> 00:05:48,510
and I'm going to now constrain that

145
00:05:48,510 --> 00:05:51,740
to the guideline on its left like so,

146
00:05:51,740 --> 00:05:54,053
and both the new number and result edit text

147
00:05:54,053 --> 00:05:57,450
are now constrained to the guideline.

148
00:05:57,450 --> 00:05:59,580
So, basically centred in their half of the layout

149
00:05:59,580 --> 00:06:01,070
as a result of what we've done.

150
00:06:01,070 --> 00:06:04,100
Now, before I go any further, it's going to be a lot easier

151
00:06:04,100 --> 00:06:06,430
to clear all the constraints on the layout,

152
00:06:06,430 --> 00:06:09,440
and recreate them rather than try

153
00:06:09,440 --> 00:06:12,250
to change the various button constraints,

154
00:06:12,250 --> 00:06:14,370
and that's because if you miss one, it can slow you down

155
00:06:14,370 --> 00:06:17,690
while you try to work out why something's not working.

156
00:06:17,690 --> 00:06:19,830
So, in other words, when you're making a radical change

157
00:06:19,830 --> 00:06:22,400
to a layout, as we're about to do here,

158
00:06:22,400 --> 00:06:24,560
my suggestion is to clear all the constraints

159
00:06:24,560 --> 00:06:28,600
first using the Clear All Constraint buttons on the toolbar,

160
00:06:28,600 --> 00:06:30,280
and this is also a good time to make sure

161
00:06:30,280 --> 00:06:32,530
that auto-connect is turned off.

162
00:06:32,530 --> 00:06:33,940
So, I'm going to come over here.

163
00:06:33,940 --> 00:06:35,870
You can see that auto-connect's turned off,

164
00:06:35,870 --> 00:06:38,630
but I'm gonna click on the Clear All Constraints button,

165
00:06:38,630 --> 00:06:41,600
this one here, to remove all constraints.

166
00:06:41,600 --> 00:06:43,810
Alright, so now what I'm gonna do is I'm gonna recreate

167
00:06:43,810 --> 00:06:46,470
the constraints for the two edit text widgets,

168
00:06:46,470 --> 00:06:48,770
constraining them on their inner edges to the guideline

169
00:06:48,770 --> 00:06:50,790
and also to the top of the layout.

170
00:06:50,790 --> 00:06:53,960
So, let's go ahead and do that, starting with new number.

171
00:06:53,960 --> 00:06:56,270
Constrain it to the guideline,

172
00:06:56,270 --> 00:06:58,970
and also constrain it to the top of the layout,

173
00:06:58,970 --> 00:07:00,870
and I'm also going to constrain result

174
00:07:02,060 --> 00:07:03,973
to the guideline and also to the top.

175
00:07:05,240 --> 00:07:07,920
Now, there's no need to constrain their outer edges,

176
00:07:07,920 --> 00:07:10,230
but you can do that if you want to.

177
00:07:10,230 --> 00:07:12,960
If you decide to do that, set the layout with attributes

178
00:07:12,960 --> 00:07:15,820
to match constraint for each added text

179
00:07:15,820 --> 00:07:17,690
rather than a rep and its core content,

180
00:07:17,690 --> 00:07:19,350
but I'm not gonna do that,

181
00:07:19,350 --> 00:07:22,110
and, in addition, you could use a baseline constraint

182
00:07:22,110 --> 00:07:24,440
to line them up vertically if you prefer

183
00:07:24,440 --> 00:07:27,930
which is what we had before I deleted all the constraints.

184
00:07:27,930 --> 00:07:30,770
Alright, now the margins that I've set

185
00:07:31,770 --> 00:07:34,970
leaves the edit text a little bit close to each other,

186
00:07:34,970 --> 00:07:35,900
so let's actually change

187
00:07:35,900 --> 00:07:38,974
their inner margins to 16 DP instead.

188
00:07:38,974 --> 00:07:39,807
So, I'm gonna go ahead,

189
00:07:39,807 --> 00:07:43,760
and for the new number, edit text change that to 16,

190
00:07:43,760 --> 00:07:47,690
and then for the result, change its left constraint

191
00:07:47,690 --> 00:07:50,760
to 16 as well just so they're a little bit further apart.

192
00:07:50,760 --> 00:07:53,730
Now, at this point, we can't switch to portrait

193
00:07:53,730 --> 00:07:55,510
to check the centering,

194
00:07:55,510 --> 00:07:58,050
and that's because portrait uses a different layout,

195
00:07:58,050 --> 00:08:01,260
and that brings up something that you wanna bear in mind

196
00:08:01,260 --> 00:08:04,490
is if you decide to create different portrait

197
00:08:04,490 --> 00:08:06,480
and landscape layouts for your app,

198
00:08:06,480 --> 00:08:08,390
when you do so, you've got two layouts

199
00:08:08,390 --> 00:08:10,710
to maintain instead of just one.

200
00:08:10,710 --> 00:08:13,690
So, if you can make a single layout work in both modes,

201
00:08:13,690 --> 00:08:16,600
then it does make life a lot easier to do that.

202
00:08:16,600 --> 00:08:19,350
Now, what we can do here is try different devices though,

203
00:08:19,350 --> 00:08:21,930
and I'm gonna see how this looks on another device

204
00:08:21,930 --> 00:08:24,690
by clicking on the option on the toolbar.

205
00:08:24,690 --> 00:08:27,010
Let's just try selecting a Nexus one.

206
00:08:27,010 --> 00:08:28,560
Let's see what that looks like.

207
00:08:29,470 --> 00:08:31,280
So, it looks okay horizontally anyway

208
00:08:31,280 --> 00:08:32,970
because of course the buttons are still dropping

209
00:08:32,970 --> 00:08:34,669
off the bottom of the screen,

210
00:08:34,669 --> 00:08:35,980
but at the moment, we're just considering

211
00:08:35,980 --> 00:08:37,870
the horizontal alignment.

212
00:08:37,870 --> 00:08:38,703
So, that's good.

213
00:08:38,703 --> 00:08:42,190
It's working okay, so lets go back to our Nexus 4.

214
00:08:42,190 --> 00:08:44,290
It's easier to use that because it's going

215
00:08:44,290 --> 00:08:46,460
to be a little bit easier to work with the buttons.

216
00:08:46,460 --> 00:08:49,850
So, to centre the buttons, we need the guideline

217
00:08:49,850 --> 00:08:50,820
to run down the gap

218
00:08:50,820 --> 00:08:53,330
between the button eight and button nine.

219
00:08:53,330 --> 00:08:55,080
So, in other words, there's two groups of buttons,

220
00:08:55,080 --> 00:08:56,530
one on the left-hand side,

221
00:08:56,530 --> 00:08:58,710
and one on the right-hand side of the guideline.

222
00:08:58,710 --> 00:09:01,060
So, we're now going to have a different key button.

223
00:09:01,060 --> 00:09:04,110
So, instead of everything being aligned to button seven,

224
00:09:04,110 --> 00:09:07,440
all the other buttons will take their lead from button nine.

225
00:09:07,440 --> 00:09:09,950
Now, I could use button eight instead.

226
00:09:09,950 --> 00:09:12,420
The important thing is that it's a button at the top

227
00:09:12,420 --> 00:09:14,180
and next to the guideline,

228
00:09:14,180 --> 00:09:16,410
and I find it easier to work with just the blueprint

229
00:09:16,410 --> 00:09:18,640
for things like this, and I've obviously been just using

230
00:09:18,640 --> 00:09:20,330
the blueprint in this video,

231
00:09:20,330 --> 00:09:22,650
but that way, everything's much bigger on the screen,

232
00:09:22,650 --> 00:09:25,020
and we've got more space to work with.

233
00:09:25,020 --> 00:09:27,760
Now, you can also use the plus button over here

234
00:09:27,760 --> 00:09:30,290
if you want to zoom everything up,

235
00:09:30,290 --> 00:09:32,870
which can make creating the constraints a lot easier,

236
00:09:32,870 --> 00:09:35,940
and also collapsing the palette and the Component Tree

237
00:09:35,940 --> 00:09:38,370
gives more space to the screen, or on the screen as well.

238
00:09:38,370 --> 00:09:40,270
So, I'm gonna go ahead and do that.

239
00:09:40,270 --> 00:09:42,680
Close those two off just so we've got

240
00:09:42,680 --> 00:09:44,970
a little bit more space to look at the things

241
00:09:44,970 --> 00:09:47,170
that are zoomed up a little bit more.

242
00:09:47,170 --> 00:09:50,200
Alright, so we gonna split the group of buttons into two,

243
00:09:50,200 --> 00:09:54,320
with button nine on the right-hand side of the guideline

244
00:09:54,320 --> 00:09:56,420
and button eight on the left.

245
00:09:56,420 --> 00:09:59,170
So on the right, each button in the second column,

246
00:09:59,170 --> 00:10:01,890
starting with the slash, will need a baseline constraint

247
00:10:01,890 --> 00:10:03,450
to the button on its left,

248
00:10:03,450 --> 00:10:05,770
and it should also have its left edge constrained

249
00:10:05,770 --> 00:10:08,640
to the right edge of the button on its left.

250
00:10:08,640 --> 00:10:11,640
So, lets start by splitting the two groups of buttons.

251
00:10:11,640 --> 00:10:14,580
I'm gonna get the first, or the right-edge button,

252
00:10:14,580 --> 00:10:16,680
the eight of the buttons

253
00:10:16,680 --> 00:10:19,040
that's starting with nine, six, three and equals,

254
00:10:19,040 --> 00:10:20,670
and move them over to the right-hand side

255
00:10:20,670 --> 00:10:21,920
of the guideline for now.

256
00:10:23,950 --> 00:10:25,890
So, we've now got our groups of buttons

257
00:10:25,890 --> 00:10:27,640
on two different sides.

258
00:10:27,640 --> 00:10:29,400
Now, on the right as I mentioned, each button

259
00:10:29,400 --> 00:10:32,810
in the second column that's starting with the slash here,

260
00:10:32,810 --> 00:10:36,240
that needs a baseline constraint to the button on its left,

261
00:10:36,240 --> 00:10:39,530
and it should also have its left edge constrained

262
00:10:39,530 --> 00:10:41,130
to the right edge of the button on its left.

263
00:10:41,130 --> 00:10:42,690
So, lets go ahead and do that.

264
00:10:42,690 --> 00:10:44,593
We're going to open up the baseline.

265
00:10:45,520 --> 00:10:48,763
Constrain that to the nine,

266
00:10:49,890 --> 00:10:54,003
likewise, for the asterisk, or the multiplication baseline,

267
00:10:55,040 --> 00:10:58,820
and come over here and add that to the six, next one,

268
00:10:58,820 --> 00:11:01,033
and in minus, we're going to do the same,

269
00:11:01,970 --> 00:11:04,973
baseline and constrain it.

270
00:11:07,210 --> 00:11:08,570
Baseline constraint there,

271
00:11:08,570 --> 00:11:11,133
and then the plus, we're going to do the same thing.

272
00:11:13,803 --> 00:11:14,920
Constrain it as you can see there,

273
00:11:14,920 --> 00:11:17,490
and for each of those four buttons as well,

274
00:11:17,490 --> 00:11:19,460
we should have its left edge constrained

275
00:11:19,460 --> 00:11:21,920
to the right edge of the button on its left.

276
00:11:21,920 --> 00:11:22,830
So, a similar thing there.

277
00:11:22,830 --> 00:11:26,200
We're going to click on that and constrain it

278
00:11:28,300 --> 00:11:29,133
for all four.

279
00:11:39,057 --> 00:11:41,750
So, you can see that we've got a baseline constraint

280
00:11:41,750 --> 00:11:42,583
for each of these now,

281
00:11:42,583 --> 00:11:47,090
and we've also got the constraint on the left for each one

282
00:11:48,200 --> 00:11:50,800
constrained to the right of the buttons on its left.

283
00:11:51,800 --> 00:11:54,030
Alright, so next we need to constrain the top edge

284
00:11:54,030 --> 00:11:57,650
of each button in the first column to be 8DP

285
00:11:57,650 --> 00:11:59,107
from the button above it.

286
00:11:59,107 --> 00:12:00,920
So, basically starting with the six

287
00:12:00,920 --> 00:12:02,720
and working down the column.

288
00:12:02,720 --> 00:12:03,670
So, lets go ahead and do that.

289
00:12:03,670 --> 00:12:05,923
So, the six I'm gonna constrain to the nine.

290
00:12:07,210 --> 00:12:08,810
We're gonna make sure we've got a margin of eight

291
00:12:08,810 --> 00:12:10,110
which we can see in the inspector.

292
00:12:10,110 --> 00:12:13,600
The three, we're gonna constrain to the six,

293
00:12:13,600 --> 00:12:16,540
and checking on the DP, we've got 8DP there

294
00:12:16,540 --> 00:12:18,690
showing on the inspector, and the equals sign

295
00:12:18,690 --> 00:12:21,250
I'm also going to constrain to the three

296
00:12:21,250 --> 00:12:22,800
as you can see there.

297
00:12:22,800 --> 00:12:24,650
Okay, so that's all done.

298
00:12:24,650 --> 00:12:27,030
Now, finally, those three buttons, these three buttons here,

299
00:12:27,030 --> 00:12:29,520
the six, the three, and the equals in this case,

300
00:12:29,520 --> 00:12:31,240
they should have their left edges constrained

301
00:12:31,240 --> 00:12:32,930
to the left edge of the button above,

302
00:12:32,930 --> 00:12:34,930
again starting with six.

303
00:12:34,930 --> 00:12:35,763
So, let's do that.

304
00:12:35,763 --> 00:12:38,763
So, with the six, I'm going to left constrain with the nine.

305
00:12:41,090 --> 00:12:43,563
With the three, we're gonna constrain to the six,

306
00:12:45,570 --> 00:12:48,520
and with the equals, we're going to constrain to the three,

307
00:12:49,540 --> 00:12:52,040
but what I am going to do then is also change the margins

308
00:12:52,040 --> 00:12:56,350
for six to zero so that it lines up correctly

309
00:12:56,350 --> 00:12:59,503
for three to zero,

310
00:13:00,534 --> 00:13:03,143
and also the equals to zero as well,

311
00:13:05,440 --> 00:13:07,230
and you saw that they appear to be stepped until

312
00:13:07,230 --> 00:13:08,790
I changed all their left margins to zero,

313
00:13:08,790 --> 00:13:10,040
which I've done now.

314
00:13:10,040 --> 00:13:11,420
So, at this point now, I should be able

315
00:13:11,420 --> 00:13:13,470
to drag the nine button around,

316
00:13:13,470 --> 00:13:15,870
and the other seven buttons will follow with it,

317
00:13:17,517 --> 00:13:18,760
and you can see that that's actually working,

318
00:13:18,760 --> 00:13:20,390
and it's working quite nicely,

319
00:13:20,390 --> 00:13:22,320
so I could have actually done this work

320
00:13:22,320 --> 00:13:23,730
on the left hand side.

321
00:13:23,730 --> 00:13:25,840
So, I could have actually, instead of moving these manually,

322
00:13:25,840 --> 00:13:27,100
which I did, I dragged them over,

323
00:13:27,100 --> 00:13:28,670
I could have done all the work

324
00:13:28,670 --> 00:13:30,270
until they're all constrained together,

325
00:13:30,270 --> 00:13:32,850
then just drag the one button over instead of doing

326
00:13:32,850 --> 00:13:36,320
what I did which was select all eight buttons,

327
00:13:36,320 --> 00:13:37,880
and then we drag them over that way.

328
00:13:37,880 --> 00:13:40,380
Either way would have worked just fine.

329
00:13:40,380 --> 00:13:42,350
Alright, so let's end the video here.

330
00:13:42,350 --> 00:13:44,130
In the next video, we need to start working

331
00:13:44,130 --> 00:13:46,880
on the left-hand side of the block,

332
00:13:46,880 --> 00:13:49,040
and that's going to be a mirror image to what we've done

333
00:13:49,040 --> 00:13:50,620
to the buttons on the right.

334
00:13:50,620 --> 00:13:52,370
So, I'll see you in the next video.