Android’s ImageView scale type cheatsheet

Once you have spent enough time with Android development, it is pretty clear that you can't master all parts of the ecosystem. Some parts are very essential for your day to day projects, and as such, must be learned thoroughly and mastered, and other parts are easily forgettable until the next time you need them.

For me, one such part is the basic widget ImageView and it's various ScaleTypes.

I have always found it odd that the official documentation of ScaleTypes does not offer any visual representation of the differences between types.
So what do you do? you spend the next hour running your app again and again with each and every ScaleType to see what they all look like.

In this article, I will showcase each ScaleType and describe them with my own word, hopefully, this will be more clear than the official documentation

TLDR: I’ve created a CheatSheet that summarizes everything in a single page.
https://www.dropbox.com/s/d7p6eqj7quveb6i/Android%E2%80%99s%20ImageView%20Scale%20Type%20CheatSheet.pdf?dl=0

These are the assets I will be using on a grey background ImageView with a height of 250dp and width of the full screen:

Big (2150X2094) | Small (200X196)

CENTER

• Places the asset in the center of the ImageView.
• No scaling is applied to the asset.
• Parts that can’t fit inside the ImageView are cropped.

CENTER CROP

• Places the asset in the center of the ImageView.
• Keeps the original asset aspect ratio.
• If the asset is bigger than the ImageView, it is scaled down until one of the horizontal or vertical dimensions reaches the edges of the ImageView.
• If the asset is smaller than the ImageView, it is scaled up until both horizontal and vertical dimensions reach the edges of the ImageView.
• Parts that can’t fit inside the ImageView are cropped.

CENTER INSIDE

• Places the asset in the center of the ImageView.
• Keeps the original asset aspect ratio.
• If the asset is bigger than the ImageView, it is scaled down until both horizontal and vertical dimensions reach the edges of the ImageView.
• both options ensure the asset fits entirely inside the ImageView and no cropping will be applied.

FIT CENTER (Default)

• Places the asset in the center of the ImageView.
• If the asset is bigger than the ImageView, it is scaled down until both horizontal or vertical dimensions reach the edges of the ImageView.
• If the asset is smaller than the ImageView, it is scaled up until one of the horizontal or vertical dimensions reaches the edges of the ImageView.
• both options ensure the asset will fit entirely inside the ImageView and no cropping will be applied.
• Keeps the original asset aspect ratio.

FIT END

• Places the asset in the bottom right of the ImageView.
• If the asset is bigger than the ImageView, it is scaled down until both horizontal or vertical dimensions reach the edges of the ImageView.
• If the asset is smaller than the ImageView, it is scaled up until one of the horizontal or vertical dimensions reaches the edges of the ImageView.
• both options ensure the asset will fit entirely inside the ImageView and no cropping will be applied.
• Keeps the original asset aspect ratio.

FIT START

• Places the asset in the top left of the ImageView.
• If the asset is bigger than the ImageView, it is scaled down until both horizontal or vertical dimensions reach the edges of the ImageView.
• If the asset is smaller than the ImageView, it is scaled up until one of the horizontal or vertical dimensions reaches the edges of the ImageView.
• both options ensure the asset will fit entirely inside the ImageView and no cropping will be applied.
• Keeps the original asset aspect ratio.

FIT XY

• The asset is scaled until both of the horizontal and vertical dimensions reach the edges of the ImageView.
• Ensure the asset will fit entirely inside the ImageView and no cropping will be applied.
• It does not keep the original asset aspect ratio.

MATRIX

Applies a custom matrix to the ImageView when drawing the asset. should be used with ImageView.setImageMatrix(Matrix) for supplying the matrix.
The matrix can be used to customize the way the asset rotates, scales, etc.

Adjust View Bounds

While technically not aScaleType, it is still can come handy to understand this flag.
When the ImageView height is set to wrap_content and the ScaleType is one of CENTER_INSIDE, FIT_CENTER, FIT_END or FIT_START , the actual bounds of the ImageView are much larger than the scaled asset. To set the bounds of the ImageView to the height of the asset inside, set this flag to true.