1
00:00:04,720 --> 00:00:06,550
So I mentioned towards the end of the

2
00:00:06,550 --> 00:00:08,200
last video that the Android Studio

3
00:00:08,200 --> 00:00:11,080
layout designer, makes it easier to see

4
00:00:11,080 --> 00:00:13,570
how things look on different devices. So

5
00:00:13,570 --> 00:00:14,680
we're going to add a button to our

6
00:00:14,680 --> 00:00:17,470
layout to demonstrate this. So we're going

7
00:00:17,470 --> 00:00:19,060
to start off with an imageView set to

8
00:00:19,060 --> 00:00:20,650
wrap_content, both vertically and

9
00:00:20,650 --> 00:00:23,260
horizontally, and we did that in the last

10
00:00:23,260 --> 00:00:24,820
video. You can see layout_width and

11
00:00:24,820 --> 00:00:26,920
height is wrap_content, and you can see

12
00:00:26,920 --> 00:00:29,230
the chevrons which indicate that. We

13
00:00:29,230 --> 00:00:30,789
also want to make sure that our

14
00:00:30,789 --> 00:00:32,950
constraints are at the top, left, right

15
00:00:32,950 --> 00:00:34,840
and bottom of the imageView to the

16
00:00:34,840 --> 00:00:36,250
screen, and that's obviously set as

17
00:00:36,250 --> 00:00:39,519
well, as you can see here. Next we want to

18
00:00:39,519 --> 00:00:41,320
make sure that autoconnect is off, and

19
00:00:41,320 --> 00:00:43,030
there's this little button over here,

20
00:00:43,030 --> 00:00:44,739
autoconnect, which are I talked about

21
00:00:44,739 --> 00:00:46,960
briefly before. We want to make sure that

22
00:00:46,960 --> 00:00:48,850
that's actually off. We can tell when

23
00:00:48,850 --> 00:00:50,800
it's actually off, because there's a

24
00:00:50,800 --> 00:00:52,479
slash that's appearing through the

25
00:00:52,479 --> 00:00:54,339
little magnet icon. So I'm going to do

26
00:00:54,339 --> 00:00:56,429
that to make sure that that's turned off.

27
00:00:56,429 --> 00:00:58,809
Next what we're going to do is drag a

28
00:00:58,809 --> 00:01:00,609
button to the top left of the screen,

29
00:01:00,609 --> 00:01:02,409
slightly in from both edges. I'm going to

30
00:01:02,409 --> 00:01:06,430
do that, just in slightly from both

31
00:01:06,430 --> 00:01:08,260
edges like so, and release the button,

32
00:01:08,260 --> 00:01:11,500
and once I've done that, you can see over

33
00:01:11,500 --> 00:01:13,210
here that we've got some warnings now.

34
00:01:13,210 --> 00:01:14,200
That's because there aren't any

35
00:01:14,200 --> 00:01:15,640
constraints there, so I can click on Show

36
00:01:15,640 --> 00:01:18,040
warnings, Missing Constraints in

37
00:01:18,040 --> 00:01:20,470
ConstraintLayout. So to fix that up I'm

38
00:01:20,470 --> 00:01:22,000
just going to add a constraint from the

39
00:01:22,000 --> 00:01:24,970
button to the top of the screen, and also

40
00:01:24,970 --> 00:01:26,950
add a constraint from the button to the

41
00:01:26,950 --> 00:01:29,260
left of the screen. That fixes up that

42
00:01:29,260 --> 00:01:30,430
error. You won't worry about these other

43
00:01:30,430 --> 00:01:31,900
errors for now, we'll talk about those

44
00:01:31,900 --> 00:01:37,000
later, and I'll close that down. And what

45
00:01:37,000 --> 00:01:38,680
we're going to do now is change the left

46
00:01:38,680 --> 00:01:41,380
constraint on the image, so that it's no

47
00:01:41,380 --> 00:01:42,790
longer constrained to the edge of the

48
00:01:42,790 --> 00:01:45,070
screen but to the right-hand edge of the

49
00:01:45,070 --> 00:01:46,870
button instead. So I click on the image

50
00:01:46,870 --> 00:01:48,970
View. You can see that clearly we've got

51
00:01:48,970 --> 00:01:50,410
a constraint to the left of the screen

52
00:01:50,410 --> 00:01:52,080
so we're going to remove that and

53
00:01:52,080 --> 00:01:53,890
constrain it to the right of the button.

54
00:01:53,890 --> 00:01:56,340
So when I click on the imageView's

