ImageView
aspect ratio
Android development
layout design
UI optimization

ImageView - have height match width?

Data Structures & Algorithms practice on Codemia

Step through 300 algorithm problems with animated visualisers that show the data structure changing as the code runs.

Practice algorithms

Introduction

If you want an Android ImageView to stay square, the cleanest solution depends on your layout system. In modern layouts, ConstraintLayout with a 1:1 ratio is usually the best choice, while older projects sometimes need a small custom view that forces height to equal width during measurement.

Use ConstraintLayout For A Square ImageView

With ConstraintLayout, you can declare a ratio directly in XML:

xml
1<androidx.constraintlayout.widget.ConstraintLayout
2    xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    android:layout_width="match_parent"
5    android:layout_height="wrap_content">
6
7    <ImageView
8        android:id="@+id/coverImage"
9        android:layout_width="0dp"
10        android:layout_height="0dp"
11        android:scaleType="centerCrop"
12        android:src="@drawable/sample"
13        app:layout_constraintStart_toStartOf="parent"
14        app:layout_constraintEnd_toEndOf="parent"
15        app:layout_constraintTop_toTopOf="parent"
16        app:layout_constraintDimensionRatio="1:1" />
17
18</androidx.constraintlayout.widget.ConstraintLayout>

The key parts are:

  • Both dimensions are 0dp, which means constraints control them.
  • Start and end constraints define the width.
  • 'app:layout_constraintDimensionRatio="1:1" forces height to match width.'

This is the most maintainable solution for modern Android UIs.

Why adjustViewBounds Is Not Enough

Some developers try:

xml
1<ImageView
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:adjustViewBounds="true" />

That preserves the intrinsic aspect ratio of the image content, but it does not guarantee a square view. If the drawable is not square, the ImageView will not become square either.

So if the requirement is "height must equal width," use layout constraints or custom measurement, not just adjustViewBounds.

Custom SquareImageView

If you are not using ConstraintLayout, create a custom subclass:

kotlin
1import android.content.Context
2import android.util.AttributeSet
3import androidx.appcompat.widget.AppCompatImageView
4
5class SquareImageView @JvmOverloads constructor(
6    context: Context,
7    attrs: AttributeSet? = null,
8    defStyleAttr: Int = 0
9) : AppCompatImageView(context, attrs, defStyleAttr) {
10
11    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
12        super.onMeasure(widthMeasureSpec, widthMeasureSpec)
13    }
14}

Then use it in layout XML:

xml
1<com.example.app.SquareImageView
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:scaleType="centerCrop"
5    android:src="@drawable/sample" />

This overrides measurement so the height spec follows the width spec.

Width-Driven Versus Height-Driven Layouts

Most square-image layouts are width-driven because width is easier to constrain in a scrolling list or grid. If you instead want width to match height, you would reverse the measurement logic or design the parent layout so height is the driving dimension.

In a RecyclerView grid, square thumbnails are especially common. ConstraintLayout ratio or a custom square view both work well there, depending on your existing layout stack.

Choosing The Right scaleType

Once the view is square, the image content still needs a scaling rule. Common choices are:

  • 'centerCrop to fill the square and crop overflow.'
  • 'fitCenter to show the whole image inside the square.'
  • 'centerInside when you do not want upscaling.'

For photo galleries or product grids, centerCrop is usually the most visually consistent option.

Jetpack Compose Equivalent

If you are using Compose, the same idea is much simpler:

kotlin
1Image(
2    painter = painterResource(id = R.drawable.sample),
3    contentDescription = null,
4    contentScale = ContentScale.Crop,
5    modifier = Modifier
6        .fillMaxWidth()
7        .aspectRatio(1f)
8)

aspectRatio(1f) is the Compose version of a square constraint.

Common Pitfalls

The biggest mistake is assuming adjustViewBounds makes the view square. It preserves the drawable's aspect ratio, which is a different behavior.

Another common problem is using a custom square view without thinking about parent constraints. If the parent gives an unspecified or conflicting width, the result may not match the intended design.

Developers also sometimes force a square view but forget to set an appropriate scaleType, so the image appears stretched or unexpectedly letterboxed.

Finally, in scrolling lists, avoid overly complex nested layouts just to create square thumbnails. ConstraintLayout ratios or a small custom view are both lighter and clearer.

Summary

  • In classic Android layouts, ConstraintLayout with 1:1 ratio is usually the cleanest solution.
  • 'adjustViewBounds preserves image aspect ratio but does not force a square view.'
  • A custom SquareImageView works well in older or non-constraint layouts.
  • Pick a scaleType such as centerCrop based on how the image should fill the square.
  • In Compose, use Modifier.aspectRatio(1f) for the same effect.

Related reading
Course
Intermediate
27 lessons
15 hours
DSA Fundamentals

Master algorithmic patterns and data structures through hands-on LeetCode-style problems - from arrays and hashing to dynamic programming and advanced graphs.

View the course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Data Structures & Algorithms practice on Codemia

Step through 300 algorithm problems with animated visualisers that show the data structure changing as the code runs.

Practice algorithms

All Rights Reserved.