web-dev-qa-db-fra.com

Comment changer la couleur d'une CheckBox?

Comment changer la couleur CheckBox par défaut dans Android?
Par défaut, la couleur CheckBox est verte et je souhaite changer cette couleur.
Si ce n’est pas possible, merci de me dire comment créer une CheckBox personnalisée?

androidandroid-checkbox
154
Piyush

Vous pouvez modifier CheckBoxs en utilisant l'attribut Android:button="@drawable/your_check_drawable".

44
Michael

Vous pouvez changer la couleur directement en XML. Utilisez buttonTint pour la boîte: (à partir de l’API niveau 23) 

<CheckBox
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:buttonTint="@color/CHECK_COLOR" />

Vous pouvez également le faire en utilisant appCompatCheckbox v7 pour les anciens niveaux d’API:

<Android.support.v7.widget.AppCompatCheckBox 
    Android:layout_width="wrap_content" 
    Android:layout_height="wrap_content" 
    app:buttonTint="@color/COLOR_HERE" />
359
afathman

vous pouvez définir le thème Android de la case à cocher pour obtenir la couleur souhaitée dans votre styles.xml add: 

<style name="checkBoxStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">CHECKEDHIGHLIGHTCOLOR</item>
    <item name="Android:textColorSecondary">UNCHECKEDCOLOR</item>
</style>

puis dans votre fichier de mise en page: 

<CheckBox
     Android:theme="@style/checkBoxStyle"
     Android:id="@+id/chooseItemCheckBox"
     Android:layout_width="wrap_content"
     Android:layout_height="wrap_content"/>

contrairement à l'utilisation de Android:buttonTint="@color/CHECK_COLOR", cette méthode fonctionne sous Api 23

105
Amro elaswar

Version programmatique:

int states[][] = {{Android.R.attr.state_checked}, {}};
int colors[] = {color_for_state_checked, color_for_state_normal}
CompoundButtonCompat.setButtonTintList(checkbox, new ColorStateList(states, colors));
36
mbonnin

Utilisez buttonTint et le sélecteur de couleur 

<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"/>

res/colors/checkbox_filter_tint.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/light_gray_checkbox"
          Android:state_checked="false"/>
    <item Android:color="@color/common_red"
          Android:state_checked="true"/>
</selector>
23
D. Sergeev
<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" />
15
Shweta Chauhan

Ajoutez cette ligne dans votre fichier styles.xml:

<style>
    <item name="Android:colorAccent">@Android:color/holo_green_dark</item>
</style>
11
Yogesh Rathi

Je suggérerais d'utiliser l'approche de style dans Android pour configurer les vues Android intégrées et ajouter un nouveau style à votre projet:

<style name="yourStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">your_color</item> <!-- for uncheck state -->
    <item name="Android:textColorSecondary">your color</item> <!-- for check state -->
</style>

et ajoutez assigner ce style au thème de la case à cocher: Android: theme = "@ style/youStyle"

j'espère que cela t'aides.

11
Bahadin Khalilieh

Moi, j'ai eu le même problème, une solution utilisant la technique ci-dessous. Copiez le btn_check.xml de Android-sdk/platforms/Android-#(version)/data/res/drawable dans le dossier pouvant être dessiné de votre projet et modifiez les états d’image "activé" et "désactivé" en images personnalisées.
Ensuite, votre XML aura simplement besoin de Android:button="@drawable/btn_check"

<CheckBox
    Android:button="@drawable/btn_check"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:checked="true" />

Si vous souhaitez utiliser différentes icônes Android par défaut, vous pouvez utiliser:

Android:button="@Android:drawable/..."
6
sravan

buttonTint a fonctionné pour moi essayer 

Android: buttonTint = "@ color/white" 

<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"/>
6
saigopi

Vous pouvez changer la couleur checkbox en utilisant une seule ligne de code

Android:buttonTint="@color/app_color" //whatever color

3
Kishore Reddy

Bonjour c'est le code de thème pour Dark Theme et 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>

Si vous souhaitez modifier la couleur de la case à cocher, l'attribut "colorAccent" sera utilisé pour l'état coché et "Android: textColorSecondary" pour l'état désélectionné.

"actionOverflowButtonStyle" utilisera pour changer la couleur de l'icône de débordement dans la barre d'actions.

L'attribut "buttonsearch_picture" utilisera pour changer la couleur de teinte du bouton d'action dans la barre d'action. C'est un attribut personnalisé dans style.xml

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

