Android Rounded Checkbox

Android CheckBox class is the subclass of CompoundButton class. , Android CheckBox Allows User to Select one or More options from a set

We have seen basic example android checkbox and styling checkbox .

In this tutorial we will seen how to add rounded checkbox using vector drawable .

Step 1
Adding Vetcor Drawable , Right click on res folder of project res > New > Vector Asset

Step 2 
Configuring Vector Asset , Right click on clip art icon 

Step 3
Search for Check , Select icon and then click on Ok

Step 4 
You can edit name and color code of the icon , click Next and then finish Now you can see icon gets added to the drawable folder

Similarly Create UnChecked Vector Drawable


Checked CheckBox Vector Drawable

android:fillPath attribute / property you can change the color of vector drawable.

file : ic_checkbox_checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#3db5ea"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z"/>
</vector>

UnChecked CheckBox Vector Drawable

android:fillPath attribute / property you can change the color of vector drawable.

file:ic_checkbox_unchecked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#424242"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

Add CheckBox Selector 

file: checkbox_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_checkbox_checked" android:state_checked="true"/>
    <item android:drawable="@drawable/ic_checkbox_unchecked"/>
</selector>

Style

1. Define a style tag and extend it to @style/Widget.AppCompat.CompoundButton.CheckBox inside style.xml file.
2. Add Above Defined checkbox_selector to tht style tag .

<style name="CustomCheckbox02" parent="@style/Widget.AppCompat.CompoundButton.CheckBox">
 <item name="android:button">@drawable/checkbox_selector</item>
 <item name="android:background">@android:color/transparent</item>
</style>

style attribute of checkbox is used to add above defined style .

<CheckBox android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:id="@+id/checkbox"
   android:text="checkbox"
   style="@style/CustomCheckbox02"/>