How to change the color of a CheckBox

Question

How do I change the default CheckBox color in Android  By default the CheckBox color is green  and I want to change this color  If it is not possible please tell me how to make a custom CheckBox

User · Answer

Hi This is the theme code for both Dark Theme and Light Theme.

<attr name="buttonsearch_picture" format="reference"/>
<attr name="buttonrefresh_picture" format="reference"/>

<style name="Theme.Light" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:textColorPrimary">@color/black</item>
    <item name="android:textColorSecondary">@color/black</item>
    <item name="android:textColor">@color/material_gray_800</item>
    <item name="actionOverflowButtonStyle">@style/LightOverflowButtonStyle</item>
    <item name="buttonsearch_picture">@drawable/ic_search_black</item>
    <item name="buttonrefresh_picture">@drawable/ic_refresh_black</item>
</style>

<style name="Theme.Dark" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:textColorSecondary">@color/material_gray_500</item>
    <item name="android:textColor">@color/material_gray_800</item>
    <item name="actionOverflowButtonStyle">@style/DarkOverflowButtonStyle</item>
    <item name="buttonsearch_picture">@drawable/ic_search_white</item>
    <item name="buttonrefresh_picture">@drawable/ic_refresh_white</item>
    <item name="android:colorBackground">#ffffff</item>
    <item name="android:alertDialogTheme">@style/LightDialogTheme</item>
    <item name="android:alertDialogStyle">@style/LightDialogTheme</item>
  <!-- <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>-->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
</style>

If you want to change checkbox color then "colorAccent" attribute will use for checked state and "android:textColorSecondary" will use for unchecking state.

"actionOverflowButtonStyle" will use for change the color of overflow icon in the Action bar.

"buttonsearch_picture" attribute will use for change tint color of Action Button in Action Bar.This is custom Attribute in style.xml

<attr name="buttonsearch_picture" format="reference"/>

Same is for refresh button which i am using in my app.

"android:popupMenuStyle" attribute is using to get Light theme popup menu style in Dark theme.

<style name="PopupMenu" parent="Theme.AppCompat.Light.NoActionBar">
</style>

And this is toolbar Code which I am using in my Rocks Player App.

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    app:contentInsetStart="0dp"
    android:title="Rocks Player"
    android:layout_width="match_parent"
    android:elevation="4dp"
    android:layout_height="48dp"
    app:layout_scrollFlags="scroll|enterAlways"
    android:minHeight="48dp"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary"
    >
</android.support.v7.widget.Toolbar>

Themes:-

 <style name="AppTheme0" parent="Theme.Light">
    <item name="colorPrimary">#ffffff</item>
    <item name="colorPrimaryDark">#cccccc</item>
    <item name="colorAccent">#0294ff</item>
</style>

<style name="AppTheme1" parent="Theme.Dark">
    <item name="colorPrimary">#4161b2</item>
    <item name="colorPrimaryDark">#4161b2</item>
    <item name="colorAccent">#4161b2</item>
</style>

User · Answer

You can change the background color of the  lt CheckBox gt  by embedding it inside a  lt LinearLayout gt   Then change the background color of  lt LinearLayout gt  to the color you want

User · Answer

you can create your own xml in drawable and use this as android background   drawable your xml   in that you can give border corner everything      lt item gt       lt shape gt           lt gradient              android endColor   fff              android startColor   fff   gt           lt corners             android radius  2dp   gt           lt stroke             android width  15dp              android color   0013669e   gt        lt  shape gt   lt  item gt

User · Answer

I would suggest to use he style approach in android as the way to configure built-in android views  add new style in your project    lt style name  yourStyle  parent  Base Theme AppCompat  gt       lt item name  colorAccent  gt your color lt  item gt   lt  -- for uncheck state -- gt       lt item name  android textColorSecondary  gt your color lt  item gt   lt  -- for check state -- gt   lt  style gt    and add assign this style to the theme of the checkbox   android theme   style youStyle   hope this helps

User · Answer

My minSdkVersion is 15  my BaseAppTheme parent is Theme AppCompat Light NoActionBar and I am creating my Checkboxes programmatically  The following steps worked for me  1  In your Java code  change CheckBox checkBox   new CheckBox context    to AppCompatCheckBox checkBox   new AppCompatCheckBox context    2  In your styles xml  add   lt style name  quot MyCheckboxStyle quot  parent  quot Widget AppCompat CompoundButton CheckBox quot  gt       lt item name  quot buttonTint quot  gt  color primary dark lt  item gt   lt  style gt   3  Finally  within your BaseAppTheme  or AppTheme  style  add   lt item name  quot checkboxStyle quot  gt  style MyCheckboxStyle lt  item gt   lt item name  quot android checkboxStyle quot  gt  style MyCheckboxStyle lt  item gt

