1
00:00:00,267 --> 00:00:02,079
(introductory music)

2
00:00:02,079 --> 00:00:05,392
(typing sound)

3
00:00:05,392 --> 00:00:07,126
(Tim Buchalka )Alright, so continuing on.

4
00:00:07,126 --> 00:00:09,126
Before we actually get into the layout designer,

5
00:00:09,126 --> 00:00:11,125
you want to make sure that Android Studio

6
00:00:11,125 --> 00:00:14,170
is using the Android view for the project pane.

7
00:00:14,170 --> 00:00:15,932
So to see whether you are or not,

8
00:00:15,932 --> 00:00:17,986
you come over here to the left hand pane, here,

9
00:00:17,986 --> 00:00:19,267
and by the way, if you've got a screen

10
00:00:19,267 --> 00:00:20,418
that looks similar to that,

11
00:00:20,418 --> 00:00:21,998
just click on the Project tab

12
00:00:21,998 --> 00:00:23,766
to open up the pane there.

13
00:00:23,766 --> 00:00:25,967
And, you want to make sure

14
00:00:25,967 --> 00:00:26,987
that Android is selected.

15
00:00:26,987 --> 00:00:28,747
If you're in a different view,

16
00:00:28,747 --> 00:00:29,700
things may look a little different.

17
00:00:29,700 --> 00:00:32,113
So, you want to make sure that you're

18
00:00:32,113 --> 00:00:33,601
in Android view which is the,

19
00:00:33,601 --> 00:00:35,097
usually the best view to be in

20
00:00:35,097 --> 00:00:38,622
when you're actually working with Android code.

21
00:00:38,622 --> 00:00:40,298
You can work in project view if you prefer,

22
00:00:40,298 --> 00:00:41,914
but some of the dialogues that appear

23
00:00:41,914 --> 00:00:43,605
in creating layouts, for example,

24
00:00:43,605 --> 00:00:45,637
actually are different in the two views.

25
00:00:45,637 --> 00:00:47,710
And I'm gonna mainly be using Android view

26
00:00:47,710 --> 00:00:48,969
for this course,

27
00:00:48,969 --> 00:00:50,659
and we'll only switch to Project view

28
00:00:50,659 --> 00:00:51,943
when it's necessary to work with a few files

29
00:00:51,943 --> 00:00:54,044
that don't appear in Android view.

30
00:00:54,044 --> 00:00:56,159
Alright, so now that everything's set up,

31
00:00:56,159 --> 00:00:57,954
we need to go to the res folder

32
00:00:57,954 --> 00:00:59,389
and expand layout.

33
00:00:59,389 --> 00:01:01,984
I'm gonna open that up.

34
00:01:01,984 --> 00:01:03,715
Here's the res folder, I'm gonna expand that,

35
00:01:03,715 --> 00:01:05,516
and there's our layout folder,

36
00:01:05,516 --> 00:01:07,039
expand that as well.

37
00:01:07,039 --> 00:01:08,391
Now this res folder, by the way,

38
00:01:08,391 --> 00:01:10,092
is where all the app's resources,

39
00:01:10,092 --> 00:01:13,410
things like images and so forth, live.

40
00:01:13,410 --> 00:01:14,518
So it's the files in here,

41
00:01:14,518 --> 00:01:16,581
including all the sub folders,

42
00:01:16,581 --> 00:01:18,952
that can't have capital letters in their names.

43
00:01:18,952 --> 00:01:21,282
I'm gonna start by opening this activity

44
00:01:21,282 --> 00:01:22,949
_main .xml file,

45
00:01:22,949 --> 00:01:24,982
by double clicking it.

46
00:01:24,982 --> 00:01:26,687
Now, I could have just clicked this tab

47
00:01:26,687 --> 00:01:30,040
at the top here if I wanted to instead.

48
00:01:30,040 --> 00:01:30,873
But if you close it,

49
00:01:30,873 --> 00:01:32,573
you may need to know how to open it again,

50
00:01:32,573 --> 00:01:34,783
and that's how, by double clicking it over here.

51
00:01:34,783 --> 00:01:36,692
So we now get the layout designer

52
00:01:36,692 --> 00:01:39,004
with the design and a blue print.

53
00:01:39,004 --> 00:01:40,722
Now on a small screen you can toggle them

54
00:01:40,722 --> 00:01:42,950
on and off using these two buttons up the top here.

55
00:01:45,091 --> 00:01:46,826
You've got Design and Blueprint, so I can select

56
00:01:46,826 --> 00:01:49,257
just Design, or just Blueprint,

57
00:01:49,257 --> 00:01:51,885
or Design and Blueprint.

58
00:01:51,885 --> 00:01:53,542
So depending on how much screen real estate

59
00:01:53,542 --> 00:01:57,059
you've got, you may or may not want to turn those off.

60
00:01:57,059 --> 00:01:59,372
(clicking sound)

61
00:01:59,372 --> 00:02:00,934
Now the icons on these buttons, by the way,

62
00:02:00,934 --> 00:02:02,406
have changed from the previous version

63
00:02:02,406 --> 00:02:03,928
of Android Studio,

64
00:02:03,928 --> 00:02:05,127
and there's nothing to say that they

65
00:02:05,127 --> 00:02:06,734
won't change again.

66
00:02:06,734 --> 00:02:07,872
Now, if you hover your mouse pointer

67
00:02:07,872 --> 00:02:09,360
over any of the buttons though,

68
00:02:09,360 --> 00:02:10,693
you'll get you'll get a tool tip