55
00:01:56,340 --> 00:01:59,800
left button, left circle, it flashes red,

56
00:01:59,800 --> 00:02:02,500
and I click on delete connection and it

57
00:02:02,500 --> 00:02:04,750
removes the left constraint, and what I

58
00:02:04,750 --> 00:02:07,870
can do now, I'm gonna drag the circle to

59
00:02:07,870 --> 00:02:09,310
the right-hand edge of the button. So I'm

60
00:02:09,310 --> 00:02:10,750
gonna click on it and then drag it over,

61
00:02:10,750 --> 00:02:13,270
and in earlier versions of Android

62
00:02:13,270 --> 00:02:14,920
Studio, by the way, you could drag the

63
00:02:14,920 --> 00:02:17,230
constraint handle to anywhere along the

64
00:02:17,230 --> 00:02:18,319
edge of the button, or whatever

65
00:02:18,319 --> 00:02:20,989
widget you were constraining to. That's

66
00:02:20,989 --> 00:02:22,670
now changed and you have to drag to the

67
00:02:22,670 --> 00:02:25,310
constraint handle on the other widget. So

68
00:02:25,310 --> 00:02:27,260
that's the constraint handle on the

69
00:02:27,260 --> 00:02:29,599
button in this case. Now notice since I'm

70
00:02:29,599 --> 00:02:31,730
holding the mouse button down, that the

71
00:02:31,730 --> 00:02:34,010
constraint handle for the button is

72
00:02:34,010 --> 00:02:36,709
flashing green, and that's a visual

73
00:02:36,709 --> 00:02:38,090
indication that we should be aiming for

74
00:02:38,090 --> 00:02:40,099
that and not anywhere else on the buttons

75
00:02:40,099 --> 00:02:41,480
right edge. I'm just gonna move over here

76
00:02:41,480 --> 00:02:44,030
now and constrain it, release the mouse

77
00:02:44,030 --> 00:02:45,889
button, and we've now got a constraint

78
00:02:45,889 --> 00:02:47,810
from the left of the imageView to the

79
00:02:47,810 --> 00:02:50,719
right of the button. So basically, the

80
00:02:50,719 --> 00:02:52,010
left-hand edge of the imageView is now

81
00:02:52,010 --> 00:02:54,290
constrained by the right hand edge of the

82
00:02:54,290 --> 00:02:56,629
button, so that the imageView itself can

83
00:02:56,629 --> 00:02:58,549
occupy all the space from the right of

84
00:02:58,549 --> 00:03:01,239
the button up to the screen's right edge.

85
00:03:01,239 --> 00:03:03,739
Now we've now got the image centered, in

86
00:03:03,739 --> 00:03:05,840
the space between the button to the

87
00:03:05,840 --> 00:03:08,150
right-hand edge of the layout. Now

88
00:03:08,150 --> 00:03:09,949
depending on what version of Android

89
00:03:09,949 --> 00:03:12,169
Studio you're running, you may actually

90
00:03:12,169 --> 00:03:14,180
have to click on the imageView and make

91
00:03:14,180 --> 00:03:15,739
sure that your margins are set correctly.

92
00:03:15,739 --> 00:03:18,500
In my case, they're set correctly to 16 to the

93
00:03:18,500 --> 00:03:20,719
right and 16 to the left of the image

94
00:03:20,719 --> 00:03:22,669
View, to make sure that you truly are

95
00:03:22,669 --> 00:03:25,400
centered in the middle. And by the way,

96
00:03:25,400 --> 00:03:27,169
because we're using the wrap, we're using

97
00:03:27,169 --> 00:03:29,540
wrap_content, the imageView

98
00:03:29,540 --> 00:03:33,259
is 100 by 100, but we want to play with

99
00:03:33,259 --> 00:03:34,669
the units. So what I'm going to do is

100
00:03:34,669 --> 00:03:36,799
change it to fixed, by clicking on the

101
00:03:36,799 --> 00:03:38,299
inner lines again, because this is the

102
00:03:38,299 --> 00:03:39,560
imageView. So I'm going to click on the image

103
00:03:39,560 --> 00:03:45,709
View lines. So doing that changes the

104
00:03:45,709 --> 00:03:47,870
layout_width and layout_height to reflect

105
00:03:47,870 --> 00:03:50,389
the last sizes that we've specified. So

106
00:03:50,389 --> 00:03:52,189
if, by some reason, yours aren't set to

107
00:03:52,189 --> 00:03:55,250
100 dp x 100 dp, as mine are here, then

108
00:03:55,250 --> 00:03:57,769
just type them in manually. Now to see

