Custom UI 001 — Checkbox

Today I am gonna show you way of creating custom checkbox instead of the default android checkbox. For that you have to create 3 drawable.

1. Drawable for check state
2. Drawable to Uncheck state
3. Drawable to selection

create a drawable under the drawable folder with name checkbox_check_background and add following code to that

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:height="26dp"
                android:width="26dp" />
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="oval">
            <size
                android:width="26dp"
                android:height="26dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp"
        android:drawable="@drawable/ic_check_white"
        android:width="26dp"
        android:height="26dp"></item>
</layer-list>

You can use whatever icon for ic_check_white.This will create nice round shape.

Then create a another drawable with the name checkbox_uncheck_background and add following code to that

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:height="28dp"
                android:width="28dp" />
            <solid android:color="@color/ash2" />
        </shape>
    </item>
</layer-list>

Now we need to create selection drawable to handle check and uncheck state. Now create a drawable with name checkbox_custom and add following code to that

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:drawable="@drawable/checkbox_check_background" />
    <item android:state_checked="false" android:drawable="@drawable/checkbox_uncheck_background" />
</selector>

Now the all drawables are completed. Now you have to add that as the button property in checkbox like this.

<CheckBox
    android:id="@+id/chkSenThemeListThemeCheck"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:button="@drawable/checkbox_custom"
    />

Checkbox UI