So we finished the previous video
with a mini challenge to investigate the effect
that the various scaleType settings have on our image.
Now, the website that I'm gonna show you now,
the link is in the resources section.
Paste that in.
This has a very good description
of the different scaleTypes.
Now from the top of the dropdown,
rather than the alphabetical documentation,
firstly we've got none, and none's fairly straight-forward,
it returns the image to its' default state,
just as it was, just how it was
when we first dropped it on there.
But matrix is the tricky one.
Now it uses a matrix to scale the image
but you can't define a matrix here,
you have to do it in code.
So it's used to allow the image to be resized in code
when the user pinches it in or out, for example.
Now fitXY,
and what we'll do is we'll just go back
to Android Studio now while we're talking about that.
So the next one fitXY, well that sets up things
so that the image is scaled in both directions independently,
so that it will be stretched vertically in this case,
so that it fits the current size of the ImageView widget.
So the aspect ratio won't be maintained,
so the ball in the photo doesn't remain circular.
Let's have a go at just doing some of these now,
so I'm gonna change that to fitXY
and you can see how that was stretched
and the ball doesn't remain circular.
Now at the sizes that we're using here though,
you can see that it resembles a rugby ball
or AFL football on its end.
Now fitStart, so we click on that.
The aspect ratio is maintained, so both axes are stretched
or shrunk by the same amount
and the image is positioned at the top left
of the ImageView.
So fitCenter is the next one, so clicking on that.
Very much like fitStart but the resulting image
is centred in the ImageView and fitEnd,
similarly, like fitStart but the image is lined up
at the bottom right of the ImageView.
We can try centre. Now with centre the image is centred
in the ImageView but it's not scaled,
so the edges are cropped off if the image is too large.
So we get the full height of the image
because the ImageView is 384 by 420,
but we lose part of the image off the left and right edges.
Let's try the next one centerCrop. 54
Now this scales the image maintaining the aspect ratio
but will make sure that at least one dimension
is at least equal to the corresponding dimension
of the ImageView.
Now because the height of this image
is the same as the height of the ImageView,
it behaves the same as centre.
Now if the image was a lot narrower,
it would've been scaled up and would lose part of the image
at the top and bottom.
centerInside, the image is scaled
maintaining the aspect ratio
but notice side will be scaled larger than the ImageView.
So that results in the image being shrunk,
so that it's about as wide as the ImageView,
so a lot less high.
With our image, it's the same as fitCenter
but with an image smaller than the ImageView.
fitCenter will expand the image to fill in at least
one direction, whereas centerInside will leave space
around the image.
Now if you wanna experiment further,
create images that are smaller in both directions
and smaller in only one dimension.
Now the third case is larger in only one dimension
and that's what we have here.
There's a fourth case which is larger in both dimensions,
and we can test that without creating a new image
by making the container ImageView smaller.
So let's make it 200 by 200 dp.
I'm entering 200 dp in the layout for width
and the same for height, 200 dp.
And that's of course if you wanna experiment with that.
And once again, looking at matrix,
well that's a little bit boring.
We can't really do much with that here,
and that's because the matrix itself hasn't been defined,
it does no scaling, so all we can see here
is a 200 square view of the top left corner of the image,
clicking on it like so.
And again, fitXY shrinks the image to fit,
compressing both sides, so fitXY,
it compresses both sides to the size of the ImageView
without caring if it distorts the image,
so the ball is no longer round, as you can see here.
And fitStart, fitCenter and fitEnd compress the image
to fit and position it in the top,
middle or bottom of the ImageView.
Now the proportions of the original are maintained
so it won't look distorted,
and we can see the entire image in other words.
So I'll just choose one of those,
fitStart, you can see that's the case.
Now centre just shows the middle of the picture,
everything else is cropped off.
There's no scaling so we get a sort of 200 square viewport
onto the image. And centerCrop again,
if I select that, fills the ImageView as best it can,
but we actually do lose part of the left and right
edges because we had to crop it off.
So the 480 height has been shrunk down to 200
and the 640 width has been shrunk down
by the same percentage, leaving it wider than 200.
Now with the sizes that we're using
centerInside now behaves the same as fitCenter,
as you can see there.
So with a bit of experimentation
and checking the documentation,
we've managed to work out what those scaleType settings do
and Android documentation is normally pretty good.
As well as reference documentation,
they've got tutorial documentation and guides
that tend to explain things from a more practical angle.
Alright, so now that we've seen that,
I wanna take a moment to demonstrate something
that can cause confusion,
but it's not gonna cause confusion here in fact,
because we're using an ImageView.
Now an ImageView is a very visual component
so you'll understand what's going on straight away.
As long as you remember this and apply it
when we start working with text widgets rather than images,
everything will make perfect sense.
So the first thing we need to do
is change our scaleType attribute back to fitStart,
so let's do that.
Now looking at the blueprint,
the ImageView is perfectly centred on the screen.
Now because we've used fitStart,
the image has been scaled to fit,
and appears more towards the top edge
of the ImageView widget, obviously in the designer.
Now if we run the app again,
the image should appear more towards the top of the screen,
so let's just see what happens.
Now it's roughly centred but there's definitely more white
space below the image than above it,
and that's not really surprising but it does demonstrate
that there's really two different things at work here.
The first is the positioning of the widget on the screen,
centred vertically and horizontally in this case,
but the second is the positioning of the widget's contents
towards the top centre of the widget here.
So although our widget is centred vertically,
the image isn't appearing in the centre of the screen.
It's closer to the top of the screen than the bottom.
Now where it can get confusing is when dealing with text.
If the text doesn't fill its' widget,
it won't appear centred,
even if the widget itself is centred.
And it's slightly worse with text
because text itself can be aligned to the left or right,
as well as top or bottom.
So remember that there's two different things at work here,
the position of the widget
and the position of the contents within the widget.
Now we're gonna be seeing that
when we start using text widgets,
but I wanted to clear up any possible confusion here,
when it's very much easier to understand what's happening.
And after what we've just covered,
you should be able to work out
how to centre the image vertically in the ImageView.
Alright, so let's finish the video here.
In the next video, we're gonna go back to Android Studio
and just have a closer look at that view inspector.
So I'll see you in the next video.