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 ?

Solution 1

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);
       }
         }
});

Solution 2

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>

Comments

[rana]

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 ?

[Emma]

Try adding <item android:drawable="@drawable/checkbox_drawable"/> inside of selector block. This should be for the default state.

[Emma]

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.

[rana]

I used Appcompat checkbox and removed background .. then it worked like expected

[executable]

Please do not post answer as link only