109
00:03:57,769 --> 00:03:59,930
what's wrong with using pixel

110
00:03:59,930 --> 00:04:01,609
measurements, what I'm going to do now

111
00:04:01,609 --> 00:04:04,879
is change both the dp sizes to 200 px,

112
00:04:04,879 --> 00:04:08,000
px standing for pixels. So I'll go ahead

113
00:04:08,000 --> 00:04:12,139
and do that so I'm typing 200px. I'm

114
00:04:12,139 --> 00:04:14,329
just going to tab over, 200px again and

115
00:04:14,329 --> 00:04:16,370
press Enter. Now the image is still

116
00:04:16,370 --> 00:04:17,560
centered where it should be.

117
00:04:17,560 --> 00:04:20,418
Notice that it hasn't changed size, so on

118
00:04:20,418 --> 00:04:24,349
this device, the nexus 4, 200 px is equal

119
00:04:24,349 --> 00:04:27,770
to 100 dp. Now that's fine on this

120
00:04:27,770 --> 00:04:29,930
screen, so let's see how it looks on

121
00:04:29,930 --> 00:04:31,729
other devices. Now

122
00:04:31,729 --> 00:04:32,900
by the way, I can choose different

123
00:04:32,900 --> 00:04:35,169
devices using this drop-down over here,

124
00:04:35,169 --> 00:04:38,990
from the designers button bar. Now the

125
00:04:38,990 --> 00:04:41,180
Nexus One is quite old so let's choose

126
00:04:41,180 --> 00:04:44,719
that first and see what happens, and you

127
00:04:44,719 --> 00:04:45,800
can see that everything still looks

128
00:04:45,800 --> 00:04:47,839
pretty good but the image is bigger than

129
00:04:47,839 --> 00:04:49,699
it was, relative to the size of the

130
00:04:49,699 --> 00:04:52,430
screen. But even worse though, is something

131
00:04:52,430 --> 00:04:54,199
like one of the Android wear devices. So

132
00:04:54,199 --> 00:04:55,360
let's go ahead and click that again, and

133
00:04:55,360 --> 00:04:58,069
we'll come down here and choose this 320

134
00:04:58,069 --> 00:05:02,839
x 290 Round Chin. Now looking at the

135
00:05:02,839 --> 00:05:05,149
blueprint rather than the design, because

136
00:05:05,149 --> 00:05:06,860
the design now renders as a circle,

137
00:05:06,860 --> 00:05:08,960
that's because wear devices are like

138
00:05:08,960 --> 00:05:10,580
watches and this one has a circular

139
00:05:10,580 --> 00:05:12,620
screen. Now things, I think you would

140
00:05:12,620 --> 00:05:14,029
agree, are getting a little bit hideous

141
00:05:14,029 --> 00:05:16,159
now, with the image overlapping the

142
00:05:16,159 --> 00:05:18,559
button and extending beyond the

143
00:05:18,559 --> 00:05:20,809
right-hand edge of the screen. And the

144
00:05:20,809 --> 00:05:22,490
button's also messed up in the design

145
00:05:22,490 --> 00:05:24,770
because we created a layout for 

146
00:05:24,770 --> 00:05:27,529
a rectangular screen, but don't worry

147
00:05:27,529 --> 00:05:28,999
about that because we're looking at how

148
00:05:28,999 --> 00:05:31,490
things size at the moment. Now to get

149
00:05:31,490 --> 00:05:33,199
around this and make images display

150
00:05:33,199 --> 00:05:35,959
reasonably on all devices, Android uses the

151
00:05:35,959 --> 00:05:38,419
concept of device independent pixels, or

152
00:05:38,419 --> 00:05:42,800
dp. Now 1 dp is equal to one pixel at a

153
00:05:42,800 --> 00:05:45,589
resolution of 160 pixels per inch, but

154
00:05:45,589 --> 00:05:48,349
scales to use more or less pixels, as the

155
00:05:48,349 --> 00:05:51,529
pixel density of the screen changes. So

156
00:05:51,529 --> 00:05:52,490
I'm going to go back to our original

157
00:05:52,490 --> 00:05:56,959
Nexus 4 device, and what we're going to do

158
00:05:56,959 --> 00:05:59,689
is change the sizes back to 100 dp on

159
00:05:59,689 --> 00:06:05,330
this screen, and 100 dp is about the same

160
00:06:05,330 --> 00:06:08,270
as 200 px, so everything should still look

161
00:06:08,270 --> 00:06:13,129
the same. Now let's switch back to the

