Properly Scaling Android Images

This article describes how you can get an image to properly scale in an Android Image View.

Designing apps on the Android platform can sometimes be a challenge. Sometimes when dealing with images, you create a source image that is too large to fit on every screen. Since your app will likely run on a multitude of different devices, you want to ensure that it looks as good as possible on several different sized screens.

The Background Property

An image can automatically be scaled by setting it as the background property for a view. Sometimes this is desirable. For example, if you have an image that you want to be used as a background for your entire app, that is well suited to being stretched and skewed.

A linear layout with the background property set as an image

ImageViews

However, let's say that now you want to add a large title to your app. You can do this by adding an ImageView to your application. However, your title doesn't stretch and skew as well, so you don't want it set as the background property. Instead, set the src property to the proper drawable.

After an ImageView has been added and the src property has been set.

This makes sure the title isn't skewed all funny, but we can't see the whole thing. If we set the scale type to fitXY, Android will scale the drawable to fit inside the size of the view.

With the scale type set to fitXY

So now we can read the whole title, but the letters are stretched.

Preserving the Aspect Ratio

Thankfully, the ImageView widget has another property that can be set to preserve the aspect ratio. The property adjustViewBounds is a boolean that can be set. When it is true, it will resize the image view according to the aspectRatio of the src drawable.

The image scaled properly and with the aspect ratio preserved

Final Thoughts

Remember, you don't have to define everything in XML layouts. It is also possible to programmatically load and resize the image. In certain situations this may be the best solution.