Customized circular checkbox in Android

Question

I am trying to get the Google apps photo select UI .. Am using Appcompat checkbox to achieve that with out success. The steps I am working on , 1. Set the checkbox background to custom circular shape 2. define custom shape in xml

This is my check box xml looks like ,

 <android.support.v7.widget.AppCompatCheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/checkBox"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:button="@drawable/custom_checkbox"
            android:background="@drawable/checkbox_drawable"
            />

My custom checkbox background,

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="oval">
    <stroke
       android:width="1dp"
       android:color="#78d9ff"/>
    <solid
    android:color="#79bfea"/>
   </shape>

My checkbox button ,

<selector>
<item android:drawable="@drawable/checkbox_drawable"
      android:state_checked="false"/>
    <item android:drawable="@drawable/selected_check"
      android:state_checked="true"/>
 </selector>

I even changed from android:background to android:button .. nothing gives me the circular check box .. Any help is appreciated ? Should I use floating action bar ? or a view ? Any suggestions ?

score 4 · Answer 1 · answered Jun 06 '17 at 08:05

Custom Checkbox with two drawable image.

1. In .xml file

<android.support.v7.widget.AppCompatCheckBox
   android:id="@+id/checkBox"
   android:layout_width="40dp"
   android:layout_height="40dp"
   android:layout_gravity="center"
   android:background="@drawable/checkbox_selector"
   android:button="@color/white"
   android:checked="true" />

2. Create checkbox_selector.xml in drawable folder.

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

3. Add checked.png and cansel.phd image in drawable folder from the below link

https://icons8.com/icon/set/yes/all

And

https://icons8.com/icon/set/cross/all

4. Checkbox click event

AppCompatCheckBox checkBox = (AppCompatCheckBox) view.findViewById(R.id.checkBox);

checkBox.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {

       if (checkBox.isChecked()){
      checkBox.setChecked(false);
       }else {
         checkBox.setChecked(true);
       }
         }
});

Emma · Answer 2 · 2016-08-06T00:10:58.180

1

You need to give size to your drawable when you want to use it for button attribute.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
   <stroke
       android:width="1dp"
       android:color="#78d9ff"/>
   <solid android:color="#79bfea"/>
   <size
       android:width="20dp"
       android:height="20dp"/>
</shape>

And apply to CheckBox with android:button.

Also since this is a checkbox, you should use selector to have checked and unchecked state.

An example of selector is

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/normal"
          android:state_checked="false"/>
    <item android:drawable="@drawable/checked"
          android:state_checked="true"/>
    <item android:drawable="@drawable/normal"/>
</selector>

edited Aug 06 '16 at 00:10

answered Aug 06 '16 at 00:05

Emma

8,518
1
18
35

I tried this .. all the drawables are greyed out but visible .. only when i click the checked state drawable is displaying correctly. I must be doing some thing wrong.. any idea ? – rana Aug 07 '16 at 05:30
Try adding inside of selector block. This should be for the default state. – Emma Aug 08 '16 at 04:26
If you would like to update question, please consider adding separation line and additional info under the original question and keep original question texts above. Now this answer looks mis-matched with the question. – Emma Aug 08 '16 at 04:31
I used Appcompat checkbox and removed background .. then it worked like expected – rana Aug 09 '16 at 19:50

score 0 · Answer 3 · answered Aug 08 '17 at 14:46

0

You may not be looking now, however i have code which seems to make circular image with checkbox please have a look at my answer given on another thread.

Click here to view answer on another thread

answered Aug 08 '17 at 14:46

chirag90

2,211
1
22
37

Mofor Emmanuel · Answer 4 · 2019-01-10T11:00:24.557

0

check my answer on the question in the link, with that you will be able to create and customise your checkbox without the need of coding

answer here

edited Jan 10 '19 at 11:00

answered Jan 10 '19 at 10:36

Mofor Emmanuel

199
5
13

Please do not post answer as link only – executable Jan 10 '19 at 10:56

score 0 · Answer 5 · answered Oct 20 '22 at 11:13

Create a custom checkbox background custom_check_box_background.xml

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

After this go to the checkbox and call this xml file from the checkbox

<androidx.appcompat.widget.AppCompatCheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"                         
  android:layout_gravity="center"
  android:checked="true"
  android:button="@drawable/custom_check_box_background"                                                                                              
  android:gravity="center" />

This will allow you to switch the icons based on the status of checkbox.
Note: You can add your own drawable as background to obtain your desired shape.

Customized circular checkbox in Android

5 Answers5

Linked