162
00:06:13,129 --> 00:06:15,409
Android wear device again and see what

163
00:06:15,409 --> 00:06:20,419
it looks like. You can see now that we've

164
00:06:20,419 --> 00:06:21,800
done that, everything still looks okay,

165
00:06:21,800 --> 00:06:23,740
ignoring the circular display of course.

166
00:06:23,740 --> 00:06:26,539
Now these are pretty extreme differences,

167
00:06:26,539 --> 00:06:31,399
from a 768 by 1280 Nexus to a 320 by 290

168
00:06:31,399 --> 00:06:34,159
watch, but using density-independent

169
00:06:34,159 --> 00:06:37,849
pixels, dp, instead of pixels allows the

170
00:06:37,849 --> 00:06:41,149
widgets to be resized to still look okay

171
00:06:41,149 --> 00:06:43,519
and remain usable. Now of course you'll

172
00:06:43,519 --> 00:06:45,370
eventually run into the physical limitations

173
00:06:45,370 --> 00:06:47,650
of a small screen, if you have more in

174
00:06:47,650 --> 00:06:49,810
your layout than will fit. Now if I

175
00:06:49,810 --> 00:06:52,240
choose the 280 by 280 watch, just

176
00:06:52,240 --> 00:06:56,800
to show you, down here, the things just

177
00:06:56,800 --> 00:06:59,590
physically won't fit. So using dp's can

178
00:06:59,590 --> 00:07:01,870
only achieve so much. Now if you

179
00:07:01,870 --> 00:07:03,250
were creating an app to run on a

180
00:07:03,250 --> 00:07:05,560
wearable device, then you design the

181
00:07:05,560 --> 00:07:07,750
layouts using one, and Android Studio

182
00:07:07,750 --> 00:07:10,060
does fully support wearables. But we're

183
00:07:10,060 --> 00:07:11,110
not going to be covering that in this

184
00:07:11,110 --> 00:07:12,729
course, but using the watch made it

185
00:07:12,729 --> 00:07:15,130
really obvious how using dp's is to be

186
00:07:15,130 --> 00:07:17,889
preferred over pixels, when sizing

187
00:07:17,889 --> 00:07:20,530
images and other widgets. So I'm going to

188
00:07:20,530 --> 00:07:25,210
switch back to the Nexus 4 because that

189
00:07:25,210 --> 00:07:26,560
watch is a little bit small on the video,

190
00:07:26,560 --> 00:07:28,870
to show a similar device independent way

191
00:07:28,870 --> 00:07:32,229
of specifying text size. Now when I come

192
00:07:32,229 --> 00:07:33,970
over here and click on the button to

193
00:07:33,970 --> 00:07:36,340
select it, the attributes window changed

194
00:07:36,340 --> 00:07:38,410
to the right, and I can come down here to

195
00:07:38,410 --> 00:07:41,710
textAppearance, and you might find that

196
00:07:41,710 --> 00:07:43,449
that is sized up like that. If it is, just

197
00:07:43,449 --> 00:07:44,830
click on the little 

198
00:07:44,830 --> 00:07:48,010
arrow to expand it out, and what we can

199
00:07:48,010 --> 00:07:51,400
do is set the, or see the font size, and

200
00:07:51,400 --> 00:07:54,610
that's the text size here. So here the

201
00:07:54,610 --> 00:07:57,099
units are sp, which stands for scale

202
00:07:57,099 --> 00:07:59,650
independent pixel. The concept is the

203
00:07:59,650 --> 00:08:02,169
same but sp also considers the users

204
00:08:02,169 --> 00:08:05,080
preferred text size. Now what I'm going

205
00:08:05,080 --> 00:08:11,070
to do is change this text size to 32px,

206
00:08:11,070 --> 00:08:13,750
and although that's a little large, it

207
00:08:13,750 --> 00:08:16,479
still displays okay here. But if we

208
00:08:16,479 --> 00:08:19,360
switch back to our device, our watch that

209
00:08:19,360 --> 00:08:22,810
we were using before, the 320 by 290, you

210
00:08:22,810 --> 00:08:23,800
can see that we've got a bit of a

211
00:08:23,800 --> 00:08:26,770
problem now. The button now overlaps the

212
00:08:26,770 --> 00:08:29,110
area where the image is constrained to

213
00:08:29,110 --> 00:08:32,529
appear. Now 32 px on our original device

214
00:08:32,529 --> 00:08:35,650
was 16 sp, so I can change the size here

215
00:08:35,650 --> 00:08:40,679
to 16 sp by typing that in the text size