69
00:02:10,693 --> 00:02:12,393
that briefly describes what they do,

70
00:02:12,393 --> 00:02:13,704
and that can be a very good way

71
00:02:13,704 --> 00:02:15,080
to make sure that you're clicking the button you want,

72
00:02:15,080 --> 00:02:17,586
whatever icon it happens to use.

73
00:02:17,586 --> 00:02:19,679
So, I can hover over that,

74
00:02:19,679 --> 00:02:21,592
Select Design Surface as you can see,

75
00:02:21,592 --> 00:02:23,146
and I can either click on it there,

76
00:02:23,146 --> 00:02:25,153
and that brings up the little pop-up menu,

77
00:02:25,153 --> 00:02:27,483
and choose which one I want.

78
00:02:27,483 --> 00:02:28,696
Just click somewhere else

79
00:02:28,696 --> 00:02:30,754
to get rid of the menu.

80
00:02:30,754 --> 00:02:31,885
Alright, so that's very useful

81
00:02:31,885 --> 00:02:33,433
if you want to experiment with things.

82
00:02:33,433 --> 00:02:34,393
But, we're gonna be looking at

83
00:02:34,393 --> 00:02:36,738
most of the buttons on the tool bar anyway.

84
00:02:36,738 --> 00:02:38,023
So as well as toggling off

85
00:02:38,023 --> 00:02:39,932
either the design or the blue print,

86
00:02:39,932 --> 00:02:41,633
we can also make more room

87
00:02:41,633 --> 00:02:43,751
by closing the project pane,

88
00:02:43,751 --> 00:02:45,927
and that leaves more screen space for our layout,

89
00:02:45,927 --> 00:02:47,407
so I normally do close it

90
00:02:47,407 --> 00:02:49,880
when working on the layout designer.

91
00:02:49,880 --> 00:02:50,713
So, I'm gonna come over here

92
00:02:50,713 --> 00:02:52,226
and just click on the project tab

93
00:02:52,226 --> 00:02:53,730
there, to the left,

94
00:02:53,730 --> 00:02:55,351
and that gives us, in this case,

95
00:02:55,351 --> 00:02:56,977
the designer and the blue print

96
00:02:56,977 --> 00:02:58,532
showing on screen at once.

97
00:02:58,532 --> 00:02:59,645
And, again, we can come up here

98
00:02:59,645 --> 00:03:01,678
if we wanted to and toggle to have

99
00:03:01,678 --> 00:03:03,583
either one of them or both of them.

100
00:03:03,583 --> 00:03:05,756
I'm gonna leave both of them on.

101
00:03:05,756 --> 00:03:07,495
So make sure now that you've got

102
00:03:07,495 --> 00:03:09,075
your screen set up like mine,

103
00:03:09,075 --> 00:03:11,352
with both the designer and the blue print showing.

104
00:03:11,352 --> 00:03:13,243
We're gonna talk about what they are.

105
00:03:13,243 --> 00:03:14,728
So firstly, the designer,

106
00:03:14,728 --> 00:03:16,444
that looks like a real phone.

107
00:03:16,444 --> 00:03:17,566
It gives you a preview

108
00:03:17,566 --> 00:03:19,216
of what your design's gonna look like

109
00:03:19,216 --> 00:03:20,295
when you run the app.

110
00:03:20,295 --> 00:03:22,081
So that's this one obviously on the left side.

111
00:03:22,081 --> 00:03:24,069
Now, the one on the right hand side,

112
00:03:24,069 --> 00:03:25,277
well, that's the blue print.

113
00:03:25,277 --> 00:03:27,989
So, think of that as sort of schematic diagram.

114
00:03:27,989 --> 00:03:29,747
So, it shows the relative position

115
00:03:29,747 --> 00:03:31,143
of things in the layout,

116
00:03:31,143 --> 00:03:32,655
but doesn't attempt to show

117
00:03:32,655 --> 00:03:33,836
exactly what they look like.

118
00:03:33,836 --> 00:03:36,327
Everything's represented in the blue print

119
00:03:36,327 --> 00:03:37,924
by an outline.

120
00:03:37,924 --> 00:03:39,546
Now, there's an important side effect

121
00:03:39,546 --> 00:03:41,069
as a result of this.

122
00:03:41,069 --> 00:03:42,760
The computer's got much less work to do

123
00:03:42,760 --> 00:03:44,740
when it renders the blue print,

124
00:03:44,740 --> 00:03:46,951
compared to rendering the designer.

125
00:03:46,951 --> 00:03:48,762
So that means that you'll find things

126
00:03:48,762 --> 00:03:50,822
work smoother if you use the blue print

127
00:03:50,822 --> 00:03:52,531
to layout your design,

128
00:03:52,531 --> 00:03:54,294
especially on a slow computer,

129
00:03:54,294 --> 00:03:56,157
or one without much memory.

130
00:03:56,157 --> 00:03:57,846
Now, in this version of Android Studio,

131
00:03:57,846 --> 00:04:00,662
the blue print also shows the constraints all the time,

132
00:04:00,662 --> 00:04:02,019
and that's these little zipper things

133
00:04:02,019 --> 00:04:05,371
that you can see here to the right-hand side.

134
00:04:05,371 --> 00:04:06,978
Where as in the designer, 

135
00:04:06,978 --> 00:04:08,193
they only appear when you move the mouse

136
00:04:08,193 --> 00:04:09,886
into the design.

137
00:04:09,886 --> 00:04:12,307
And you can see now that I'm in the designer,

138
00:04:12,307 --> 00:04:13,302
it's now showing them.

