Android ConstraintLayout 완전 정리 (8) – ConstraintLayout dimensionRatio 사용법: 1:1, 16:9 이미지 비율 맞추기

ConstraintLayout dimensionRatio는 View의 가로와 세로 비율을 XML에서 맞추고 싶을 때 쓰는 속성입니다. 1:1 정사각형 이미지, 16:9 배너, 카드 썸네일처럼 화면 크기는 달라져도 모양 비율은 유지해야 하는 UI에서 자주 쓰입니다.

핵심은 dimensionRatio는 크기를 직접 고정하는 속성이 아니라, 0dp로 계산되는 한쪽 크기를 다른 한쪽 비율에 맞추는 규칙이라는 점입니다.

ConstraintLayout dimensionRatio는 무엇을 해결하는가

이미지 영역을 만들 때 width와 height를 모두 고정 dp로 쓰면 화면 크기에 따라 답답하거나 깨져 보일 수 있습니다. 반대로 wrap_content만 쓰면 이미지 원본 크기나 내용에 기대게 되어 레이아웃 예측이 어려워질 수 있습니다.

dimensionRatio는 이런 상황에서 View의 비율을 고정합니다. 가로 폭은 parent 제약으로 화면에 맞추고, 세로 높이는 16:9 비율로 계산하게 만드는 식입니다.

• 프로필 이미지: 1:1 정사각형
• 영상 썸네일: 16:9
• 카드 배너: 화면 폭에 맞춘 16:9
• 상품 이미지: 카드 폭에 맞춘 1:1 또는 4:3

dimensionRatio가 동작하려면 0dp 조건이 필요하다

dimensionRatio를 이해할 때 가장 중요한 조건은 0dp입니다. 공식 문서도 적어도 한쪽 dimension이 match constraints, 즉 0dp일 때 ratio를 설정할 수 있다고 설명합니다.

예를 들어 width를 0dp로 두고 start/end 제약을 parent에 연결하면 가로 폭은 제약 사이에서 계산됩니다. 여기에 height도 0dp로 두고 dimensionRatio를 16:9로 지정하면, ConstraintLayout은 주어진 제약 안에서 비율을 유지하는 크기를 계산합니다.

• ratio를 계산할 방향: width 또는 height 중 적어도 하나가 0dp
• 0dp 방향의 기준: start/end 또는 top/bottom 같은 제약
• ratio 값: 1:1, 16:9, 4:3 같은 width:height 표현
• 결과: 고정 px가 아니라 제약 안에서 비율 유지

1:1 정사각형 이미지 만들기

가장 쉬운 예시는 1:1 정사각형 이미지입니다. 카드 프로필 이미지, 상품 썸네일, 그리드 이미지처럼 정사각형 영역이 필요할 때 쓸 수 있습니다.

<ImageView
    android:id="@+id/squareImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="1:1" />

<ImageView
    android:id="@+id/squareImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="1:1" />

여기서 1:1은 1dp 대 1dp가 아닙니다. 계산된 가로 폭과 세로 높이가 같은 비율이 되게 한다는 뜻입니다.

16:9 배너 만들기

16:9는 배너, 영상 썸네일, 큰 카드 이미지에 자주 쓰이는 비율입니다. 화면 폭에 따라 가로는 늘어나거나 줄어들지만, 세로는 같은 비율로 따라갑니다.

<ImageView
    android:id="@+id/bannerImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="16:9" />

<ImageView
    android:id="@+id/bannerImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="16:9" />

중요한 점은 16:9가 “높이를 9dp로 만든다”는 뜻이 아니라는 것입니다. 가로와 세로의 비율이 16 대 9가 되도록 계산한다는 뜻입니다.

W, H 기준은 언제 쓰는가

width와 height가 모두 0dp일 때는 어느 쪽을 기준으로 비율을 계산할지 애매해질 수 있습니다. 이때 W, 또는 H, prefix를 붙여 기준 방향을 더 명확히 표현할 수 있습니다.

<ImageView
    android:id="@+id/ratioImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="H,16:9" />

<ImageView
    android:id="@+id/ratioImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintDimensionRatio="H,16:9" />

초반에는 W/H를 외우기보다 “어느 쪽 크기를 먼저 제약으로 정하고, 다른 쪽을 비율로 따라가게 할 것인가”를 먼저 생각하는 편이 좋습니다. 글에서는 실무에서 많이 보는 16:9 카드 이미지를 기준으로 설명합니다.

