Android: set color for CheckBox

Question

I searched a few places and didn't seem to be able to determine the CheckBox for the frame border. Can someone point me in the right direction?

Here's how it looks unverified (can barely see the window)

Here is a checked condition

Here is what I am trying to do so:

Answer 1

You can use an XML file for this. Save the xml code below in the 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 the background of your checkbox, for example:

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

Here I upload my own images, which I used instead of cbchk_blue and cbunchk_blue

Answer 2

The same problem occurs when using the Holo Dark for Activity theme and on a white background. Thus, the flag has a Dark style. A simple workaround is to directly set the background from Android Holo Light:

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

You can find a great overview of how this all works in the following answer: https://stackoverflow.com/a/167186/

Answer 3

Starting with Android 5 and API level 21, you can freely select the colors of the flags (and many other widgets). Add the following code to your values-v21/styles.xml (assuming you have a reserve for the 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 need to apply the style to your checkbox in your layout:

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

What is it, flags appear in your favorite colors!

Answer 4

Ok, so sorry, but most of these answers are incomplete or have a small error. Styling controls in different versions of Android are an epic pain in the ass. Having pulled my hair out for a few days on a project with very severe design restrictions, I finally broke down and wrote a test application, and then really dug up and tested various solutions there for style switches and flags, because when a design has one it often has other. Here is what I found ...

First: You cannot draw any of them, but you can apply a theme to all of them, or just one of them.

Second:. You can do all this from XML, and you do not need other values ​​-v21 / styles.xml.

Thirdly: when it comes to switches, you have two main options if you want to support older versions of Android (for example, I'm sure you are doing this) ...

• You can use SwitchCompat and you can make it look like across platforms.
• You can use the Switch , and you can discuss it with the rest of the topic, or just with that particular switch, and on older versions of Android you just see the unexpanded old square switch.

Good now for a simple reference code. Again, if you create a simple Hello World! and drop this code, you can play in your heart. This is all the boiler plate here, so I'm just going to include XML for activity and 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 your code to be written. I understood. This is what it looks like when you run it ...

API_21:

API_18:

Answer 5

It is set by drawings: android.R.drawable.checkbox_off_background and android.R.drawable.checkbox_on_background

Answer 6

You can set CHECKBOX color as API21 and above

Android: buttonTint = "@ color / YOUR_COLOR"

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

Use the V7 library's AppCompatCheckBox to support the old version

Application: buttonTint = "@ color / YOUR_COLOR"

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

Answer 7

This will be the most effective way.

Android: buttonTint = "@ color / black"