[안드로이드] 버튼 스타일 지정하기

안드로이드에서 기본으로 버튼을 사용하면 Primary 컬러대로 색상이 나오고 기본 값대로 나온다. 색상 값을 지정하지 않았다면, 안드로이드 버튼 색이 보라색으로 뜬다거나 원하는 값이 세팅이 되지 않는 것을 확인할 수 있을 것이다. 

하지만, 그렇게 쓰는 사람은 아마 없을 것(?)이다. 개발 초창기에는 배경의 컬러만 변경해서 사용하거나, 백그라운드 이미지를 변경하였다. 

이번에는, Button에 style을 지정하여 사용하는 방법을 알아볼 것이다. 

프로젝트 디자인 시안중 일부

만들어야 될 버튼은 위와 같다. radius는 8dp, top과 bottom의 padding은 16dp이다.

values > style.xml (없다면 생성)에 버튼 스타일을 생성할 것이다.

<style name="button.fill" parent="Widget.MaterialComponents.Button">
        <item name="cornerRadius">@dimen/spacing_medium</item>
        <item name="android:textAppearance">@style/h4</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:paddingTop">@dimen/spacing_default</item>
        <item name="android:paddingBottom">@dimen/spacing_default</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
</style>

이렇게 버튼 스타일을 생성하고나서 사용할 때는

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:layout_marginHorizontal="@dimen/spacing_default"
        style="@style/button.fill"
        android:text="저장하기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 불러와서 사용하면 된다. 

근데 좀 이상한 부분을 발견하게 되었다. 개발자 모드를 틀어 레이아웃을 확인해보니 버튼의 위와 아래에 내가 설정해두지 않은 margin 값이 있었다.

Button 윗 부분으로 비어있는 모습 확인

[MaterialButton] Change button insets programmatically especially since they don't default to 0dp · Issue #526 · material-comp

위 링크를 보면, insetTop과 insetBottom이 주어져있다는 사실을 알 수 있고 사용자가 코드에서 조정할 수 있다는 사실을 알았다. 

그래서, 우리는 따로 margin을 버튼을 사용할 때 줄거기 때문에 없애주어야 겠다 생각을 했다. (디자인과 다르게 작업 될 수 있기 때문)

<style name="button.fill" parent="Widget.MaterialComponents.Button">
        <item name="cornerRadius">@dimen/spacing_medium</item>
        <item name="android:textAppearance">@style/h4</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:paddingTop">@dimen/spacing_default</item>
        <item name="android:paddingBottom">@dimen/spacing_default</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
</style>

이렇게 insetTop과 insetBottom의 값을 0으로 두었다. 그럼 결과를 확인해보자.

margin이 지워진 모습을 확인할 수 있다. 

이렇게 디자인 된 것과 같이 버튼을 만드는 방법을 알아보았습니다. 잘못된 내용이나 궁금한 점은 댓글로 달아주세요!