Android ConstraintLayout 완전 정리 (9) – ConstraintLayout percent min max 크기 정리: 화면 크기에 맞게 View 조절하기

ConstraintLayout percent는 View 크기를 parent 기준 비율로 계산하고 싶을 때 쓰는 방식입니다. 여기에 min, max 제한을 함께 쓰면 모바일에서는 너무 작아지지 않고, 태블릿에서는 너무 넓어지지 않는 UI를 만들 수 있습니다.

핵심은 percent, min, max는 0dp match_constraint 크기 계산을 조절하는 보조 규칙이라는 점입니다.

ConstraintLayout percent는 무엇을 해결하는가

고정 dp만 쓰면 화면이 넓어져도 View 크기가 그대로입니다. 반대로 0dp로 양쪽 제약을 모두 채우면 View가 너무 넓어질 수 있습니다. percent는 parent 폭이나 높이의 일정 비율만 쓰게 만들어 이 중간 지점을 잡습니다.

• 고정 dp: 화면이 커져도 크기가 그대로
• 0dp 양쪽 제약: 사용 가능한 공간을 크게 채움
• percent: parent의 일정 비율만 사용
• min/max: percent 결과가 너무 작거나 커지는 것을 제한

percent가 동작하는 조건

공식 reference 기준으로 percent dimension을 쓰려면 dimension을 0dp, 즉 MATCH_CONSTRAINT로 두고 default를 percent로 설정한 뒤 percent 값을 0과 1 사이로 지정해야 합니다.

<View
    android:id="@+id/percentCard"
    android:layout_width="0dp"
    android:layout_height="120dp"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/percentCard"
    android:layout_width="0dp"
    android:layout_height="120dp"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

화면의 70% 폭 카드 만들기

카드나 입력 영역을 화면 전체 폭이 아니라 70% 정도로 제한하고 싶을 때 percent를 쓸 수 있습니다. 작은 화면에서는 카드가 줄어들고, 큰 화면에서는 커지지만 parent 전체를 다 채우지는 않습니다.

여기서 70%는 XML에서 70이라고 쓰지 않습니다. percent 속성은 0과 1 사이 값을 쓰므로 70%는 0.7로 표현합니다. 0.8은 80%, 0.25는 25%입니다.

예를 들어 parent 폭이 360dp인 화면에서 0.7을 쓰면 카드 폭은 약 252dp가 됩니다. parent 폭이 600dp인 화면에서는 약 420dp가 됩니다. 같은 XML이라도 화면이 넓어지면 카드도 같이 넓어지는 이유가 여기에 있습니다.

• parent 360dp × 0.7 = 252dp
• parent 600dp × 0.7 = 420dp
• parent 840dp × 0.7 = 588dp

이 계산을 보면 percent는 고정 크기를 정하는 속성이 아니라 parent 크기에 따라 결과가 다시 계산되는 규칙이라는 점이 분명해집니다.

minWidth와 maxWidth로 크기 범위 제한하기

percent만 쓰면 화면이 아주 작거나 클 때 View가 너무 작거나 커질 수 있습니다. 이때 minWidth와 maxWidth를 함께 사용하면 크기 범위를 제한할 수 있습니다.

예를 들어 입력창 폭을 parent의 80%로 잡되 최소 280dp, 최대 520dp로 제한한다고 생각해보겠습니다. 작은 화면에서는 80% 계산값이 너무 작을 수 있고, 큰 화면에서는 너무 길어질 수 있습니다. 이때 minWidth와 maxWidth가 계산 결과를 한 번 더 붙잡아줍니다.

• parent 320dp × 0.8 = 256dp → minWidth 280dp 때문에 280dp
• parent 480dp × 0.8 = 384dp → 제한 범위 안이라 384dp
• parent 900dp × 0.8 = 720dp → maxWidth 520dp 때문에 520dp

<EditText
    android:id="@+id/searchInput"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.8"
    app:layout_constraintWidth_min="280dp"
    app:layout_constraintWidth_max="520dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<EditText
    android:id="@+id/searchInput"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_default="percent"
    app:layout_constraintWidth_percent="0.8"
    app:layout_constraintWidth_min="280dp"
    app:layout_constraintWidth_max="520dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

태블릿에서 maxWidth가 필요한 이유

입력창은 모바일에서는 화면 대부분을 써도 괜찮지만 태블릿에서 너무 길어지면 읽기 어렵습니다. maxWidth를 걸어두면 큰 화면에서도 입력창 폭이 일정 수준 이상 늘어나지 않습니다.

높이 percent 배너 만들기

percent는 width뿐 아니라 height에도 사용할 수 있습니다. 다만 height percent는 parent 높이가 무엇으로 결정되는지 같이 봐야 합니다. parent 높이가 명확하지 않으면 결과를 예측하기 어렵습니다.

width percent는 화면 폭을 기준으로 생각하기 쉬운 편입니다. 반면 height percent는 parent 높이가 wrap_content처럼 내용에 따라 달라지는 구조라면 계산 기준이 애매해질 수 있습니다. 그래서 배너처럼 높이 비율을 쓰고 싶다면 parent 높이가 명확한 화면, 고정 영역, 또는 상위 제약 구조 안에서 쓰는 편이 안전합니다.

<View
    android:id="@+id/headerBanner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.25"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<View
    android:id="@+id/headerBanner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintHeight_default="percent"
    app:layout_constraintHeight_percent="0.25"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

percent가 안 먹는 흔한 이유

가장 흔한 실수는 width나 height를 0dp로 두지 않고 percent 속성만 넣는 것입니다. 또 default를 percent로 지정하지 않거나, percent 값을 70처럼 쓰고 0.7로 쓰지 않는 실수도 자주 나옵니다.

디버깅할 때는 속성을 하나씩 흩어져 보지 말고, 한 방향의 크기 계산 조건을 묶어서 보면 쉽습니다. width percent라면 width, width_default, width_percent, start/end 제약을 한 세트로 확인합니다. height percent라면 height, height_default, height_percent, top/bottom 또는 parent 높이 조건을 함께 확인합니다.

• width 또는 height가 0dp인가
• layout_constraintWidth_default 또는 Height_default가 percent인가
• percent 값을 0.7처럼 0~1 사이로 썼는가
• 0dp 방향의 양쪽 제약이 충분한가

정리

ConstraintLayout percent는 화면 크기에 따라 View 크기를 비율로 조절하는 방법입니다. min과 max는 그 비율 계산 결과가 너무 작거나 커지지 않게 막는 안전장치입니다.

실무에서는 percent만 단독으로 외우기보다 “비율로 먼저 계산하고, min/max로 사용 가능한 범위를 제한한다”라고 이해하면 좋습니다. 그러면 모바일 카드, 태블릿 입력창, 배너 영역처럼 화면 크기에 따라 달라지는 UI를 더 예측 가능하게 만들 수 있습니다.

• percent는 parent 기준 비율이다
• percent는 0dp match_constraint 조건에서 의미가 있다
• minWidth와 maxWidth는 결과 크기의 하한과 상한이다
• 태블릿에서는 maxWidth가 읽기 좋은 폭을 지켜준다

다음 편에서는 chain 기본을 다룹니다. 여러 View를 서로 연결해 spread, spread_inside, packed로 배치하는 방법을 정리하겠습니다.

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

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