User · Answer

Most answers go through the xml file  If you find an active answer for most Android versions and are just one color for the two statuses Check an UnCheck  here is my solution   Kotlin   val colorFilter   PorterDuffColorFilter Color CYAN  PorterDuff Mode SRC ATOP  CompoundButtonCompat getButtonDrawable checkBox   colorFilter   colorFilter   Java    ColorFilter colorFilter   new PorterDuffColorFilter Color CYAN  PorterDuff Mode SRC ATOP   Drawable drawable   CompoundButtonCompat getButtonDrawable checkBox   if  drawable    null        drawable setColorFilter colorFilter

User · Answer

You should try below code  It is working for me    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable checked             android state checked  true  gt           lt color android color   color yello    gt       lt  item gt       lt  -- checked -- gt       lt item android drawable   drawable unchecked             android state checked  false  gt           lt color android color   color black  gt  lt  color gt       lt  item gt       lt  -- unchecked -- gt       lt item android drawable   drawable checked             android state focused  true  gt           lt color android color   color yello  gt  lt  color gt       lt  item gt       lt  -- on focus -- gt       lt item android drawable   drawable unchecked  gt           lt color android color   color black  gt  lt  color gt       lt  item gt       lt  -- default -- gt   lt  selector gt    and CheckBox    lt CheckBox     Button   style currentcy check box style      android layout width  wrap content      android layout height  wrap content      android paddingLeft  20dp      android text   string step one currency aud    gt

User · Answer

create an xml Drawable resource file under res- gt drawable and name it  for example  checkbox custom 01 xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt   lt item     android state checked  true        android drawable   drawable checkbox custom 01 checked white green 32    gt     lt item     android state checked  false      android drawable   drawable checkbox custom 01 unchecked gray 32    gt   lt  selector gt    Upload your custom checkbox image files  i recommend png  to your res- gt drawable folder    Then go in your layout file and change your checkbox to   lt CheckBox     android id    id checkBox1      android button   drawable checkbox custom 01      android layout width  wrap content      android layout height  wrap content      android layout alignParentLeft  true      android focusable  false      android focusableInTouchMode  false      android text  CheckBox      android textSize  32dip   gt    you may customize anything  as long as android button points to the correct XML file you created before   NOTE TO NEWBIES  though it is not mandatory  it is nevertheless good practice to name your checkbox with a unique id throughout your whole layout tree

User · Answer

Use buttonTint to change color of button and color selector for above 21  api version        lt android support v7 widget AppCompatCheckBox                 android id    id check                  android layout width  wrap content                  android layout height  wrap content                  app buttonTint   color checkbox filter tint                  tools targetApi  21   gt    res colors checkbox filter tint xml   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color light gray checkbox            android state checked  false   gt       lt item android color   color common red            android state checked  true   gt   lt  selector gt

User · Answer

You can change the color directly in XML  Use buttonTint for the box   as of API level 23    lt CheckBox     android layout width  wrap content      android layout height  wrap content      android buttonTint   color CHECK COLOR    gt    You can also do this using appCompatCheckbox v7 for older API levels    lt android support v7 widget AppCompatCheckBox      android layout width  wrap content       android layout height  wrap content       app buttonTint   color COLOR HERE    gt

User · Answer

Add this line in your styles xml file    lt style gt       lt item name  android colorAccent  gt  android color holo green dark lt  item gt   lt  style gt

User · Answer

buttonTint worked for me try   android buttonTint   color white    lt CheckBox     android layout width  wrap content      android layout height  wrap content      android layout centerHorizontal  true      android id    id agreeCheckBox      android text   string i agree to terms s      android buttonTint   color white      android layout below    id avoid spam text   gt

User · Answer

If you are going to use the android icons  as described above     android button   android drawable           it s a nice option  but for this to work - I found you need to add toggle logic to show hide the check mark  like this       checkBoxShowPwd setOnCheckedChangeListener new CompoundButton OnCheckedChangeListener                 checkbox status is changed from uncheck to checked          public void onCheckedChanged CompoundButton buttonView  boolean isChecked                 int btnDrawable   android R drawable checkbox off background               if  isChecked                                btnDrawable   android R drawable checkbox on background                             checkBoxShowPwd setButtonDrawable btnDrawable

