안드로이드 커스텀 체크박스 구현

---

Abstract.

안드로이드에서는 기존에 제공되는 체크박스 이외에도 개인이 직접 커스텀하여 체크박스를 사용할 수 있다. 커스텀 체크박스를 사용하기 위해서는 몇가지 xml 파일을 만들어야 하는데, 먼저 res/drawable 디렉터리에 체크박스 on/off에 해당하는 xml 파일, selector에 해당하는 xml 파일을 작성해야 한다. 이후, 레이아웃 xml 파일에서 앞서 작성한 res/drawable 디렉터리의 xml 파일을 적절히 사용하면 된다.

반응형

---

커스텀 체크박스 구현

커스텀 체크박스를 구현하여 사용하기 위해서 다음과 같은 xml 파일들을 만들어주면 된다. 

 

• res/drawable 디렉터리에 checkbox_on, checkbox_off, checkbox_selector를 작성
• checkbox_selector에 checkbox_on, checkbox_off를 적용
• 레이아웃 파일에서 커스텀 체크박스를 사용

 

1. checkbox_on.xml

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

체크박스를 선택했을 때를 표시하는 부분으로 selector의 재료로 사용한다.

 

2. checkbox_off.xml

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

체크박스를 선택해제 했을 때를 표시하는 부분으로 selector의 재료로 사용한다.

 

3. checkbox_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/checkbox_on" android:state_checked="true" />
    <item android:drawable="@drawable/checkbox_off" android:state_checked="false" />
</selector>

커스텀 체크박스에 해당하는 xml 파일이다.

 

4. activity_main.xml

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="커스텀 체크박스"
            android:textColor="@color/green8"
            android:textSize="20sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <CheckBox
                android:id="@+id/cb_question_1"
                android:background="@drawable/checkbox_selector"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:paddingStart="30dp"
                android:button="@null"
                android:text="체크박스 1"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/cb_question_2"
                android:background="@drawable/checkbox_selector"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:paddingStart="30dp"
                android:button="@null"
                android:text="체크박스 2"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/cb_question_3"
                android:background="@drawable/checkbox_selector"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:paddingStart="30dp"
                android:button="@null"
                android:text="체크박스 3"
                android:textSize="20sp" />

            <CheckBox
                android:id="@+id/cb_question_4"
                android:background="@drawable/checkbox_selector"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:paddingStart="30dp"
                android:button="@null"
                android:text="체크박스 3"
                android:textSize="20sp" />
        </LinearLayout>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

레이아웃 xml 파일에서는 앞서 만든 selector를 적용하여 커스텀 체크박스를 완성한다. 레이아웃에 커스텀 체크박스를 적용하기 위해서는 <CheckBox> 태그에서 android:background="@drawable/checkbox_selector" 연결해야 하며, 무엇보다 중요한 것은 android_button="@null"을 적용해줘야 기존의 기본 체크박스가 표시되지 않는다.

 

Notice : 작성된 xml 파일에서 사용되는 green0, green2 등의 요소들은 res/values 디렉터리의 colors.xml에 색상 정보를 정리해 놓은 것을 가져다 쓴 것이다.

---

커스텀 체크박스 구현 결과

위에서 구현한 커스텀 체크박스를 테스트 해보면 다음과 같다.