139
00:04:13,302 --> 00:04:14,794
As soon as I move away they disappear.

140
00:04:14,794 --> 00:04:16,877
Now, for that reason, if you have a problem

141
00:04:16,877 --> 00:04:18,141
and want to provide a screen shot

142
00:04:18,141 --> 00:04:19,884
when you post a question in the Q & A section

143
00:04:19,884 --> 00:04:21,185
of this course, you'll make our job easier

144
00:04:21,185 --> 00:04:25,928
if you include the blue print in the screen shot.

145
00:04:25,928 --> 00:04:27,707
Now, personally I normally work

146
00:04:27,707 --> 00:04:29,182
with just the blue print

147
00:04:29,182 --> 00:04:30,392
and toggle the designer on

148
00:04:30,392 --> 00:04:32,371
when I want to check what it looks like.

149
00:04:32,371 --> 00:04:33,697
So consequently, for this video,

150
00:04:33,697 --> 00:04:35,184
I'm actually gonna leave them both showing

151
00:04:35,184 --> 00:04:36,861
in this video and future videos

152
00:04:36,861 --> 00:04:39,086
in this section of the course.

153
00:04:39,086 --> 00:04:41,279
Okay, so the other button that I want to mention for now

154
00:04:41,279 --> 00:04:42,861
is the auto connect button,

155
00:04:42,861 --> 00:04:44,026
and that's the button in the tool bar

156
00:04:44,026 --> 00:04:46,771
that looks a lot like a magnet.

157
00:04:46,771 --> 00:04:47,850
You can see this one over here,

158
00:04:47,850 --> 00:04:49,489
and I'm just gonna hover my tool bar, my mouse

159
00:04:49,489 --> 00:04:52,134
over the tool bar, to see the tool bar tip.

160
00:04:52,134 --> 00:04:53,263
You can see that if I hover over it,

161
00:04:53,263 --> 00:04:55,713
it says Turn On Autoconnect.

162
00:04:55,713 --> 00:04:57,497
Now, this can be a nice feature,

163
00:04:57,497 --> 00:05:00,142
but it can sometimes be annoying.

164
00:05:00,142 --> 00:05:02,547
At the moment, you can see that it was turned off

165
00:05:02,547 --> 00:05:04,329
because I've got the option now

166
00:05:04,329 --> 00:05:06,176
to hover over to turn on autoconnect,

167
00:05:06,176 --> 00:05:08,148
and you can see that when I clicked it

168
00:05:08,148 --> 00:05:10,539
the slash that was through the magnet

169
00:05:10,539 --> 00:05:11,447
has now disappeared,

170
00:05:11,447 --> 00:05:13,129
and that's telling me that that's now on.

171
00:05:13,129 --> 00:05:15,109
If I hover my mouse over there again,

172
00:05:15,109 --> 00:05:16,927
to toggle, I can turn off autoconnect.

173
00:05:16,927 --> 00:05:18,360
There's a little slash that appears

174
00:05:18,360 --> 00:05:20,680
through the picture of a magnet now.

175
00:05:20,680 --> 00:05:22,305
But, I'm actually gonna leave it on

176
00:05:22,305 --> 00:05:24,474
for the moment though, by clicking on it again,

177
00:05:24,474 --> 00:05:27,040
and we'll see what it does in a minute.

178
00:05:27,040 --> 00:05:28,543
But let's start out by getting rid of

179
00:05:28,543 --> 00:05:30,465
the Hello World textview widgit.

180
00:05:30,465 --> 00:05:31,807
So, I'm gonna select it by clicking on

181
00:05:31,807 --> 00:05:34,428
either of the images. So either of the images

182
00:05:34,428 --> 00:05:35,521
in the designer

183
00:05:35,521 --> 00:05:37,484
or the blue print, or alternatively,

184
00:05:37,484 --> 00:05:39,837
I could also do that in the component tree.

185
00:05:39,837 --> 00:05:42,514
Now, my component tree is not showing at the moment,

186
00:05:42,514 --> 00:05:43,896
so I can come down here and click

187
00:05:43,896 --> 00:05:45,470
on this little option here,

188
00:05:45,470 --> 00:05:47,291
and that will show the component tree,

189
00:05:47,291 --> 00:05:50,828
which is a list of views that are in our design.

190
00:05:50,828 --> 00:05:52,027
So to delete the Hello World,

191
00:05:52,027 --> 00:05:55,239
I can click either of these, or I could also click over there,

192
00:05:55,239 --> 00:05:57,127
but noting that that's now highlighted

193
00:05:57,127 --> 00:05:58,419
in the component tree

194
00:05:58,419 --> 00:05:59,990
When I've clicked that,

195
00:05:59,990 --> 00:06:01,256
and incidentally clicking on a space

196
00:06:01,256 --> 00:06:03,757
outside the images deselects it.

197
00:06:03,757 --> 00:06:05,380
So, if you ever want to deselect something

198
00:06:05,380 --> 00:06:07,590
just do that, and you can see that

199
00:06:07,590 --> 00:06:09,366
no matter which way I click

200
00:06:09,366 --> 00:06:10,913
I can get it selected and it updates

201
00:06:10,913 --> 00:06:13,132
either the component tree

202
00:06:13,132 --> 00:06:15,086
or the designer and/or blue print,

203
00:06:15,086 --> 00:06:17,084
depending what you've got on the screen.

204
00:06:17,084 --> 00:06:19,140
So, making sure that you've selected

205
00:06:19,140 --> 00:06:20,549
the textview widget,

