1
00:00:05,430 --> 00:00:07,010
So we finished the previous video

2
00:00:07,010 --> 00:00:09,800
with a mini challenge to investigate the effect

3
00:00:09,800 --> 00:00:13,500
that the various scaleType settings have on our image.

4
00:00:13,500 --> 00:00:16,040
Now, the website that I'm gonna show you now,

5
00:00:16,040 --> 00:00:17,890
the link is in the resources section.

6
00:00:21,993 --> 00:00:23,160
Paste that in.

7
00:00:24,060 --> 00:00:25,390
This has a very good description

8
00:00:25,390 --> 00:00:26,853
of the different scaleTypes.

9
00:00:27,850 --> 00:00:29,440
Now from the top of the dropdown,

10
00:00:29,440 --> 00:00:31,580
rather than the alphabetical documentation,

11
00:00:31,580 --> 00:00:34,410
firstly we've got none, and none's fairly straight-forward,

12
00:00:34,410 --> 00:00:36,320
it returns the image to its' default state,

13
00:00:36,320 --> 00:00:38,700
just as it was, just how it was

14
00:00:38,700 --> 00:00:40,670
when we first dropped it on there.

15
00:00:40,670 --> 00:00:42,930
But matrix is the tricky one.

16
00:00:42,930 --> 00:00:45,940
Now it uses a matrix to scale the image

17
00:00:45,940 --> 00:00:47,930
but you can't define a matrix here,

18
00:00:47,930 --> 00:00:49,460
you have to do it in code.

19
00:00:49,460 --> 00:00:51,870
So it's used to allow the image to be resized in code

20
00:00:51,870 --> 00:00:54,540
when the user pinches it in or out, for example.

21
00:00:54,540 --> 00:00:55,373
Now fitXY,

22
00:00:56,338 --> 00:00:57,210
and what we'll do is we'll just go back

23
00:00:57,210 --> 00:01:00,260
to Android Studio now while we're talking about that.

24
00:01:00,260 --> 00:01:04,540
So the next one fitXY, well that sets up things

25
00:01:04,540 --> 00:01:08,090
so that the image is scaled in both directions independently,

26
00:01:08,090 --> 00:01:10,820
so that it will be stretched vertically in this case,

27
00:01:10,820 --> 00:01:14,190
so that it fits the current size of the ImageView widget.

28
00:01:14,190 --> 00:01:16,700
So the aspect ratio won't be maintained,

29
00:01:16,700 --> 00:01:19,140
so the ball in the photo doesn't remain circular.

30
00:01:19,140 --> 00:01:20,650
Let's have a go at just doing some of these now,

31
00:01:20,650 --> 00:01:22,467
so I'm gonna change that to fitXY

32
00:01:22,467 --> 00:01:24,140
and you can see how that was stretched

33
00:01:24,140 --> 00:01:26,380
and the ball doesn't remain circular.

34
00:01:26,380 --> 00:01:28,070
Now at the sizes that we're using here though,

35
00:01:28,070 --> 00:01:30,360
you can see that it resembles a rugby ball

36
00:01:30,360 --> 00:01:34,010
or AFL football on its end.

37
00:01:34,010 --> 00:01:35,963
Now fitStart, so we click on that.

38
00:01:37,770 --> 00:01:41,180
The aspect ratio is maintained, so both axes are stretched

39
00:01:41,180 --> 00:01:43,410
or shrunk by the same amount

40
00:01:43,410 --> 00:01:45,240
and the image is positioned at the top left

41
00:01:45,240 --> 00:01:46,430
of the ImageView.

42
00:01:46,430 --> 00:01:50,850
So fitCenter is the next one, so clicking on that.

43
00:01:50,850 --> 00:01:52,950
Very much like fitStart but the resulting image

44
00:01:52,950 --> 00:01:55,733
is centred in the ImageView and fitEnd,

45
00:01:57,340 --> 00:02:00,400
similarly, like fitStart but the image is lined up

