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.