Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Android ImageView Scaletype: A Visual Guide

DZone's Guide to

Android ImageView Scaletype: A Visual Guide

When it comes time to scale an image in an ImageView, you may not remember what all the different ScaleTypes actually look like on the screen. Never fear, your ImageView Scaletype visual guide is here!

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

If you’re anything like me, you are really, really, ridiculously good looking. But you’re also probably a tad forgetful. So when it comes time to scale an image in an ImageView, you cannot for the life of you remember what all the different ScaleTypes actually look like on the screen. So, you spend the next 10-15 minutes building and rebuilding your app with each and every scale type to see what they all look like. Then you inevitably forget the difference between two of them and start the whole process all over again. As the kids say, “I gotchu fam”.

Below are screenshots of all the different ScaleTypes placed side-by-side. And below that are all the ScaleType definitions copy and pasted directly from the official Android docs. And even further below those is a helpful tip for those brave souls who make it to the end of this post.

Scale Types

The full descriptions of each ScaleType from the official Android documentation.

CENTER

Center the image in the view, but perform no scaling.

CENTER_CROP

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

FIT_CENTER

Scale the image using Matrix.ScaleToFit.CENTER

Matrix.ScaleToFit.CENTER: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. The result is centered inside dst.

FIT_END

Scale the image using Matrix.ScaleToFit.END

Matrix.ScaleToFit.END: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.

FIT_START

Scale the image using Matrix.ScaleToFit.START

Matrix.ScaleToFit.START: Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. START aligns the result to the left and top edges of dst.

FIT_XY

Scale the image using Matrix.ScaleToFit.FILL

Matrix.ScaleToFit.FILL: Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src.

MATRIX

Scale using the image matrix when drawing.

Adjust View Bounds

While not technically an ImageView.ScaleType this will come in handy. If you notice with CENTER_INSIDE, FIT_CENTER, FIT_END and FIT_START the actual bounds of the ImageView are much larger than the scaled image. To set the bounds of the ImageView to the height of the image inside, use android:adjustViewBounds="true” in your XML. It looks like this:

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:
docs ,aspect ,documentation ,scale ,android

Published at DZone with permission of Amanda Hill, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}