카드 썸네일에서 dimensionRatio 쓰기

실무에서 dimensionRatio는 카드 UI 이미지 영역에 많이 쓰입니다. 텍스트와 버튼은 아래에 두고, 위쪽 이미지는 카드 폭에 맞추되 항상 16:9로 유지하는 방식입니다.

이렇게 하면 작은 화면에서는 카드 이미지가 작아지고, 큰 화면에서는 넓어지지만, 이미지 영역의 모양은 유지됩니다.

dimensionRatio와 scaleType은 역할이 다르다

dimensionRatio는 ImageView라는 View 영역의 가로세로 비율을 정합니다. 하지만 그 안에 들어가는 이미지가 어떻게 잘리거나 맞춰질지는 scaleType이 결정합니다.

예를 들어 16:9 ImageView에 세로로 긴 이미지를 넣으면 View 영역은 16:9로 유지됩니다. 다만 centerCrop을 쓰면 이미지 일부가 잘릴 수 있고, fitCenter를 쓰면 여백이 생길 수 있습니다. 그래서 “영역 비율”과 “이미지 내용 표시 방식”을 분리해서 봐야 합니다.

• dimensionRatio: ImageView 영역의 비율
• scaleType=centerCrop: 영역을 채우되 이미지 일부가 잘릴 수 있음
• scaleType=fitCenter: 이미지 전체를 보이게 하되 여백이 생길 수 있음
• 이미지 원본 비율과 View 영역 비율은 같은 개념이 아님

dimensionRatio가 안 먹는 흔한 이유

dimensionRatio가 안 먹는다고 느껴질 때는 속성 이름보다 조건을 먼저 봐야 합니다. 가장 흔한 문제는 width와 height를 모두 wrap_content나 고정 dp로 둔 상태에서 ratio를 넣는 것입니다.

<!-- 좋지 않은 예: width와 height가 모두 고정되어 ratio가 계산할 여지가 적다 -->
<ImageView
    android:id="@+id/badRatioImage"
    android:layout_width="240dp"
    android:layout_height="120dp"
    app:layout_constraintDimensionRatio="1:1" />

<!-- 좋지 않은 예: width와 height가 모두 고정되어 ratio가 계산할 여지가 적다 -->
<ImageView
    android:id="@+id/badRatioImage"
    android:layout_width="240dp"
    android:layout_height="120dp"
    app:layout_constraintDimensionRatio="1:1" />

또 다른 문제는 0dp로 둔 방향의 제약이 부족한 경우입니다. 예를 들어 width가 0dp인데 start/end 제약이 부족하면 가로 크기를 계산할 기준이 약해집니다. ratio는 크기 계산 규칙이지, 빠진 제약을 대신 만들어주는 기능은 아닙니다.

• width/height 중 적어도 하나가 0dp인가
• 0dp 방향에 필요한 양쪽 제약이 있는가
• ratio 값을 1:1, 16:9처럼 width:height로 읽고 있는가
• ImageView 원본 비율과 View 영역 비율을 혼동하고 있지는 않은가

정리

ConstraintLayout dimensionRatio는 View 비율을 안정적으로 유지하는 속성입니다. 1:1 정사각형 이미지, 16:9 배너, 카드 썸네일처럼 화면 크기에 따라 크기는 변해도 비율은 유지해야 하는 UI에서 특히 유용합니다.

• dimensionRatio는 고정 크기가 아니라 비율 계산 규칙이다
• 적어도 한쪽 dimension은 0dp여야 한다
• 1:1은 정사각형, 16:9는 배너나 영상 썸네일에 자주 쓴다
• 양쪽이 0dp이면 W/H 기준을 명확히 할 수 있다

다음 편에서는 percent, min, max 크기를 다룹니다. 화면 크기가 달라질 때 View를 어느 정도까지 넓히고 줄일지 결정하는 기준을 정리하겠습니다.

아래에는 이 편보다 앞에서 다룬 글만 모았습니다. 아직 뒤 편은 발행 전이므로 링크하지 않습니다.

공식 기준은 Android Developers ConstraintLayout 가이드와 AndroidX ConstraintLayout 레퍼런스를 확인했습니다.