Custom 버튼 만들기

대부분의 앱은 android 제공하는 버튼을 Custom해서 개발됩니다.

custom 버튼을 만들기 위해 Nine patch 이미지를 사용하기도 하지만 drawable 객체를 만들어서 버튼을 custom하는 것이 여러가지로(확장성, 재활용성, …) 더 좋습니다.

이 글에서는 drawable 객체를 사용해 Custom 버튼을 만드는 법에 대해 설명합니다.

 

이 글에 설명된 내용에 대해 조금 더 자세히 알고 싶으신 분들은 아래 사이트 참고하시면 됩니다.

https://developer.android.com/guide/topics/resources/drawable-resource

드로어블 리소스  |  Android 개발자  |  Android Developers

 

라운드 처리된 사각 버튼 만들기

버튼의 각 모서리가 라운드 처리된 버튼을 만들어 보도록 하겠습니다.

아래와 같이 두 개의 drawable(default, press) xml 파일을 만들어 줍니다.

// dra_round20_orange.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorOrange"/>
    <corners android:radius="20dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/colorOrange" />
</shape>

// dra_round20_tomato.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorTomato”/>
    <corners android:radius="20dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/colorTomato" />
</shape>

 

다음으로 위 두 개의 drawable 파일을 사용할 selector xml 파일을 아래와 같이 만들어줍니다.

// button_round20_orange_tomato
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/dra_round20_tomato" />
    <item android:state_selected="true" android:drawable="@drawable/dra_round20_tomato" />
    <item android:drawable="@drawable/dra_round20_orange" />
</selector>

 

마지막으로 아래와 같이 버튼의 background에 해당 selector xml을 연결해주면 끝 입니다.

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/btnListTypeDefault"
    …
    android:background="@drawable/button_round20_orange_tomato"
    android:text="@string/listtype_default"
    android:textColor="@color/colorWhite"
    android:textStyle="bold"
    android:textSize="@dimen/dp18"/>

 

버튼의 일부 모서리만 round 처리된 버튼 만들기

drawable xml 생성 시 shape를 “rectangle”로 설정하고 corners를 라운드 처리해주면 됩니다.

아래와 같이 만들면 상단 좌,우 모서리가 라운드 처리된 사각형이 생성됩니다.

* stroke는 버튼의 외곽선을 나타냅니다. 불필요한 경우 삭제해도 무방합니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorOrange”/>
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
    <stroke
        android:width="1dp"
        android:color="@color/colorOrange" />
</shape>

 

원형 버튼 만들기

동그란 버튼을 만들기 위해서는 drawable xml 파일의 shape을 아래와 같이 rectangle에서 oval로 변경해주고 불필요해진 corners를 삭제하면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=“oval”>
    <solid android:color="@color/colorOrange”/>
    <stroke
        android:width="1dp"
        android:color="@color/colorOrange" />
</shape>

 

그라데이션 버튼 만들기

위는 오렌지 색이고 하단은 토마토 색상으로 변화하는 버튼을 만들기 위해서는 drawable xml에서 gradient 태그를 사용해주면 됩니다.

angle을 조정해주면 그라데이션 방향을 조정할 수 있으며 angle을 설정하지 않으면 기본 왼쪽에서 오른쪽으로 그라데이션이 적용됩니다.

아래 샘플에서는 위에서 아래로 적용되어야 하므로 angle을 270으로 설정하였습니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    <gradient
        android:startColor="@color/colorOrange"
        android:endColor="@color/colorTomato"
        android:angle="270"/>
    <corners android:radius="20dp"/>
</shape>

 

버튼에 아이콘 추가하기

버튼에 추가되는 아이콘의 위치에 따라 Button에서 지원하는 아래 drawable 속성 중 한개를 선택해서 사용하면 됩니다.

   - drawableStart

   - drawableEnd

   - drawableTop

   - drawableBottom

 

 

* 참고:

위 설명된 내용에 대한 샘플 소스는 아래 github에 있습니다.

github.com/lee-kil-jae/MyListCollection