206
00:06:20,549 --> 00:06:22,485
I just want to talk about,

207
00:06:22,485 --> 00:06:24,809
briefly, about this blueprint

208
00:06:24,809 --> 00:06:26,672
and how, if you look really carefully,

209
00:06:26,672 --> 00:06:29,281
it almost appears that the blue print

210
00:06:29,281 --> 00:06:31,847
looks like a pair of of punk rock denim jeans,

211
00:06:31,847 --> 00:06:34,551
and the zippers also appear

212
00:06:34,551 --> 00:06:36,001
when I move my mouse over the design.

213
00:06:36,001 --> 00:06:38,321
We talked about that before.

214
00:06:38,321 --> 00:06:39,978
But, what we're gonna do now is delete this,

215
00:06:39,978 --> 00:06:41,586
and to do this I'm just gonna press the del key

216
00:06:41,586 --> 00:06:43,113
on my keyboard,

217
00:06:43,113 --> 00:06:44,760
and you can see that's now removed it

218
00:06:44,760 --> 00:06:46,104
from the designer, the blue print,

219
00:06:46,104 --> 00:06:48,815
and also from the component tree.

220
00:06:48,815 --> 00:06:50,557
Alright, so we're gonna add an image view.

221
00:06:50,557 --> 00:06:51,467
So, what we need to do is

222
00:06:51,467 --> 00:06:53,361
use your operating systems file manager

223
00:06:53,361 --> 00:06:54,479
to find the jpeg files

224
00:06:54,479 --> 00:06:56,343
that we talked about previously,

225
00:06:56,343 --> 00:06:59,819
that you hopefully have downloaded by now.

226
00:06:59,819 --> 00:07:01,363
I've actually downloaded both of them

227
00:07:01,363 --> 00:07:02,835
to my desktop.

228
00:07:02,835 --> 00:07:05,677
So, I'm just gonna open up finder on my Mac,

229
00:07:05,677 --> 00:07:07,503
go to my desktop, and I've actually created

230
00:07:07,503 --> 00:07:10,521
a sub folder called images.

231
00:07:10,521 --> 00:07:12,452
And if I just bring this over into the window now,

232
00:07:12,452 --> 00:07:13,727
you can see that I've got my two images

233
00:07:13,727 --> 00:07:17,477
showing there, ball_100x100 and ball_640x480.

234
00:07:19,387 --> 00:07:20,807
So, what I'm gonna do now is

235
00:07:20,807 --> 00:07:22,889
select both of those files,

236
00:07:22,889 --> 00:07:24,985
I'm gonna right click those, and select copy,

237
00:07:24,985 --> 00:07:26,612
and obviously, if you're on a Windows

238
00:07:26,612 --> 00:07:28,506
or Linux machine, you'll do whatever is similar.

239
00:07:28,506 --> 00:07:31,257
It would probably be control C

240
00:07:31,257 --> 00:07:33,144
on Windows or Linux.

241
00:07:33,144 --> 00:07:34,572
We want to copy those and we want to paste them

242
00:07:34,572 --> 00:07:37,572
directly into our project.

243
00:07:37,572 --> 00:07:38,856
And to do that we're gonna go back

244
00:07:38,856 --> 00:07:40,311
into Android Studio now.

245
00:07:40,311 --> 00:07:41,925
In my case, because I've closed the project pane,

246
00:07:41,925 --> 00:07:43,897
I'm gonna open that,

247
00:07:43,897 --> 00:07:46,235
and I'm gonna make sure that I'm in the res folder

248
00:07:46,235 --> 00:07:47,607
and then down when here we want expand

249
00:07:47,607 --> 00:07:48,440
the drawable folder,

250
00:07:48,440 --> 00:07:49,394
because that's actually where we want

251
00:07:49,394 --> 00:07:50,575
to paste them. So I'm going to

252
00:07:50,575 --> 00:07:53,206
right click on this drawable folder

253
00:07:53,206 --> 00:07:54,623
and choose paste.

254
00:07:56,526 --> 00:07:58,260
And it's asking whether I'm sure that I want

255
00:07:58,260 --> 00:08:00,295
to copy those files into the folder

256
00:08:00,295 --> 00:08:01,484
that it's gonna be going into.

257
00:08:01,484 --> 00:08:04,109
You can see there at the end, res drawable.

258
00:08:04,109 --> 00:08:05,144
I want to click on OK

259
00:08:05,144 --> 00:08:06,358
because I want to do that.

260
00:08:06,358 --> 00:08:07,812
And noting now that the two files have now

261
00:08:07,812 --> 00:08:10,730
have appeared in the drawable folder.

262
00:08:10,730 --> 00:08:11,944
And, obviously you can confirm there

263
00:08:11,944 --> 00:08:13,261
that both of those files haven't got

264
00:08:13,261 --> 00:08:15,074
any capital letters in the file names.

265
00:08:15,074 --> 00:08:17,704
And I knew that, but if you happen to be using

266
00:08:17,704 --> 00:08:19,652
your own images, again, just a reminder

267
00:08:19,652 --> 00:08:20,754
not to use capital letters,

268
00:08:20,754 --> 00:08:22,983
if your using your own images.

269
00:08:22,983 --> 00:08:24,427
Alright, and I've got the drawable folder

270
00:08:24,427 --> 00:08:26,315
expanded, and we can see that those two files

271
00:08:26,315 --> 00:08:28,507
are now showing there.

272
00:08:28,507 --> 00:08:30,606
So, what I'm gonna do is make some more space

273
00:08:30,606 --> 00:08:32,186
by shrinking the project pane,