46
00:02:00,400 --> 00:02:02,776
at the bottom right of the ImageView.

47
00:02:02,776 --> 00:02:07,600
We can try centre. Now with centre the image is centred

48
00:02:07,600 --> 00:02:10,000
in the ImageView but it's not scaled,

49
00:02:10,000 --> 00:02:13,920
so the edges are cropped off if the image is too large.

50
00:02:13,920 --> 00:02:15,780
So we get the full height of the image

51
00:02:15,780 --> 00:02:18,680
because the ImageView is 384 by 420,

52
00:02:18,680 --> 00:02:21,653
but we lose part of the image off the left and right edges.

53
00:02:22,600 --> 00:02:24,300
Let's try the next one centerCrop.
54

54
00:02:26,613 --> 00:02:29,600
Now this scales the image maintaining the aspect ratio

55
00:02:29,600 --> 00:02:32,420
but will make sure that at least one dimension

56
00:02:32,420 --> 00:02:35,380
is at least equal to the corresponding dimension

57
00:02:35,380 --> 00:02:36,970
of the ImageView.

58
00:02:36,970 --> 00:02:38,470
Now because the height of this image

59
00:02:38,470 --> 00:02:40,640
is the same as the height of the ImageView,

60
00:02:40,640 --> 00:02:42,260
it behaves the same as centre.

61
00:02:42,260 --> 00:02:44,830
Now if the image was a lot narrower,

62
00:02:44,830 --> 00:02:47,390
it would've been scaled up and would lose part of the image

63
00:02:47,390 --> 00:02:48,490
at the top and bottom.

64
00:02:49,653 --> 00:02:52,640
centerInside, the image is scaled

65
00:02:52,640 --> 00:02:54,520
maintaining the aspect ratio

66
00:02:54,520 --> 00:02:58,080
but notice side will be scaled larger than the ImageView.

67
00:02:58,080 --> 00:03:00,360
So that results in the image being shrunk,

68
00:03:00,360 --> 00:03:02,460
so that it's about as wide as the ImageView,

69
00:03:02,460 --> 00:03:04,230
so a lot less high.

70
00:03:04,230 --> 00:03:06,700
With our image, it's the same as fitCenter

71
00:03:06,700 --> 00:03:09,380
but with an image smaller than the ImageView.

72
00:03:09,380 --> 00:03:11,410
fitCenter will expand the image to fill in at least

73
00:03:11,410 --> 00:03:14,270
one direction, whereas centerInside will leave space

74
00:03:14,270 --> 00:03:16,070
around the image.

75
00:03:16,070 --> 00:03:17,890
Now if you wanna experiment further,

76
00:03:17,890 --> 00:03:20,790
create images that are smaller in both directions

77
00:03:20,790 --> 00:03:23,390
and smaller in only one dimension.

78
00:03:23,390 --> 00:03:26,730
Now the third case is larger in only one dimension

79
00:03:26,730 --> 00:03:28,430
and that's what we have here.

80
00:03:28,430 --> 00:03:32,140
There's a fourth case which is larger in both dimensions,

81
00:03:32,140 --> 00:03:34,880
and we can test that without creating a new image

82
00:03:34,880 --> 00:03:37,750
by making the container ImageView smaller.

83
00:03:37,750 --> 00:03:41,900
So let's make it 200 by 200 dp.

84
00:03:41,900 --> 00:03:44,780
I'm entering 200 dp in the layout for width

85
00:03:44,780 --> 00:03:47,063
and the same for height, 200 dp.

86
00:03:48,217 --> 00:03:50,260
And that's of course if you wanna experiment with that.

87
00:03:50,260 --> 00:03:53,110
And once again, looking at matrix,

88
00:03:53,110 --> 00:03:54,430
well that's a little bit boring.

89
00:03:54,430 --> 00:03:56,310
We can't really do much with that here,

90
00:03:56,310 --> 00:03:58,830
and that's because the matrix itself hasn't been defined,

