Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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)

Here is the checked state

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

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
                Makes a lot of sense seeing it laid out like that. I had a lot of trouble finding good examples.
– Kirk
                Jul 13, 2012 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, 2013 at 20:12
                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 developer.android.com/guide/topics/resources/… for details
– user2345998
                Mar 13, 2015 at 12:52
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
                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, 2016 at 18:34
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!
                For styles prior level 21 you set only <item name="colorAccent>, <item name="colorControlNormal> and import `    compile com.android.support:appcompat-v7:22.2.1
– lagos
                Aug 11, 2015 at 8: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, 2016 at 16:46
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"?>
    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>
<!-- 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:
    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" /> 
                Thank you for the specifics. I seemed to have trouble pinpointing those two properties as responsible. Thank you. +1
– Kirk
                Jul 13, 2012 at 21:57
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.