Create a rounded checkbox with boarder

Question

This is how I create a rounded checkbox with boarder. But the boarder is in square shape,not circle.

CheckBox

<CheckBox
            android:id="@+id/checkBox"
            android:paddingTop="15dp"
            android:paddingRight="25dp"
            android:layout_width="25dp"
            android:layout_marginLeft="320dp"
            android:layout_height="25dp"
            android:button="@drawable/xml_button"
            android:background="@drawable/xml_background"/>

xml_button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="oval">
            <solid android:color="#00FF00" />
            <size
                android:width="24dp"
                android:height="24dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:shape="oval">
            <solid android:color="#AAA" />
            <size
                android:width="24dp"
                android:height="24dp" />
        </shape>
    </item>
</selector>

xml_background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="3dp" />
    <stroke
        android:width="2dp"
        android:color="#CCC" />
    <padding
        android:left="34dp"
        android:top="5dp"
        android:right="10dp"
        android:bottom="5dp" />
</shape>

Output

Any help would be greatly appreciated. Thanks.

Hey, not going to post as an answer, as this is seriously day 2 on Android (currently iOS), but... It seems your xml_background defines a radius of only 3dp (rather than, say... half your height) and a stroke that is colored gray (CCC). I'd say you don't want that stroke on it at all. just my thoughts, -e — eric, Oct 08 '16 at 06:27

sushildlh · Accepted Answer · 2016-10-08T06:43:28.317

use this xml as background in your radio button .....

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:color="#1E90FF" android:width="10dp" />
            <solid android:color="#87CEEB"/>
        </shape>
    </item>
</selector>

Note:- I think your issue happened because of padding in round.xml

Output when unchecked ...

Output when checked ...

Create a rounded checkbox with boarder

1 Answers1