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 options are used for scaling the bounds of an image to the bounds of this view. Below are the listed
scaleType configuration properties supported.
|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
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
matrix for the
<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
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);