Introduction to scaleType attribute for ImageView in Android

ImageView is one of the UI widget that is used to display images in your Application. ImageView comes with different configuration options to support different scaleType. scaleType options are used for scaling the bounds of an image to the bounds of this view. Below are the listed scaleType configuration properties supported.

scaleType Explanation
CENTER No scaling of the image, just centering it and keeping its aspect ratio. This means that if it is larger than the display, it will be cropped, if smaller it will be padded with background color.
CENTER_CROP Centers the image in the display and keeps its aspect ratio. Image is scaled up or down to fit its shorter side to the display. The longer side of the image is cropped.
CENTER_INSIDE Centers the image inside the display, and keeps its aspect ratio. It fits its longer side and pads the shorter side with an equal amount of background colored pixels. If the image’s long side is smaller than the display this does the same thing as CENTER.
FIT_CENTER Behaves like CENTER_INSIDE, except for the case when the image’s longer side is smaller than the display, when it will scale up the image in order to fit its longer side to the display.
FIT_START Behaves like FIT_CENTER, but does not center the image. Instead its top left corner is aligned with the display’s top left corner.
FIT_END Behaves like FIT_CENTER, but does not center the image. Instead its bottom right corner is aligned with the display’s bottom right corner.
FIT_XY The only one that that unlocks aspect ratio and will fit the image to the size of the display, which may cause some distortion, so be careful with this one.
MATRIX If none of the other 7 works for you, you can always use this one and provide your own scaling by assigning the output of a Matrix class transformation (Rotate, Scale, Skew, etc.) using a .setImageMatrix() method call.

Below are screenshots of all the different ScaleTypes placed side-by-side.

You can set ScaleTypes in XML layout

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:src="@drawable/cats" />

or in in Java

imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

Tip 1: Adjust View Bounds

Fixing the width and height however means that the proportions of the width and height of the original image, known as the aspect ratio, will be altered. We can take advantage of the adjustViewBounds parameter to preserve this aspect ratio.

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:

<ImageView
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"
/>

Tip 2: Proportional image resizing

Proportional image resizing is a fairly common scenario while developing an Android app: there are a number of situations where you might want an image to stretch itself to horizontally fit the whole screen while keeping its original aspect ratio.

There is example of a ProportionalImageView which automatically scales its height according to its computed width keeping its original aspect ratio intact.

comments powered by Disqus