Defining custom-checkbox in android

Question

How to make a custom check-Box in android

my current XML::

<LinearLayout
            android:id="@+id/linearLayout_individualdays"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_below="@+id/linearLayout_type_of_days"
            android:gravity="center|top"
            android:orientation="horizontal"
            android:paddingLeft="5dp"
            android:paddingTop="10dp"
            android:visibility="gone" >

            <CheckBox
                android:id="@+id/checkBox1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mon" />

            <CheckBox
                android:id="@+id/checkBox2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tue" />

            <CheckBox
                android:id="@+id/checkBox3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Wed" />

            <CheckBox
                android:id="@+id/checkBox4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Thu" />

        </LinearLayout>

Out-Put::

But How to make something like below::

• here blue border shows its selected
• else its not selected
• It has to be a check-box

Hope i am clear !

Answer 1

For your requirement I prefer you to use CheckedTextView instead of CheckBox.Here is the code what you wanted.

 <CheckedTextView
    android:id="@+id/ctv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Mon" 
    android:textSize="22sp"
    android:layout_margin="30dp"
    android:checked="true"
    android:background="@drawable/chk_indicator"
    android:padding="15dp"
   />    

create 3 xml ( chk_indicator.xml , chk_bg.xml , chk_pressed_bg.xml )in drawable folder

chk_indicator.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/chk_pressed_bg" />

<item android:drawable="@drawable/chk_bg" />

</selector>

chk_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle" >

         <solid android:color="#ffffff"/>

         <stroke android:width="3dp"
             android:color="#ababab"/>

        <corners android:radius="10dp"/>
    </shape>
    </item>
</layer-list>

chk_pressed_bg.xml

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <shape android:shape="rectangle" >

         <solid android:color="#ffffff"/>

         <stroke android:width="3dp"
             android:color="#5e9eff"/>

        <corners android:radius="10dp"/>
    </shape>
    </item>
 </layer-list>

output:

set onClick event on CheckedTextView

 ((CheckedTextView)findViewById(R.id.ctv)).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {

            boolean isChecked = ((CheckedTextView)findViewById(R.id.ctv)).isChecked();

            if(isChecked)
              ((CheckedTextView)findViewById(R.id.ctv)).setChecked(false);
            else
              ((CheckedTextView)findViewById(R.id.ctv)).setChecked(true);




        }
    });

Answer 2

Adding to zohreh's answer, you could get the checkbox with text only and get rid of the checkbox icon as shown below,

For this, set the button drawable to null in the constructor of the custom checkbox class, as shown below,

public MyCheckBox(Context context, AttributeSet attrs) {
    super(context, attrs);
    // Don't show the checkbox.
    setButtonDrawable(null);
}

Answer 3

use this code

select.xml in drawable folder

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >

        <solid android:color="#ffffff" >
        </solid>

        <stroke
            android:width="2dp"
            android:color="#ff0000" >
        </stroke>
<corners android:radius="5dp" />

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    </shape>

deselect.xml in drawable folder

 <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >

        <solid android:color="#ffffff" >
        </solid>

        <stroke
            android:width="2dp"
            android:color="#000000" >
        </stroke>
    <corners android:radius="5dp" />

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    </shape>

and custom checkbox

public class checkbox extends CheckBox{



    public checkbox(Context context, AttributeSet attrs) {
            super(context, attrs);
            //setButtonDrawable(new StateListDrawable());
        }
        @Override
        public void setChecked(boolean t){
            if(t)
            {
                this.setBackgroundResource(R.drawable.select);
            }
            else
            {
                this.setBackgroundResource(R.drawable.deselect);
            }
            super.setChecked(t);
        }
        }

checkbox

 <com.example.checkbox.checkbox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:checked="true"
        android:text="checked" />

you can change color in select.xml and deselect.xml to thing that you want

Answer 4

<CheckBox
    android:id="@+id/DinnerRG_ID"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="2dp"
    android:background="@drawable/yourbuttonbackground"
    android:button="@android:color/transparent"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:text="Wed"
    android:textSize="15dp" />

Try like this.