User · Answer

Add buttonTint in your xml    lt CheckBox       android id    id chk remember signup        android layout width  wrap content        android layout height  wrap content        android buttonTint   android color white        android text   string hint chk remember me    gt

User · Answer

You can change checkbox color using singe line of code  android buttonTint   color app color        whatever color

User · Answer

You can use the below lines of code to change the background of the Checkbox dynamically in your java code     Setting up background color on checkbox   checkbox setBackgroundColor Color parseColor   00e2a5       This answer was from this site  You can also use this site to convert your RGB color to the Hex value  you need to feed the parseColor

User · Answer

100  robust approach   In my case  I didn t have access to the XML layout source file  since I get Checkbox from a 3-rd party MaterialDialog lib  So I have to solve this programmatically     Create a ColorStateList in xml    res color checkbox tinit dark theme xml    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color white          android state checked  false   gt       lt item android color   color positiveButtonBg          android state checked  true   gt   lt  selector gt     Then apply it to the checkbox   ColorStateList darkStateList   ContextCompat getColorStateList getContext    R color checkbox tint dark theme   CompoundButtonCompat setButtonTintList checkbox  darkStateList      P S  In addition if someone is interested  here is how you can get your checkbox from MaterialDialog dialog  if you set it with  checkBoxPromptRes         CheckBox checkbox    CheckBox  dialog getView   findViewById R id md promptCheckbox     Hope this helps

User · Answer

If your minSdkVersion is 21  use android buttonTint attribute to update the color of a checkbox    lt CheckBox         android buttonTint   color tint color    gt    In projects that use AppCompat library and support Android versions below 21 you can use a compat version of the buttonTint attribute    lt CheckBox         app buttonTint   color tint color    gt    In this case if you want to subclass a CheckBox don t forget to use AppCompatCheckBox instead   PREVIOUS ANSWER   You can change CheckBoxs drawable using android button   drawable your check drawable  attribute

User · Answer

you can set android theme of the checkbox to get the color you want in your styles xml add      lt style name  checkBoxStyle  parent  Base Theme AppCompat  gt       lt item name  colorAccent  gt CHECKEDHIGHLIGHTCOLOR lt  item gt       lt item name  android textColorSecondary  gt UNCHECKEDCOLOR lt  item gt   lt  style gt    then in your layout file      lt CheckBox      android theme   style checkBoxStyle       android id    id chooseItemCheckBox       android layout width  wrap content       android layout height  wrap content   gt    unlike using android buttonTint   color CHECK COLOR  this method works under Api 23

User · Answer

You can use the following two properties in  colors xml    lt color name  colorControlNormal  gt  eeeeee lt  color gt   lt color name  colorControlActivated  gt  eeeeee lt  color gt    colorControlNormal is for the normal view of checkbox  and colorControlActivated is for when the checkbox is checked

User · Answer

If textColorSecondary does not work for you  you might have defined colorControlNormal in your theme to be a different color  If so  just use  lt style name  quot yourStyle quot  parent  quot Base Theme AppCompat quot  gt       lt item name  quot colorAccent quot  gt your color lt  item gt   lt  -- for checked state -- gt       lt item name  quot colorControlNormal quot  gt your color lt  item gt   lt  -- for unchecked state -- gt   lt  style gt

User · Answer

Me faced same problem  I got a solution using below technic  Copy the btn check xml from android-sdk platforms android-  version  data res drawable to your project s drawable folder and change the  on  and  off  image states to your custom images  Then your xml will just need android button   drawable btn check    lt CheckBox     android button   drawable btn check      android layout width  wrap content      android layout height  wrap content      android checked  true    gt    If you want to use different default Android icons  you can use   android button   android drawable

User · Answer

There is a much easier way to set the color programmatically by setting ColorStateList   Checkbox setButtonTintList ColorStateList valueOf getContext   getColor R color yourcolor

User · Answer

Programmatic version   int states         android R attr state checked        int colors      color for state checked  color for state normal  CompoundButtonCompat setButtonTintList checkbox  new ColorStateList states  colors

[android] How to change the color of a CheckBox?

Examples related to android

Examples related to android-layout

Examples related to android-checkbox