Android: Set color of CheckBox

Question

I've searched a number of places and don't seem to be able to figure out the CheckBox drawable for the border of the check box. Can anyone point me in the correct direction?

Here is what it looks like unchecked (Can barely see the box)

enter image description here

Here is the checked state

enter image description here

Here is what I'm trying to make it look like.

enter image description here

you can set image as background to checkBox.so take image having border and set background of it. — AkashG, Jul 13 '12 at 04:53
Setting the `android:buttonTint="@color/mybrown"` is an easy way to change the checkbox color. — shauvik, Jun 24 '15 at 22:54
android:buttonTint="@color/mybrown" does change the color of check box border. The only drawback is , it also changes the color of the tick which you may not want. — jetty, Aug 18 '15 at 07:56

score 56 · Accepted Answer · edited Sep 11 '15 at 13:28

56

You can use a custom check box xml file for this. Save the below xml code in drawables folder, name it custom_checkbox.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/cbchk_blue"
        android:state_focused="false">
    </item>
    <item android:state_checked="true" 
        android:drawable="@drawable/cbchk_blue"
        android:state_focused="true">
    </item>
    <item android:state_checked="false" 
        android:drawable="@drawable/cbunchk_blue"
        android:state_focused="false">
    </item>
    <item android:state_checked="false" 
        android:drawable="@drawable/cbunchk_blue"
        android:state_focused="true">
    </item>
</selector>

Then use this file as background of your checkbox like this:

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

Here I am uploading my own images which I used in place of cbchk_blue and cbunchk_blue

Unchecked CheckBox

edited Sep 11 '15 at 13:28

VSB

9,825
16
72
145

answered Jul 13 '12 at 04:51

Ram kiran Pachigolla

20,897
15
57
78

Makes a lot of sense seeing it laid out like that. I had a lot of trouble finding good examples. – Kirk Jul 13 '12 at 21:56
Ughhhh, why does width and height need to be explicitly specified for a checkbox, but for any other view I've used a shape definied in a (rectangular) drawable for its background resource, the view's background color would assume the shape's "solid" attribute value, and the "stroke" would paint the view's perimeter perfectly. I find with a checkbox, if width/height are omitted, then the shape collapses to 0 !!! Thanks. – samus May 24 '13 at 20:12
1

an addition set the selector as the button drawable of the checkbox. – Rat-a-tat-a-tat Ratatouille Mar 05 '14 at 06:55
5

If some noob like me finds this answer and and doesn't now how to use it: create an xml-file in your drawable directory, copy-paste the coding above, and set the created style as button-property (filename of the xml=style-name) for your checkbox. see http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList for details – user2345998 Mar 13 '15 at 12:52
@user2345998 I edited the answer to make it more clear. – VSB Sep 11 '15 at 12:15

score 34 · Answer 2 · edited May 23 '17 at 11:46

34

Same problem also happens when you use theme Holo Dark for Activity and white background. So checkbox has Dark style. Simple workaround is directly set background from Android's Holo Light:

int id = Resources.getSystem().getIdentifier("btn_check_holo_light", "drawable", "android");
checkBox.setButtonDrawable(id);

You can find great overview how all this things work in following answer: https://stackoverflow.com/a/10139809/1170154

edited May 23 '17 at 11:46

Community

1
1

answered Jan 17 '14 at 10:35

Yuriy

1,466
2
14
30

Exactly what I've been looking for the past few hours. Thanks!! – jakeneff Sep 10 '14 at 20:39
1

this should be the excepted answer. exactly what i needed – Rob85 Aug 07 '15 at 14:34
Helped me a lot! Thanks stranger! – Timur Suleimanov Aug 18 '15 at 10:18
I'll just throw in a me too on this as well. This is much easier to implement than the accepted answer. I'm developing in Xamarin. – crthompson Feb 26 '16 at 18:34

score 27 · Answer 3 · edited Feb 24 '15 at 16:56

27