91
00:03:58,830 --> 00:04:01,170
it does no scaling, so all we can see here

92
00:04:01,170 --> 00:04:04,900
is a 200 square view of the top left corner of the image,

93
00:04:04,900 --> 00:04:06,770
clicking on it like so.

94
00:04:06,770 --> 00:04:09,240
And again, fitXY shrinks the image to fit,

95
00:04:09,240 --> 00:04:11,213
compressing both sides, so fitXY,

96
00:04:13,824 --> 00:04:16,570
it compresses both sides to the size of the ImageView

97
00:04:16,570 --> 00:04:18,250
without caring if it distorts the image,

98
00:04:18,250 --> 00:04:21,168
so the ball is no longer round, as you can see here.

99
00:04:21,168 --> 00:04:24,620
And fitStart, fitCenter and fitEnd compress the image

100
00:04:24,620 --> 00:04:27,100
to fit and position it in the top,

101
00:04:27,100 --> 00:04:29,260
middle or bottom of the ImageView.

102
00:04:29,260 --> 00:04:32,130
Now the proportions of the original are maintained

103
00:04:32,130 --> 00:04:34,010
so it won't look distorted,

104
00:04:34,010 --> 00:04:35,630
and we can see the entire image in other words.

105
00:04:35,630 --> 00:04:36,880
So I'll just choose one of those,

106
00:04:36,880 --> 00:04:40,700
fitStart, you can see that's the case.

107
00:04:40,700 --> 00:04:42,450
Now centre just shows the middle of the picture,

108
00:04:42,450 --> 00:04:44,000
everything else is cropped off.

109
00:04:46,260 --> 00:04:49,770
There's no scaling so we get a sort of 200 square viewport

110
00:04:49,770 --> 00:04:52,460
onto the image. And centerCrop again,

111
00:04:52,460 --> 00:04:57,340
if I select that, fills the ImageView as best it can,

112
00:04:57,340 --> 00:05:00,250
but we actually do lose part of the left and right

113
00:05:00,250 --> 00:05:02,020
edges because we had to crop it off.

114
00:05:02,020 --> 00:05:05,310
So the 480 height has been shrunk down to 200

115
00:05:05,310 --> 00:05:07,140
and the 640 width has been shrunk down

116
00:05:07,140 --> 00:05:10,880
by the same percentage, leaving it wider than 200.

117
00:05:10,880 --> 00:05:12,350
Now with the sizes that we're using

118
00:05:12,350 --> 00:05:15,013
centerInside now behaves the same as fitCenter,

119
00:05:17,160 --> 00:05:18,310
as you can see there.

120
00:05:18,310 --> 00:05:20,050
So with a bit of experimentation

121
00:05:20,050 --> 00:05:22,120
and checking the documentation,

122
00:05:22,120 --> 00:05:25,060
we've managed to work out what those scaleType settings do

123
00:05:25,060 --> 00:05:28,550
and Android documentation is normally pretty good.

124
00:05:28,550 --> 00:05:30,200
As well as reference documentation,

125
00:05:30,200 --> 00:05:32,760
they've got tutorial documentation and guides

126
00:05:32,760 --> 00:05:36,120
that tend to explain things from a more practical angle.

127
00:05:36,120 --> 00:05:37,870
Alright, so now that we've seen that,

128
00:05:37,870 --> 00:05:40,270
I wanna take a moment to demonstrate something

129
00:05:40,270 --> 00:05:42,500
that can cause confusion,

130
00:05:42,500 --> 00:05:44,700
but it's not gonna cause confusion here in fact,

131
00:05:44,700 --> 00:05:46,810
because we're using an ImageView.

132
00:05:46,810 --> 00:05:49,420
Now an ImageView is a very visual component

133
00:05:49,420 --> 00:05:52,130
so you'll understand what's going on straight away.

134
00:05:52,130 --> 00:05:54,540
As long as you remember this and apply it

135
00:05:54,540 --> 00:05:57,530
when we start working with text widgets rather than images,