216
00:08:40,679 --> 00:08:44,770
field. It looks okay, well okayish,

217
00:08:44,770 --> 00:08:46,660
because it's still a bit large for the

218
00:08:46,660 --> 00:08:49,000
screen, but what is clear is that the

219
00:08:49,000 --> 00:08:51,130
button's now moved, or clear of the image,

220
00:08:51,130 --> 00:08:55,860
and if we go back to the Nexus 4 device

221
00:08:55,860 --> 00:08:58,570
everything still looks fine Now there's

222
00:08:58,570 --> 00:08:59,320
a useful

223
00:08:59,320 --> 00:09:02,800
description of dp and sp on Android's

224
00:09:02,800 --> 00:09:05,440
developer website. I'm gonna just 

225
00:09:05,440 --> 00:09:07,540
bring that up on the screen. I'm just

226
00:09:07,540 --> 00:09:12,850
going to paste in this link. It's good

227
00:09:12,850 --> 00:09:14,050
reading just to read up a little bit

228
00:09:14,050 --> 00:09:16,300
more on what Density-independent pixels

229
00:09:16,300 --> 00:09:18,850
are. The bottom line here is to use

230
00:09:18,850 --> 00:09:20,950
Density-independent pixels when sizing

231
00:09:20,950 --> 00:09:23,560
graphical elements, and Scale-independent

232
00:09:23,560 --> 00:09:26,290
pixels when sizing text. Alright so I'm

233
00:09:26,290 --> 00:09:27,700
going to finish this video by mentioning

234
00:09:27,700 --> 00:09:30,280
that this isn't quite the full story.

235
00:09:30,280 --> 00:09:32,680
It's possible to provide images at

236
00:09:32,680 --> 00:09:34,900
different resolutions and Android will

237
00:09:34,900 --> 00:09:36,160
choose the one that's most appropriate

238
00:09:36,160 --> 00:09:38,350
for the device that the app's running

239
00:09:38,350 --> 00:09:40,240
on. Now we're going to be looking at

240
00:09:40,240 --> 00:09:42,100
doing that later in the course, but I'll

241
00:09:42,100 --> 00:09:44,950
mention it briefly because I've promised to

242
00:09:44,950 --> 00:09:47,920
explain how come our 640 wide image was

243
00:09:47,920 --> 00:09:51,250
wider than a 768 screen. We're scrolling

244
00:09:51,250 --> 00:09:53,050
down on this page, about halfway down you

245
00:09:53,050 --> 00:09:55,330
can see here we've got this Provide

246
00:09:55,330 --> 00:09:57,460
Alternative Bitmaps section. Now we're

247
00:09:57,460 --> 00:09:59,230
going to be providing alternative images

248
00:09:59,230 --> 00:10:00,130
later in the course.

249
00:10:00,130 --> 00:10:02,020
For now though, what's interesting in

250
00:10:02,020 --> 00:10:04,450
this section, is the scaling factors for

251
00:10:04,450 --> 00:10:06,550
the different densities. So notice here

252
00:10:06,550 --> 00:10:09,490
on the screen that xhdpi has a

253
00:10:09,490 --> 00:10:12,040
scaling factor of 2. So we go back to

254
00:10:12,040 --> 00:10:15,070
Android Studio and drop down the list of

255
00:10:15,070 --> 00:10:19,300
devices, and we can see that our Nexus 4

256
00:10:19,300 --> 00:10:23,980
is an xhdpi device. So our 640 by 480 px

257
00:10:23,980 --> 00:10:27,010
image was scaled by 2, to become 1280

258
00:10:27,010 --> 00:10:30,070
by 960 pixels, which is wider than the

259
00:10:30,070 --> 00:10:33,340
screen. So as an exercise, use the source

260
00:10:33,340 --> 00:10:35,860
compat attribute to load the ball

261
00:10:35,860 --> 00:10:38,590
_640 x 480 image back into

262
00:10:38,590 --> 00:10:41,290
the image view, and specify its width and

263
00:10:41,290 --> 00:10:45,100
height to be 640 px by 480 px. That'll

264
00:10:45,100 --> 00:10:47,530
confirm that it does fit and was scaled

265
00:10:47,530 --> 00:10:50,800
up when the dp units were used. And just

266
00:10:50,800 --> 00:10:52,480
as a hint, delete the left constraint

267
00:10:52,480 --> 00:10:54,610
as there's not enough space to the right of

268
00:10:54,610 --> 00:10:57,280
the button. But I'll leave that with you as

269
00:10:57,280 --> 00:11:01,440
an exercise and see you in the next video.