Même chose pour le bouton d'actualisation que j'utilise dans mon application.

L'attribut "Android: popupMenuStyle" utilise le style de menu contextuel du thème Light dans le thème Dark. 

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

Et ceci est le code de barre d'outils que j'utilise dans mon application Rocks Player.

 <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>

Thèmes: -

 <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>
2
Ashish Saini

vous pouvez créer votre propre xml dans drawable et l'utiliser comme Android: background = "@ drawable/your_xml"

en ce que vous pouvez tout donner à la frontière

<item>
    <shape>
        <gradient

            Android:endColor="#fff"
            Android:startColor="#fff"/>
        <corners
            Android:radius="2dp"/>
        <stroke
            Android:width="15dp"
            Android:color="#0013669e"/>

    </shape>
</item>

2
abhiruchi vijay

créer un code XML Drawable resource file sous res->drawable et le nommer, par exemple, checkbox_custom_01.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/checkbox_custom_01_checked_white_green_32" />
  <item 
   Android:state_checked="false" 
   Android:drawable="@drawable/checkbox_custom_01_unchecked_gray_32" />
</selector>

Téléchargez vos fichiers d’image personnalisés avec une case à cocher (je recommande png) dans votre dossier res->drawable. 

Ensuite, allez dans votre fichier de mise en page et changez votre case à cocher pour

<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"/>

vous pouvez personnaliser n'importe quoi, à condition que Android:button pointe vers le fichier XML correct que vous avez créé auparavant.

NOTE AUX NOUVELLES: bien que ce ne soit pas obligatoire, il est néanmoins recommandé de nommer votre case à cocher avec un identifiant unique dans tout votre arbre de disposition.

0
tony gil

Vous pouvez utiliser les deux propriétés suivantes dans "colors.xml"

<color name="colorControlNormal">#eeeeee</color>
<color name="colorControlActivated">#eeeeee</color>

colorControlNormal est pour l'affichage normal de la case à cocher, et colorControlActivated est pour quand la case à cocher est cochée.

0
Tajveer Singh Nijjar

Si vous allez utiliser les icônes Android, comme décrit ci-dessus.

Android:button="@Android:drawable/..."

.. c’est une bonne option, mais pour que cela fonctionne - j’ai trouvé qu’il fallait ajouter une logique de bascule pour afficher/masquer la coche, comme ceci:

    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);

        }
    });
0
Gene Bo

Approche 100% robuste.

Dans mon cas, je n'avais pas accès au fichier source de présentation XML, car j'obtiens Checkbox à partir d'une bibliothèque tierce MaterialDialog lib . Je dois donc résoudre ce problème par programme. 

  1. Créez une ColorStateList au format xml:

res/color / checkbox_tinit_dark_theme.xml: 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:color="@color/white"
        Android:state_checked="false"/>
    <item Android:color="@color/positiveButtonBg"
        Android:state_checked="true"/>
</selector>

  1. Puis appliquez-le à la case à cocher:

    ColorStateList darkStateList = ContextCompat.getColorStateList(getContext(), R.color.checkbox_tint_dark_theme);
CompoundButtonCompat.setButtonTintList(checkbox, darkStateList);

P.S. En outre, si quelqu'un est intéressé, voici comment vous pouvez obtenir votre case à cocher dans la boîte de dialogue MaterialDialog (si vous la définissez avec .checkBoxPromptRes(...)):

CheckBox checkbox = (CheckBox) dialog.getView().findViewById(R.id.md_promptCheckbox);

J'espère que cela t'aides.

0
Kirill Karmazin

Vous pouvez changer la couleur d'arrière-plan du <CheckBox> en l'intégrant dans un <LinearLayout>. Puis changez la couleur d'arrière-plan de <LinearLayout> en la couleur souhaitée.

0
mellowg

Vous devriez essayer ci-dessous le code. Ça marche pour moi.

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/checked" 
          Android:state_checked="true">
        <color Android:color="@color/yello" />
    </item>
    <!-- checked -->
    <item Android:drawable="@drawable/unchecked" 
          Android:state_checked="false">
        <color Android:color="@color/black"></color>
    </item>
    <!-- unchecked -->
    <item Android:drawable="@drawable/checked" 
          Android:state_focused="true">
        <color Android:color="@color/yello"></color>
    </item>
    <!-- on focus -->
    <item Android:drawable="@drawable/unchecked">
        <color Android:color="@color/black"></color>
    </item>
    <!-- default -->
</selector>

et CheckBox 

<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" />
0
Imtiyaz Khalani