Introduction to scaleType attribute for ImageView in Android Android 16.04.2017

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.

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.

Tip 3: TOP_CROP

You just need to modify the matrix of the ImageView.

Set the scaleType to matrix for the ImageView:

<ImageView
    android:id="@+id/imageView"
    android:contentDescription="Image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image"
    android:scaleType="matrix" />

Set a custom matrix for the ImageView:

final ImageView imageView = (ImageView) findViewById(R.id.imageView);
final Matrix matrix = imageView.getImageMatrix();
final float imageWidth = imageView.getDrawable().getIntrinsicWidth();
final int screenWidth = getResources().getDisplayMetrics().widthPixels;
final float scaleRatio = screenWidth / imageWidth;
matrix.postScale(scaleRatio, scaleRatio);
imageView.setImageMatrix(matrix);