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 .
How to create the circular checkbox like shown image.
For example: cursor: pointer; position: absolute; width: 20px; height: 20px; top: 0; border-radius: 10px; The last line (border-radius: 10px) will give you a checkbox with rounded corners.
Note: Checkboxes do not support shape theming and are only rounded square checkboxes.
The Material Design checkbox has a shape property and you can set CircleBorder() to it and it will be round.
To define the click event handler for a checkbox, add the android:onClick attribute to the <CheckBox> element in your XML layout. The value for this attribute must be the name of the method you want to call in response to a click event. The Activity hosting the layout must then implement the corresponding method.
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)
When checked it will look as below
If this works mark it as answer.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With