[Android] Custom Button, Padding 잘 적용하기

 

TL;DR 

Background를 설정하여 버튼을 쉽게 커스텀할 수 있다.

이 경우에 버튼의 최소 크기 설정으로 인하여 Padding이 잘 설정되지 않는다.

원하는 만큼의 Padding을 정확히 설정해주기 위해서는

android:minWidth
android:minHeight

두 개 필드의 값을 0dp로 설정하여 기본 사이즈 값을 제거해야 한다.

 

본론

안드로이드 앱에서 버튼은 당연하게 사용되는 아주 중요한 컴포넌트다

안드로이드 버튼을 그냥 사용하는 일은 거의 없고 대부분 커스텀 된 디자인을 적용하여 사용할 것이다.

안드로이드 버튼을 커스텀하는 가장 대표적인 방식으로 Background Drawable XML 파일을 만들어 디자인을 설정하고 버튼의 Background로 설정하여 커스텀하는 방법이 있다.

Background Drawable XML을 만들어 커스텀하는 방법은 구글에 널려있으니 검색해서 참고하길 바라며,

이 글에서는 커스텀 버튼에 Padding을 올바르게 설정하는 방법을 설명한다.

 

디자이너가 준 커스텀 버튼

 

디자이너에게 위와 같은 커스텀 된 디자인의 버튼을 받았다.

Background drawable xml 을 생성하여 모서리 곡선 넣고 배경색 설정하고, color xml 생성하여 텍스트 컬러까지 설정했다.

<Button
            android:id="@+id/button"
            android:background="@drawable/button_fill_radius_big_primary_background"
            android:textColor="@color/button_fill_primary_text"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="재전송" />

 

이제 Layout에 Background, TextColor 설정하고 Padding도 완벽하게 설정했다.

앱을 빌드하고, 결과물을 보자

(망한) 결과물

???

디자이너가 설정해준 Padding 값을 정확히 넣어줬는데, 텍스트 사이즈도 올바르게 적용했는데 이상하게 뚱뚱한 결과물이 나왔다.

실제로 설정된 Padding 값이 렌더링 보다 크게 보이는 것일까?

padding 값을 1/2로 시켜보자

<Button
            android:id="@+id/button"
            android:background="@drawable/button_fill_radius_big_primary_background"
            android:textColor="@color/button_fill_primary_text"
            android:paddingTop="4dp"
            android:paddingBottom="4dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="재전송" />

(망한) 결과물 2

 

Padding 값을 절반으로 설정하여도 버튼은 전혀 작아지지 않았다.

기존과 동일한 사이즈를 그대로 유지하고 있다.

 

왜 Padding을 설정했는데 내 맘대로 설정이 안 되고 크고 뚱뚱한 버튼 결과물이 나온 것일까?

 

반대로 Padding 값을 키워보면 어떻게 될까

Padding을 기존의 3배로 설정해봤다. 어떻게 될까?

<Button
            android:id="@+id/button"
            android:background="@drawable/button_fill_radius_big_primary_background"
            android:textColor="@color/button_fill_primary_text"
            android:paddingTop="24dp"
            android:paddingBottom="24dp"
            android:paddingLeft="48dp"
            android:paddingRight="48dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="재전송" />

크고 아름다운 결과물

 

처음보다 3배 값을 주었더니 이번에는 버튼이 커졌다.

설정한 Padding이 잘 적용된 것으로 보인다.

 

우리는 이제 합리적인 의심을 할 수 있다.

Padding이 잘 안 먹었다 -> Padding을 더 작게 했는데 모양은 전혀 달라지지 않았다 -> Padding 값을 키우니 버튼이 커졌다.

= 버튼에 기본적으로 최소 크기가 설정되어있구나! 

 

안드로이드 Button Class를 살펴보자

//Button.java

package android.widget;

@RemoteView
public class Button extends TextView {

    public Button(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.buttonStyle);
    }

}

생성자를 살펴보면 buttonStyle이 설정된 것을 확인할 수 있다.

이 스타일에 어떤 것들이 설정되어있는지는 확인하지 못했으나, 최소 사이즈 등 기타 값들이 설정됨을 확인할 수 있다.

 

해결방법

버튼 디자인이 이상한 원인을 찾았다.

버튼에 최소 크기가 설정되어 우리가 원하는(최소 크기보다 작은) 디자인의 버튼을 만들 수 없었다. 

그렇다면 우리는 이 것을 어떻게 해결할 수 있을까

 

버튼의 속성을 오버라이드, 덮어쓰기 해주면 된다.

버튼의 최소 사이즈를 설정해주는 옵션을 아래와 같다

android:minWidth
android:minHeight

 

위 두 가지 옵션의 값을 0dp로 즉, 최소 크기 없음으로 설정하여 우리가 원하는 사이즈를 그대로 적용할 수 있도록 해준다.

 

<Button
            android:id="@+id/button"
            android:background="@drawable/button_fill_radius_big_primary_background"
            android:textColor="@color/button_fill_primary_text"
            android:minWidth="0dp"
            android:minHeight="0dp"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="재전송" />

minWidth, minHeight를 0dp로 설정하였다.

결과를 보자

최소 크기 제거한 결과물

버튼이 많이 날씬해졌다.

내가 원하던 사이즈로 잘 설정된 것 같다

디자이너가 준 것과 비교해보자

결과물

 

디자이너 요구

 

디자이너의 요구에 맞게 잘 구현된 것을 확인할 수 있었다. (조금 다른 것 같다면 기분 탓이다)

 

결론

안드로이드 버튼에는 최소 크기가 설정되어 있다.

그러하여 일정 값 미만의 버튼의 경우, 원하는 디자인의 결과물을 만들 수 없다.

최소 값보다 작은 버튼을 만들기 위해 최소 크기를 0으로 설정하여 문제를 해결할 수 있다.

 

디자이너가 전달해준 디자인을 그대로 앱에 구현하는 것은 언제나 힘든 일이다.

오늘의 주제와 같이 작은 디자인 팁들을 잘 기억하고 있다가
(디자이너와 이건 못한다고 싸우지 말고) 디자이너의 요구에 맞게 이쁘고 멋진 앱을 구현할 수 있었으면 좋겠다.