How to create the checkBox in circular shape?

After spending some time, i have created this template, which you can use. You may need to modify as required.

In activity.xml

<CheckBox
    android:id="@+id/checkb"
    android:layout_width="115dp"
    android:layout_height="50dp"
    android:button="@drawable/custom_checkbox"
    android:scaleX="3"
    android:scaleY="3"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="15dp"
    android:layout_marginEnd="15dp" />

create a new xml in drawable folder called custom_checkbox.xml

<?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/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

create a new xml in drawable folder called checked.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <corners android:radius="1dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#777" />
                    <gradient
                        android:startColor="#990000"
                        android:centerColor="#990000"
                        android:endColor="#990000"
                        android:angle="270" />
                    <size
                        android:width="30dp"
                        android:height="30dp" />
                </shape>
                </item>

            <item
                android:width="8dp"
                android:height="2dp"
                android:top="20dp"
                android:left="6dp">
                <rotate
                    android:fromDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                android:width="19dp"
                android:height="2dp"
                android:top="16dp"
                android:left="9dp">
                <rotate
                    android:fromDegrees="-45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

create a new xml in drawable folder called unchecked.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <corners android:radius="1dp" />
        <stroke
            android:width="1dp"
            android:color="#777" />
        <gradient
            android:startColor="#990000"
            android:centerColor="#990000"
            android:endColor="#990000"
            android:angle="270" />
        <size
            android:width="30dp"
            android:height="30dp" />
    </shape>

When unchecked it looks as below. (you can add the code between from checked.xml and modify the top and left to give X when checkbox is not checked)

unchecked State

When checked it will look as below

checked state

If this works mark it as answer.

Leave a Comment