androidandroid-checkbox

How to create the checkBox in circular shape?


I am facing the issue in creating the checkbox in circular shape in android. I tried many methods but my problem is not solved.I created the shapes and applied to the checkbox then also problem is not solved.Please help me how to create the check box in circle shape .enter image description here

How to create the circular checkbox like shown image.


Solution

  • 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.