A visual guide about using scale type for ImageView in Android

Using images resource in Android is a characteristic feature through ImageView widget. By changing "scale type", the ImageView displays it's image resource differently. Especially, Android SDK provides many options about scale type of the image. Now, please 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.

Basically, as we knew, in the layout file (xml), declaring an ImageView to display an image in drawable folder is simple like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo" />
</RelativeLayout>

And we can have this output screen:

Now, we will use all scale type respectively for this ImageView through android:scaleType attribute and looking the difference!

CENTER

By set android:scaleType="center" to it, image will be centerd in the view, but perform no scaling.
This is output:

CENTER CROP

By use android:scaleType="centerCrop", it will 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):

CENTER INSIDE

If you scale the image uniformly (maintain the image’s aspect ratio) with android:scaleType="centerInside", 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

By using this option (android:scaleType="fitCenter"), it will 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:

For more details about what's the difference between fitCenter and fitCenter, please read this discussion on Stackoverflow.

FIT END

android:scaleType="fitEnd": 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. fitEnd aligns the result to the right and bottom edges of dst:

FIT START

Opposite with fitEnd, fitStart 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. fitStart aligns the result to the left and top edges of dst:

FIT XY

It will scale image 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, the most perplexing option but this is the output:

Adjust View Bounds

Another option for the ImageView widget is "adjust view bounds". While not technically an scaleType this will come in handy. If you notice with centerInside, fitCenter, fitEnd and fitStart 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". It looks like this:

Conclusions

I have just presented all options with scaling image in Android. Depending on the actual case, let choose the suitable scale type for your work. For more details, please read the official guide of Google developer about ImageView.ScaleType. Hope this post can give you a visual aids about this topic, help you easy to understand it!

Learn Programming Together