image scaling
aspect ratio
ImageView
responsive design
Android development

Scale Image to fill ImageView width and keep aspect ratio

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

If you want an Android ImageView to fill the available width without stretching the image, the key is to let the view expand vertically while preserving the drawable's aspect ratio. In practice that usually means constraining the width, turning on adjustViewBounds, and choosing a scale type that matches whether you want full visibility or intentional cropping.

Use adjustViewBounds for Width-Driven Layout

When the goal is "match the parent's width and compute the height from the image ratio," adjustViewBounds is the setting that makes ImageView preserve the drawable's aspect ratio while adjusting one dimension.

In a simple XML layout, this is the usual starting point:

xml
1<ImageView
2    android:id="@+id/headerImage"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:adjustViewBounds="true"
6    android:scaleType="fitCenter"
7    android:src="@drawable/sample_photo" />

This combination means:

  • width is driven by the parent
  • height can grow to maintain the image ratio
  • the image is scaled uniformly instead of distorted

If the parent width is known, the ImageView can calculate a matching height once the drawable dimensions are available.

Pick the Right Scale Type

scaleType controls how the drawable is fitted inside the view bounds. The most relevant choices for this problem are:

  • 'fitCenter, which keeps the whole image visible'
  • 'centerCrop, which fills the view and may crop'
  • 'fitXY, which fills the bounds but distorts the image'

If you want the full image visible while filling width, fitCenter is usually the safer option:

kotlin
imageView.adjustViewBounds = true
imageView.scaleType = ImageView.ScaleType.FIT_CENTER

If you want a banner-style image that must cover the whole area even if the sides are cut off, use centerCrop, but be aware that this changes the requirement. You are no longer saying "show the full image"; you are saying "fill the box while preserving aspect ratio, even if cropping happens."

That distinction matters because many developers ask for "fill width and keep aspect ratio" when they actually want one of two different visual results.

ConstraintLayout Version

In ConstraintLayout, width is often set to 0dp so the view stretches between start and end constraints. The same aspect-ratio idea still applies.

xml
1<ImageView
2    android:id="@+id/poster"
3    android:layout_width="0dp"
4    android:layout_height="wrap_content"
5    android:adjustViewBounds="true"
6    android:scaleType="fitCenter"
7    app:layout_constraintStart_toStartOf="parent"
8    app:layout_constraintEnd_toEndOf="parent"
9    app:layout_constraintTop_toTopOf="parent"
10    android:src="@drawable/sample_photo" />

Here the constrained width replaces match_parent, but the visual goal is the same: width comes from the layout, height follows the image ratio.

Loading Remote Images

When images come from the network, the final drawable size is not always known at first layout pass. Libraries such as Glide or Coil still work well with this pattern, but the layout may update once the image is loaded.

kotlin
1imageView.adjustViewBounds = true
2imageView.scaleType = ImageView.ScaleType.FIT_CENTER
3
4Glide.with(imageView)
5    .load("https://example.com/photo.jpg")
6    .into(imageView)

The important part is that the view configuration should already be correct before the image arrives. If you hardcode a fixed height while also expecting aspect-ratio preservation, the layout will fight your intent.

When centerCrop Is the Better Answer

Sometimes the actual requirement is a hero image with a fixed height. In that case, the view is not deriving height from the image anymore. Instead, the view has a predetermined rectangle and the image needs to cover it cleanly.

xml
1<ImageView
2    android:id="@+id/heroImage"
3    android:layout_width="match_parent"
4    android:layout_height="220dp"
5    android:scaleType="centerCrop"
6    android:src="@drawable/sample_photo" />

This preserves aspect ratio, but it achieves width fill by cropping rather than by expanding height. That is a valid design, just a different one.

Common Pitfalls

The most common mistake is using fitXY. It fills the bounds, but it does so by stretching the image, which breaks the aspect ratio.

Another common issue is combining wrap_content width with no real parent constraint and expecting the ImageView to somehow become screen-wide. The view can only fill width if the layout gives it width to fill. Developers also often use centerCrop and then wonder why the top or sides are missing. Cropping is expected behavior with that scale type.

Finally, remember that remote images may cause a second layout pass after load. That is normal and not a sign that adjustViewBounds is broken.

Summary

  • To fill width and keep aspect ratio without distortion, constrain the width and set android:adjustViewBounds="true".
  • Use fitCenter when the full image should remain visible.
  • Use centerCrop only when cropping is acceptable and the view height is fixed.
  • In ConstraintLayout, 0dp width with start and end constraints is the width-filling pattern.
  • Avoid fitXY if preserving aspect ratio matters.

Course illustration
Course illustration

All Rights Reserved.