136
00:05:57,530 --> 00:05:59,490
everything will make perfect sense.

137
00:05:59,490 --> 00:06:00,530
So the first thing we need to do

138
00:06:00,530 --> 00:06:04,680
is change our scaleType attribute back to fitStart,

139
00:06:04,680 --> 00:06:06,150
so let's do that.

140
00:06:06,150 --> 00:06:07,970
Now looking at the blueprint,

141
00:06:07,970 --> 00:06:11,020
the ImageView is perfectly centred on the screen.

142
00:06:11,020 --> 00:06:13,590
Now because we've used fitStart,

143
00:06:13,590 --> 00:06:15,890
the image has been scaled to fit,

144
00:06:15,890 --> 00:06:17,520
and appears more towards the top edge

145
00:06:17,520 --> 00:06:21,060
of the ImageView widget, obviously in the designer.

146
00:06:21,060 --> 00:06:22,460
Now if we run the app again,

147
00:06:29,000 --> 00:06:31,310
the image should appear more towards the top of the screen,

148
00:06:31,310 --> 00:06:32,610
so let's just see what happens.

149
00:06:34,260 --> 00:06:36,250
Now it's roughly centred but there's definitely more white

150
00:06:36,250 --> 00:06:38,590
space below the image than above it,

151
00:06:38,590 --> 00:06:40,500
and that's not really surprising but it does demonstrate

152
00:06:40,500 --> 00:06:43,510
that there's really two different things at work here.

153
00:06:43,510 --> 00:06:46,530
The first is the positioning of the widget on the screen,

154
00:06:46,530 --> 00:06:49,330
centred vertically and horizontally in this case,

155
00:06:49,330 --> 00:06:52,650
but the second is the positioning of the widget's contents

156
00:06:52,650 --> 00:06:55,210
towards the top centre of the widget here.

157
00:06:55,210 --> 00:06:58,030
So although our widget is centred vertically,

158
00:06:58,030 --> 00:07:00,590
the image isn't appearing in the centre of the screen.

159
00:07:00,590 --> 00:07:03,910
It's closer to the top of the screen than the bottom.

160
00:07:03,910 --> 00:07:07,260
Now where it can get confusing is when dealing with text.

161
00:07:07,260 --> 00:07:09,220
If the text doesn't fill its' widget,

162
00:07:09,220 --> 00:07:10,950
it won't appear centred,

163
00:07:10,950 --> 00:07:13,170
even if the widget itself is centred.

164
00:07:13,170 --> 00:07:14,690
And it's slightly worse with text

165
00:07:14,690 --> 00:07:17,890
because text itself can be aligned to the left or right,

166
00:07:17,890 --> 00:07:19,780
as well as top or bottom.

167
00:07:19,780 --> 00:07:22,550
So remember that there's two different things at work here,

168
00:07:22,550 --> 00:07:24,120
the position of the widget

169
00:07:24,120 --> 00:07:27,650
and the position of the contents within the widget.

170
00:07:27,650 --> 00:07:28,580
Now we're gonna be seeing that

171
00:07:28,580 --> 00:07:30,710
when we start using text widgets,

172
00:07:30,710 --> 00:07:33,380
but I wanted to clear up any possible confusion here,

173
00:07:33,380 --> 00:07:36,780
when it's very much easier to understand what's happening.

174
00:07:36,780 --> 00:07:37,920
And after what we've just covered,

175
00:07:37,920 --> 00:07:38,830
you should be able to work out

176
00:07:38,830 --> 00:07:42,390
how to centre the image vertically in the ImageView.

177
00:07:42,390 --> 00:07:44,210
Alright, so let's finish the video here.

178
00:07:44,210 --> 00:07:46,560
In the next video, we're gonna go back to Android Studio

179
00:07:46,560 --> 00:07:49,130
and just have a closer look at that view inspector.

180
00:07:49,130 --> 00:07:50,830
So I'll see you in the next video.