274
00:08:32,186 --> 00:08:33,794
so let's go ahead and to that again,

275
00:08:33,794 --> 00:08:35,222
clicking on project to close it down,

276
00:08:35,222 --> 00:08:37,049
leaving just our constraint layout to the left,

277
00:08:37,049 --> 00:08:40,633
and also our designer and blueprint views.

278
00:08:42,183 --> 00:08:43,264
Now, the ImageView widget is

279
00:08:43,264 --> 00:08:46,296
in the images section in the widget palette

280
00:08:46,296 --> 00:08:47,706
Now the palette's not open for me at the moment,

281
00:08:47,706 --> 00:08:49,544
so I'm gonna click on this option here,

282
00:08:49,544 --> 00:08:50,691
the little tab, and you can see

283
00:08:50,691 --> 00:08:53,379
that that brings the palette open.

284
00:08:53,379 --> 00:08:57,250
And that will also toggle, so you can click on it again

285
00:08:57,250 --> 00:08:59,723
to actually hide it if you want to do that.

286
00:08:59,723 --> 00:09:01,261
And to hide it again, incidentally,

287
00:09:01,261 --> 00:09:02,901
if you want to close it once you've opened it,

288
00:09:02,901 --> 00:09:04,023
you can just click on that little button there,

289
00:09:04,023 --> 00:09:05,408
and that closes it down.

290
00:09:05,408 --> 00:09:06,402
But I'm gonna leave it open,

291
00:09:06,402 --> 00:09:08,169
because what we want to do is get access

292
00:09:08,169 --> 00:09:09,803
to the ImageView widget.

293
00:09:09,803 --> 00:09:12,550
As I mentioned it's in the images section

294
00:09:12,550 --> 00:09:14,683
over here to the left, and click on images and you can see

295
00:09:14,683 --> 00:09:17,560
there's our ImageView widget.

296
00:09:17,560 --> 00:09:19,757
So, once I've done that, I'm gonna hold down my left mouse.

297
00:09:19,757 --> 00:09:21,244
I'm gonna drag it as I would normally drag

298
00:09:21,244 --> 00:09:22,756
an item on a computer.

299
00:09:22,756 --> 00:09:24,874
You can drag it and drop it either

300
00:09:24,874 --> 00:09:26,531
on the designer or the blueprint.

301
00:09:26,531 --> 00:09:29,167
Note that Android Studio cleverly shows

302
00:09:29,167 --> 00:09:30,688
its position on both

303
00:09:30,688 --> 00:09:32,440
the designer and the blueprint.

304
00:09:32,440 --> 00:09:33,630
So, I'm gonna start by dropping it

305
00:09:33,630 --> 00:09:36,059
in the top left hand corner.

306
00:09:36,059 --> 00:09:38,139
Now, notice that line, or notice the lines

307
00:09:38,139 --> 00:09:39,766
that'll appear once I get close

308
00:09:39,766 --> 00:09:42,325
to the top and left edges.

309
00:09:42,325 --> 00:09:43,991
And, you can see now that we've got a line,

310
00:09:43,991 --> 00:09:45,249
a horizontal and a vertical line,

311
00:09:45,249 --> 00:09:48,824
in the top left hand corner of the image,

312
00:09:48,824 --> 00:09:50,170
and I'm still holding down my mouse button

313
00:09:50,170 --> 00:09:51,739
at this point, and I'm gonna release

314
00:09:51,739 --> 00:09:53,489
the mouse button now.

315
00:09:55,268 --> 00:09:57,115
Once I do that you'll get this pop-up,

316
00:09:57,115 --> 00:09:59,452
this resources dialogue.

317
00:09:59,452 --> 00:10:00,327
Now what I can do,

318
00:10:00,327 --> 00:10:02,589
I can either start typing the name of the image,

319
00:10:02,589 --> 00:10:04,502
in this case, ball, in the box at the top,

320
00:10:04,502 --> 00:10:05,852
or I can scroll down

321
00:10:05,852 --> 00:10:07,537
and find the image that I'm looking for.

322
00:10:07,537 --> 00:10:08,550
And, obviously, in this case,

323
00:10:08,550 --> 00:10:10,084
we've only got a few images,

324
00:10:10,084 --> 00:10:11,446
and they're appearing right at the top here,

325
00:10:11,446 --> 00:10:12,850
but in a complex project,

326
00:10:12,850 --> 00:10:15,310
you might have to do some scrolling to find it.

327
00:10:15,310 --> 00:10:16,143
And by the way, when I click it

328
00:10:16,143 --> 00:10:17,690
there's a neat preview that will show up

329
00:10:17,690 --> 00:10:19,508
to the right hand side that actually shows you

330
00:10:19,508 --> 00:10:20,902
what the image is going to look like

331
00:10:20,902 --> 00:10:23,844
and confirms the picture itself.

332
00:10:23,844 --> 00:10:27,175
So, what I'm gonna do first is click on the ball 640x480,

333
00:10:27,175 --> 00:10:29,411
that's the one that we're gonna be using at this point.

334
00:10:29,411 --> 00:10:31,680
I'm gonna click on OK,

335
00:10:31,680 --> 00:10:33,704
and we should find the image now appears,

336
00:10:33,704 --> 00:10:37,231
which it has, in the designer and the blueprint.

337
00:10:37,231 --> 00:10:39,277
Now it's top left corner will be roughly

338
00:10:39,277 --> 00:10:40,792
where we dropped the ImageView

339
00:10:40,792 --> 00:10:43,230
when you first dragged in onto the layout.