Since Android 5 and API level 21 it is possible to freely choose colors of checkboxes (and many other widgets). Add the following to your values-v21/styles.xml (while making sure you have a fallback for earlier APIs in values/styles.xml:

<style name="CustomCheckBox">
    <item name="android:theme">@style/CheckBoxAppTheme</item>
</style>

<style name="CheckBoxAppTheme">
    <item name="android:colorAccent">
        @color/theFillColorInCheckedState
    </item>
    <item name="android:colorControlNormal">
        @color/theBorderColorInUncheckedState
    </item>
    <item name="android:colorControlHighlight">
        @color/theBackgroundColorWhenFocusingTheCheckBox
    </item>
</style>

Then you just have to apply the style to your checkbox in your layout:

<CheckBox
    style="@style/CustomCheckBox" />

That's it, the checkboxes appear in your favourite colours!

edited Feb 24 '15 at 16:56

JJD

50,076
60
203
339

answered Jan 06 '15 at 17:05

Phocacius

1,127
1
13
23

4

I think you are missing `android:colorControlActivated`. – JJD Feb 24 '15 at 17:00
@Phoca, how to create a fallback style for version prior level 21? – lagos Aug 11 '15 at 08:16
1

For styles prior level 21 you set only `` and import ` `compile com.android.support:appcompat-v7:22.2.1` – lagos Aug 11 '15 at 08:30
this solution worked for me when finally noticed is colorAccent is in the 'android:theme' and not styles. – Ricardo stands with Ukraine Feb 29 '16 at 16:46

score 15 · Answer 4 · answered Jul 20 '16 at 00:49

Ok, so I'm sorry but most of these answers are incomplete or have some minor bug in them. 'Styling' controls across different versions of Android is an epic pain in the ass. After pulling my hair out for days on a project with very tight design constraints I finally broke down and wrote a test app and then really dug in and tested the various solutions out there for styling switches and check-boxes, since when a design has one it frequently has the other. Here's what I found...

First: You can't actually style either of them, but you can apply a theme to all of them, or just one of them.

Second: You can do it all from XML and you don't need a second values-v21/styles.xml.

Third: when it comes to switches you have two basic choices if you want to support older versions of Android (like I'm sure you do)...

You can use a SwitchCompat and you will be able to make it look the same across platforms.
You can use a Switch and you will be able to theme it with the rest of your theme, or just that particular switch and on older versions of Android you'll just see an unstyled older square switch.

Ok now for the simple reference code. Again if you create a simple Hello World! and drop this code in you can play to your hearts content. All of that is boiler plate here so I'm just going to include the XML for the activity and the style...

activity_main.xml...

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' SwitchCompat" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_item"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"
        app:switchTextAppearance="@style/BrandedSwitch.text"
        app:theme="@style/BrandedSwitch.control"
        app:showText="true" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed SwitchCompat" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switch_item2"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed Switch" />

    <Switch
        android:id="@+id/switch_item3"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' Switch" />

    <Switch
        android:id="@+id/switch_item4"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:textOff="OFF"
        android:textOn="ON"
        android:theme="@style/BrandedSwitch"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="'Styled' CheckBox" />

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"
        android:theme="@style/BrandedCheckBox"/>

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.kunai.switchtest.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Themed CheckBox" />

    <CheckBox
        android:id="@+id/checkbox2"
        android:layout_width="wrap_content"
        android:layout_height="46dp"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="16dp"
        android:checked="true"
        android:longClickable="false"/>

</RelativeLayout>

styles.xml...

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">#3F51B5</item>
    <item name="colorPrimaryDark">#303F9F</item>
    <item name="colorAccent">#FF4081</item>
</style>

<style name="BrandedSwitch.control" parent="Theme.AppCompat.Light">
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">#e6e600</item>
    <item name="colorSwitchThumbNormal">#cc0000</item>
</style>

<style name="BrandedSwitch.text" parent="Theme.AppCompat.Light">
    <item name="android:textColor">#ffa000</item>
    <item name="android:textSize">9dp</item>
</style>

<style name="BrandedCheckBox" parent="AppTheme">
    <item name="colorAccent">#aaf000</item>
    <item name="colorControlNormal">#ff0000</item>
</style>

<style name="BrandedSwitch" parent="AppTheme">
    <item name="colorAccent">#39ac39</item>
</style>

I know, I know, you are too lazy to build this, you just want to get your code written. I get it. Here's what it looks like when you run it...

API_21:

API_18:

This is a perfect answer. Made my life easy. This should be the accepted one. — Rachit, Sep 09 '16 at 05:09
This is the perfect answer to all the solutions here in this post. — Viks, Mar 27 '18 at 06:28

score 7 · Answer 5 · answered Feb 22 '17 at 12:43

You can set the CHECKBOX color like this API21 & Above

android:buttonTint="@color/YOUR_COLOR"

<CheckBox
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:buttonTint="@color/YOUR_COLOR" />

For the support of Older version use AppCompatCheckBox of V7 library

app:buttonTint="@color/YOUR_COLOR"

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_height="wrap_content"
    android:layout_width="match_parent"  
    app:buttonTint="@color/YOUR_COLOR" />

score 6 · Answer 6 · answered Jul 13 '12 at 04:36

6

It's specified by the drawables: android.R.drawable.checkbox_off_background and android.R.drawable.checkbox_on_background

answered Jul 13 '12 at 04:36

Dheeraj Vepakomma

26,870
17
81
104

Thank you for the specifics. I seemed to have trouble pinpointing those two properties as responsible. Thank you. +1 – Kirk Jul 13 '12 at 21:57
15

so how to change that color ? – Kalpesh Lakhani Mar 02 '14 at 16:57

score 1 · Answer 7 · answered Jan 16 '17 at 05:09

1

This will be the most efficient way.

android:buttonTint="@color/black"

answered Jan 16 '17 at 05:09

Neshan Manilka

64
1
2
10

tks... Só simple ! – cesarsicas Oct 04 '17 at 18:20

Android: Set color of CheckBox

7 Answers7

Linked

Related