Customize Android Check Box

Question

i need to customize my check box. What I need is to fill the check box with white color and check must be in black color. I've followed several examples and nothing worked as expected.

Here is my .xml

 <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:button="@drawable/check_box_style"/>

Can you tell me how should my check_box_style designs. Thanks.

or If anyone can explain me how to do this i'm greateful.

-Edit-

11-18 15:49:56.970  16291-16291/com.myayubo E/AndroidRuntime﹕ FATAL EXCEPTION: main
Process: com.myayubo, PID: 16291
android.view.InflateException: Binary XML file line #28: Error inflating class android.widget.CheckBox
        at android.view.LayoutInflater.createView(LayoutInflater.java:620)
        at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
        at android.view.LayoutInflater.onCreateView(LayoutInflater.java:669)
        at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:694)
        at android.view.LayoutInflater.rInflate(LayoutInflater.java:755)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:492)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
        at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
        at com.myayubo.CustomAdapter.getView(CustomAdapter.java:25)
        at android.widget.AbsListView.obtainView(AbsListView.java:2338)
        at android.widget.ListView.makeAndAddView(ListView.java:1812)
        at android.widget.ListView.fillDown(ListView.java:698)
        at android.widget.ListView.fillFromTop(ListView.java:759)
        at android.widget.ListView.layoutChildren(ListView.java:1645)
        at android.widget.AbsListView.onLayout(AbsListView.java:2149)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1888)
        at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1742)
        at android.widget.LinearLayout.onLayout(LinearLayout.java:1651)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.support.v4.widget.DrawerLayout.onLayout(DrawerLayout.java:931)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:515)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:450)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.support.v7.internal.widget.ActionBarOverlayLayout.onLayout(ActionBarOverlayLayout.java:493)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:515)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:450)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1888)
        at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1742)
        at android.widget.LinearLayout.onLayout(LinearLayout.java:1651)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.widget.FrameLayout.layoutChildren(FrameLayout.java:515)
        at android.widget.FrameLayout.onLayout(FrameLayout.java:450)
        at android.view.View.layout(View.java:15148)
        at android.view.ViewGroup.layout(ViewGroup.java:4866)
        at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:2336)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2042)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1208)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6274)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:788)
        at android.view.Choreographer.doCallbacks(Choreographer.java:591)
        at android.view.Choreographer.doFrame(Choreographer.java:560)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:774)
        at android.os.Handler.handleCallback(Handler.java:808)
        at android.os.Handler.dispatchMessage(Handler.java:103)
        at android.os.Looper.loop(Looper.java:193)
        at android.app.ActivityThread.main(ActivityThread.java:5299)
        at java.lang.reflect.Method.invokeNative(Native Method)
        at java.lang.reflect.Method.invoke(Method.java:515)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:829)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:645)
        at dalvik.system.NativeStart.main(Native Method)

Possible duplicate of [Android checkbox style](http://stackoverflow.com/questions/10135499/android-checkbox-style) — Rami, Nov 18 '15 at 09:12

Mathew Scott Plüg · Answer 1 · 2015-11-18T09:44:45.867

2

From what I can see after a bit of research, this is your best bet

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:buttonTint="@android:color/black"/>

It works for me but I am not sure if it is applicable to you, hope this helps!

edited Nov 18 '15 at 09:44

answered Nov 18 '15 at 09:35

Mathew Scott Plüg

33
7

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

You need two drawables with desired look of the checkboxes and define drawable selector, like it's described here: https://stackoverflow.com/a/7783892/1099716

There are plenty VectorDrawable icon generators as well as png generators which can be used as drawables. One of them can be found here: https://materialdesignicons.com/

There is also VectorDrawable compat for android 14+ https://github.com/wnafee/vector-compat

For more info regarding drawables usage take a look at the following tutorial http://www.vogella.com/tutorials/AndroidDrawables/article.html

edited May 23 '17 at 12:08

Community

1
1

answered Nov 18 '15 at 09:31

Access Denied

8,723
4
42
72

What should I put in each variable? android:drawable= That part I cannot understand :( – Nov 18 '15 at 09:38
You can create shape drawable http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape, android uses png-s as drawable for each state. Since API 21 you can use Vector drawable http://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html – Access Denied Nov 18 '15 at 09:47
Android draws pngs for each resolution and refers to it in selector. – Access Denied Nov 18 '15 at 09:51
You can also use support library with vectordrawable https://github.com/wnafee/vector-compat – Access Denied Nov 18 '15 at 09:55
Can you more supportive how my vector drawable must be? I'm very new to Andrdoid. sry for silly questions :) – Nov 18 '15 at 10:00
Look at the following sample, it draws heart shape: http://developer.android.com/training/material/drawables.html – Access Denied Nov 18 '15 at 10:03
So, I need to create a heart.xml and pass it to android:drawable ryt? – Nov 18 '15 at 10:05
In order to get vector drawable icons use the following online tool https://materialdesignicons.com/. It has option to save as vectordrawable. – Access Denied Nov 18 '15 at 10:08
you need to put it in res/drawable and refer to it in selector @drawable/heart – Access Denied Nov 18 '15 at 10:15
It gives an error. Can you look at my edited question? – Nov 18 '15 at 10:21
It's hard to say what is wrong. Exception is similar to "something went wrong". Get back to the working version and try to use images as drawables then when it works carry on and try VectorDrawables or stay with images if it's not critical to you. – Access Denied Nov 18 '15 at 10:26
Thanks. Used a image. Working now. – Nov 18 '15 at 10:28

score 0 · Answer 3 · answered Nov 18 '15 at 09:57

0

You can set android drawable xml with states as

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

then you need to assign it android:button or android:background

answered Nov 18 '15 at 09:57

rmammadli

76
1
7

1

I'm comfortable with this. What I don't know is to make yourdrawable1 and yourdrawable2 :) – Nov 18 '15 at 10:04
Yourdrawable1 and 2 should be image or bitmap file with xml and your desired style. – rmammadli Nov 18 '15 at 10:25
Yeah! I'm comfortable with images. How can I create a bitmap file with white rectangle? – Nov 18 '15 at 10:27
Also, You can create yourdrawable1 and 2 with shape. Example for shape file: – rmammadli Nov 18 '15 at 10:31

score 0 · Answer 4 · answered Apr 26 '23 at 09:32

All you need two drawable one for checked state and other for unchecked or default state. You can then create a background drawable selector(xml) and apply it as background to your checkbox. As mentioned below

<?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/ic_checkbox_checked_24" />
    <item
        android:state_checked="false"
        android:drawable="@drawable/ic_checkbox_unchecked_24" />
    <item
        android:drawable="@drawable/ic_checkbox_unchecked_24"/>
</selector>

No your checkbox in xml should look like this.

<CheckBox
      android:id="@+id/check_box"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:button="@null"
      android:background="@drawable/checkbox_background_drawable"/>

Make sure you make the button attribute of checkbox to null.

Customize Android Check Box

4 Answers4