340
00:10:43,230 --> 00:10:44,903
Now, one of the things that has changed

341
00:10:44,903 --> 00:10:47,355
a few times is the exact behaviour

342
00:10:47,355 --> 00:10:50,124
when you drop an image onto the layout.

343
00:10:50,124 --> 00:10:51,445
The point here is that you're learning

344
00:10:51,445 --> 00:10:53,324
how this layout designer works,

345
00:10:53,324 --> 00:10:55,899
and how to create layouts that look like

346
00:10:55,899 --> 00:10:56,835
what you want.

347
00:10:56,835 --> 00:10:59,215
So, you might get slightly different behaviour

348
00:10:59,215 --> 00:11:01,219
on your screen at first, but that's fine.

349
00:11:01,219 --> 00:11:02,610
We're gonna be looking at how you can position

350
00:11:02,610 --> 00:11:04,135
things exactly where you want them,

351
00:11:04,135 --> 00:11:06,129
so don't worry if things do look a little different

352
00:11:06,129 --> 00:11:07,438
at the moment.

353
00:11:07,438 --> 00:11:08,795
So over in the top right, here,

354
00:11:08,795 --> 00:11:11,219
is what used to be called the inspector,

355
00:11:11,219 --> 00:11:12,833
so I'll continue calling it that.

356
00:11:12,833 --> 00:11:14,289
You can see that there's constraints set

357
00:11:14,289 --> 00:11:16,217
to the left and to the top here.

358
00:11:16,217 --> 00:11:17,414
We've got these little lines that hover

359
00:11:17,414 --> 00:11:19,287
to the top and then to the left.

360
00:11:19,287 --> 00:11:21,327
Now, they were set automatically,

361
00:11:21,327 --> 00:11:23,085
and they reflect the lines that appeared

362
00:11:23,085 --> 00:11:26,059
when I dropped the image. Alright, so what I'm gonna do is

363
00:11:26,059 --> 00:11:27,242
delete that ImageView,

364
00:11:27,242 --> 00:11:28,661
and then we're gonna go through it again

365
00:11:28,661 --> 00:11:30,193
to show how the behaviour changes,

366
00:11:30,193 --> 00:11:31,736
depending on where you initially

367
00:11:31,736 --> 00:11:32,829
dropped the widget.

368
00:11:32,829 --> 00:11:35,362
So, I'm gonna select the ImageView,

369
00:11:35,362 --> 00:11:37,606
and I can select it, either with the,

370
00:11:37,606 --> 00:11:39,833
either by clicking on the ImageView

371
00:11:39,833 --> 00:11:41,415
in the component tree, or by selecting the image

372
00:11:41,415 --> 00:11:44,398
anywhere from the designer or the blueprint,

373
00:11:44,398 --> 00:11:45,910
and then I'm gonna press delete

374
00:11:45,910 --> 00:11:46,938
or the del button,

375
00:11:46,938 --> 00:11:48,511
and that removes it from our screen,

376
00:11:48,511 --> 00:11:49,990
as you can see.

377
00:11:49,990 --> 00:11:51,180
Now, this time what I'm gonna do

378
00:11:51,180 --> 00:11:52,737
is drop the ImageView widget

379
00:11:52,737 --> 00:11:53,908
at the centre of the screen.

380
00:11:53,908 --> 00:11:56,956
So I'm gonna grab it again and go right down

381
00:11:56,956 --> 00:11:59,886
to the centre of the screen,

382
00:11:59,886 --> 00:12:01,271
noting that I've moved it around a little bit

383
00:12:01,271 --> 00:12:02,704
until I have the lines on the top,

384
00:12:02,704 --> 00:12:04,773
left, right, and below now.

385
00:12:04,773 --> 00:12:06,924
We've got four lines showing on the screen there.

386
00:12:06,924 --> 00:12:08,107
So basically, what that means is, with

387
00:12:08,107 --> 00:12:09,329
those lines showing,

388
00:12:09,329 --> 00:12:10,867
both the vertical and horizontal lines,

389
00:12:10,867 --> 00:12:12,778
sort of going through the image,

390
00:12:12,778 --> 00:12:13,978
that should mean that the image

391
00:12:13,978 --> 00:12:15,211
is now centred vertically,

392
00:12:15,211 --> 00:12:16,621
as well as horizontally.

393
00:12:16,621 --> 00:12:18,058
So, I'm gonna release the mouse.

394
00:12:18,058 --> 00:12:20,703
It's going to ask us for the name again.

395
00:12:20,703 --> 00:12:23,703
I'm gonna choose ball_640x480,

396
00:12:23,703 --> 00:12:26,036
and I'm gonna click on OK.

397
00:12:27,017 --> 00:12:29,193
Now, the difference is quite subtle.

398
00:12:29,193 --> 00:12:30,938
But this time there's constraints

399
00:12:30,938 --> 00:12:32,185
in all four edges.

400
00:12:32,185 --> 00:12:34,143
You can see over here in the inspector,

401
00:12:34,143 --> 00:12:35,961
top, left, bottom, and right

402
00:12:35,961 --> 00:12:37,592
have all got lines there.

403
00:12:37,592 --> 00:12:39,005
Now, as I said, don't worry too much

404
00:12:39,005 --> 00:12:41,776
if your screen doesn't match mine exactly.

405
00:12:41,776 --> 00:12:43,770
We're gonna see how to create these constraints

406
00:12:43,770 --> 00:12:45,344
rather than relying on them

407
00:12:45,344 --> 00:12:46,970
being created automatically.

408
00:12:46,970 --> 00:12:48,763
In fact, I'm also gonna explain

409
00:12:48,763 --> 00:12:50,173
what constraints are,

410
00:12:50,173 --> 00:12:51,593
because I've used that word a few times now,

411
00:12:51,593 --> 00:12:54,092
and really haven't explained what it means.

412
00:12:54,092 --> 00:12:55,792
In fact, it may not even be apparent to you

413
00:12:55,792 --> 00:12:57,245
what I'm referring to.

414
00:12:57,245 --> 00:12:58,646
So, let's delete them.

415
00:12:58,646 --> 00:13:01,080
Now, there's a couple of ways to delete constraints.

416
00:13:01,080 --> 00:13:04,725
We can either do it in the layout or in the inspector.

417
00:13:04,725 --> 00:13:07,258
So, what I'm gonna do is delete the top constraint

418
00:13:07,258 --> 00:13:09,888
by clicking on this circular constraint handle,

419
00:13:09,888 --> 00:13:11,251
as you can see this up here,

420
00:13:11,251 --> 00:13:14,100
in the middle of the ImageView's top edge.

421
00:13:14,100 --> 00:13:15,521
Notice that when I hovered over it

422
00:13:15,521 --> 00:13:17,101
with the mouse, it turned to red,

423
00:13:17,101 --> 00:13:19,199
and after a few seconds the tool-tip appears

424
00:13:19,199 --> 00:13:21,722
saying delete connection. Now that only happens

425
00:13:21,722 --> 00:13:23,561
if you selected the widget.

426
00:13:23,561 --> 00:13:24,784
So, if you don't see those circles,

427
00:13:24,784 --> 00:13:26,401
click on the ImageView first

428
00:13:26,401 --> 00:13:27,606
to select the ImageView,

429
00:13:27,606 --> 00:13:30,788
and then hover your mouse over to the constraint.

430
00:13:30,788 --> 00:13:31,979
And I can press the del button

431
00:13:31,979 --> 00:13:33,692
to actually delete that constraint,

432
00:13:33,692 --> 00:13:34,951
or I can just click on it again,

433
00:13:34,951 --> 00:13:36,125
and by clicking on it

434
00:13:36,125 --> 00:13:38,448
that actually deletes the constraint.

435
00:13:38,448 --> 00:13:39,821
So, you can see that the image

436
00:13:39,821 --> 00:13:41,087
moved down a little bit,

437
00:13:41,087 --> 00:13:42,696
and the line that was appearing here

438
00:13:42,696 --> 00:13:45,534
in the inspector has now disappeared.

439
00:13:45,534 --> 00:13:47,370
Okay, so we've deleted the connection,

440
00:13:47,370 --> 00:13:50,083
and we can there's no longer a constraint

441
00:13:50,083 --> 00:13:52,540
set in the inspector. So, in fact, we've now only got

442
00:13:52,540 --> 00:13:54,224
three constraints at the left, right,

443
00:13:54,224 --> 00:13:56,088
and bottom of the widget.

444
00:13:56,088 --> 00:13:59,723
So, you can see them here, these lines here,

445
00:13:59,723 --> 00:14:02,651
left over here, right, and then bottom,

446
00:14:02,651 --> 00:14:04,154
and obviously in the inspector

447
00:14:04,154 --> 00:14:08,128
we can see the equivalent view of what's left.

448
00:14:08,128 --> 00:14:09,935
But there is another way to delete them,

449
00:14:09,935 --> 00:14:11,797
and that's to use the circles in the inspector.

450
00:14:11,797 --> 00:14:13,592
So, I'm gonna come over here.

451
00:14:13,592 --> 00:14:14,492
Let's go ahead and do that,

452
00:14:14,492 --> 00:14:15,963
Let's delete the right and the bottom ones.

453
00:14:15,963 --> 00:14:17,007
So, I'm gonna come over here,

454
00:14:17,007 --> 00:14:18,793
and just click on that,

455
00:14:18,793 --> 00:14:20,109
noticing how it turned into an x there.

456
00:14:20,109 --> 00:14:22,346
So click on delete and do the right one

457
00:14:22,346 --> 00:14:25,013
and then click on the x now, as well,

458
00:14:26,212 --> 00:14:28,208
and that's left only the left constraint.

459
00:14:28,208 --> 00:14:30,318
That's the only one that's there now.

460
00:14:30,318 --> 00:14:31,465
Then I can go ahead if I want to

461
00:14:31,465 --> 00:14:32,533
and I can just hover over

462
00:14:32,533 --> 00:14:33,999
the left hand constraint,

463
00:14:33,999 --> 00:14:37,362
click on the button to delete it.

464
00:14:37,362 --> 00:14:39,198
And you can see, we've now got no constraints left

465
00:14:39,198 --> 00:14:40,121
for our images,

466
00:14:40,121 --> 00:14:41,579
and we can also see there's no lines

467
00:14:41,579 --> 00:14:43,724
in the inspector, showing that there

468
00:14:43,724 --> 00:14:44,745
aren't any constraints.

469
00:14:44,745 --> 00:14:45,901
So, basically, what this means is that

470
00:14:45,901 --> 00:14:48,019
our image is now unconstrained,

471
00:14:48,019 --> 00:14:49,546
and that means there is nothing to keep

472
00:14:49,546 --> 00:14:51,567
it in place on the screen.

473
00:14:51,567 --> 00:14:53,310
Now it is sort of appearing in the centre,

474
00:14:53,310 --> 00:14:55,273
but, and this is important,

475
00:14:55,273 --> 00:14:58,104
that's only because it has to appear somewhere.

476
00:14:58,104 --> 00:15:00,813
So, imagine that you're creating a collage,

477
00:15:00,813 --> 00:15:02,243
by placing a load of photographs,

478
00:15:02,243 --> 00:15:04,476
maybe some magazine articles, things like that,

479
00:15:04,476 --> 00:15:06,943
onto a large piece of card.

480
00:15:06,943 --> 00:15:08,270
You get everything nicely positioned,

481
00:15:08,270 --> 00:15:09,807
but you haven't used any glue.

482
00:15:09,807 --> 00:15:11,364
So, as soon as you pick the card up,

483
00:15:11,364 --> 00:15:13,368
everything's going to fall off,

484
00:15:13,368 --> 00:15:14,950
and that's because there's nothing holding

485
00:15:14,950 --> 00:15:17,586
all the photos and articles in place.

486
00:15:17,586 --> 00:15:20,474
So, thinking about layout without constraints,

487
00:15:20,474 --> 00:15:21,768
as being just like that.

488
00:15:21,768 --> 00:15:23,255
So, we've got an image on the screen,

489
00:15:23,255 --> 00:15:26,807
but there's no glue to fix that image in place.

490
00:15:26,807 --> 00:15:28,464
So, what constraints are, well, they're like glue,

491
00:15:28,464 --> 00:15:31,549
because they fix the widget in place.

492
00:15:31,549 --> 00:15:33,929
Without constraints, the widget will, effectively,

493
00:15:33,929 --> 00:15:36,105
fall off the screen when you run the app.

494
00:15:36,105 --> 00:15:38,189
Now, of course it won't really fall off the screen.

495
00:15:38,189 --> 00:15:40,414
It will actually be positioned on the screen,

496
00:15:40,414 --> 00:15:41,637
in fact, in the top left-hand corner

497
00:15:41,637 --> 00:15:42,794
of the screen.

498
00:15:42,794 --> 00:15:44,997
But, if you've got several unconstrained widgets,

499
00:15:44,997 --> 00:15:46,518
they'll all appear at the top left.

500
00:15:46,518 --> 00:15:49,263
So, what you'll do is get one on top of the other.

501
00:15:49,263 --> 00:15:51,711
Alright, so we're gonna finish the video

502
00:15:51,711 --> 00:15:53,370
in a moment, but firstly,

503
00:15:53,370 --> 00:15:55,696
notice on either the designer or the blueprint

504
00:15:55,696 --> 00:15:57,127
there's these little handles in each

505
00:15:57,127 --> 00:15:58,766
of the four corners of the image view,

506
00:15:58,766 --> 00:15:59,743
these one's here.

507
00:15:59,743 --> 00:16:00,992
And, notice when I move my mouse there

508
00:16:00,992 --> 00:16:04,043
they actually change, and you can see if I hover over there

509
00:16:04,043 --> 00:16:06,058
it says resize view.

510
00:16:06,058 --> 00:16:08,073
And when I actually click on into there,

511
00:16:08,073 --> 00:16:09,993
the mouse pointer changes to the normal

512
00:16:09,993 --> 00:16:11,799
resize pointer for whatever operating system

513
00:16:11,799 --> 00:16:13,243
you're running on.

514
00:16:13,243 --> 00:16:15,580
So, let's actually just go down here to the bottom,

515
00:16:15,580 --> 00:16:16,675
and depending on what you can see

516
00:16:16,675 --> 00:16:17,679
on the screen there, you might find

517
00:16:17,679 --> 00:16:19,309
that the entire image no longer fits the designer,

518
00:16:19,309 --> 00:16:21,989
because we've removed all the constraints,

519
00:16:21,989 --> 00:16:25,049
but just select one that you can.

520
00:16:25,049 --> 00:16:27,089
What I'm gonna do is select the bottom right one

521
00:16:27,089 --> 00:16:28,124
so it might take a little bit

522
00:16:28,124 --> 00:16:30,608
of fine tuning to get to exactly where you want.

523
00:16:30,608 --> 00:16:32,275
I'm gonna move this,

524
00:16:33,454 --> 00:16:35,351
and I'm just gonna drag so it occupies

525
00:16:35,351 --> 00:16:36,683
you know, around about a quarter of the screen,

526
00:16:36,683 --> 00:16:40,213
like so, then release the mouse button.

527
00:16:40,213 --> 00:16:41,335
So, I suggest what you do now,

528
00:16:41,335 --> 00:16:42,659
before you start the next video,

529
00:16:42,659 --> 00:16:44,473
is just practise resizing the image

530
00:16:44,473 --> 00:16:46,064
using the four handles.

531
00:16:46,064 --> 00:16:47,680
You can see now, it's a little bit easier to get access

532
00:16:47,680 --> 00:16:49,054
to all four now,

533
00:16:49,054 --> 00:16:50,246
just so you're familiar with the concept

534
00:16:50,246 --> 00:16:51,946
of resizing images,

535
00:16:51,946 --> 00:16:54,903
and you'll be ready to go for the next video.

536
00:16:54,903 --> 00:16:56,842
Alright, so this video has become

537
00:16:56,842 --> 00:16:58,230
quite a long one.

538
00:16:58,230 --> 00:17:00,323
I'm gonna finish the video here now.

539
00:17:00,323 --> 00:17:01,256
In the next video we're gonna talk

540
00:17:01,256 --> 00:17:04,009
more about constraints and resizing widgets.

541
00:17:04,009 --> 00:17:06,180
So see you in the next video.