Comment changer la couleur d'une CheckBox?


247

Comment changer la CheckBoxcouleur par défaut dans Android?
Par défaut, la CheckBoxcouleur est verte et je souhaite changer cette couleur.
Si ce n'est pas possible, dites-moi comment faire une coutume CheckBox?


1
Essayez-vous de changer la couleur de la police? Ou la couleur de la boîte réelle?

1
la couleur réelle de la boîte que je change
Piyush

72
Le réglage de android:buttonTint="@color/mybrown"est un moyen facile de changer la couleur de la boîte.
shauvik

6
@Shauvik il travaille juste sur la conception matérielle :)
Mucahit

9
@shauvik, il est préférable d'utiliser à la app:buttonTint="@color/mybrown"place, de cette façon, cela peut fonctionner sur l'API <21
Nikaoto

Réponses:


187

Si vous avez plus de minSdkVersion21 ans, utilisez l' android:buttonTintattribut pour mettre à jour la couleur d'une case à cocher:

<CheckBox
  ...
  android:buttonTint="@color/tint_color" />

Dans les projets qui utilisent la bibliothèque AppCompat et prennent en charge les versions Android inférieures à 21, vous pouvez utiliser une version compat de l' buttonTintattribut:

<CheckBox
  ...
  app:buttonTint="@color/tint_color" />

Dans ce cas, si vous souhaitez sous-classer un, CheckBoxn'oubliez pas d'utiliser à la AppCompatCheckBoxplace.

RÉPONSE PRÉCÉDENTE:

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


7
Vous devez créer votre propre dessinable. Il doit y avoir un moyen plus simple ...
IgorGanapolsky

14
Changer la couleur du bouton est plus simple. Nous devons utiliser les éléments natifs au lieu de le personnaliser inutilement.
Neela

3
Remarque: Pour le style de conception de matériaux, il existe contentControlmaintenant les options: materialdoc.com/components/selection-controls
SimpsOff

392

Vous pouvez changer la couleur directement en XML. Utilisation buttonTintpour la boîte: (à partir du niveau API 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 v7pour 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" /> 

5
AppCompatCheckBox ... Merci. Je ne le savais pas.
moskis

8
Bien, merci! Et n'oubliez pas d'ajouter xmlns: app = " schemas.android.com/apk/res-auto " à votre disposition principale / parent
Alberto Méndez

2
Ne fonctionne pas pour moi en utilisant 'android.support.v7.widget.AppCompatCheckBox'
Zvi

1
Cela sera automatiquement utilisé lorsque vous utiliserez CheckBox dans vos mises en page. Vous ne devez utiliser manuellement cette classe que lors de l'écriture de vues personnalisées.
2017

2
Que diriez-vous de définir 2 couleurs différentes pour les états cochés et non cochés?
DYS

130

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

<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


5
TEXTCOLORSECONDARY !!!! Merci mec! C'est tout. J'ai cherché des âges pour simplement changer la couleur d'arrière-plan non sélectionnée et je ne voulais pas travailler avec des dessinables personnalisés. Ça y est ...!
Mulgard

@Mulgard heureux de pouvoir vous aider!
Amro elaswar

2
A fonctionné pour moi, mais devait être ajouté au CheckBox xml pour pouvoir voir le texte - android: textColor = "@ color / textColor"
Zvi

Comment puis-je le faire également par programme?
Zvi

@Zvi Je ne suis pas sûr que vous puissiez le faire par programme
Amro elaswar

48

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

1
Merci à toi. Vous roches, La meilleure solution.
Carlos

cela m'a donné un résultat inattendu avec les couleurs, êtes-vous sûr de ne rien avoir confondu?
Kirill Karmazin

@Carlos Ce n'est pas une "meilleure" solution, car dans Android, vous devez toujours essayer de définir tous les éléments de mise en page dans le fichier xml et pas par programme, sauf lorsque vous devez le changer dynamiquement
kyay

@kyay Pas "toujours" ... le système de ressources Android est un gâchis et il est souvent beaucoup plus facile et plus facile de le faire par programmation.
nyholku

Cela aide en quelque sorte à séparer les préoccupations
kyay

42

Utilisez buttonTintpour changer la couleur du bouton et du sélecteur de couleur pour la version supérieure à 21+ api.

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

res / colours / 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>

3
Pouvez-vous parler anglais et expliquer votre réponse plse
GGO

Restez toujours avec l'anglais dans SO.
nyconing

C'est une meilleure réponse
Vivek A Naik

Cela semble être la seule approche simple pour définir les couleurs cochées et non cochées qui fonctionnent sur tous les appareils.
Gumby The Green

Ce devrait être la réponse acceptée. Bien qu'il convient de noter que cela ne fonctionne pas lorsque le sélecteur est déclaré en tant que valuesressource. Comme indiqué par le chemin indiqué ci-dessus, il doit se trouver dans le colorsdossier de ressources.
Benjamin Basmaci

18

Je suggérerais d'utiliser l'approche de style dans Android comme moyen de configurer les vues Android intégrées, d'ajouter un nouveau style dans 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 attribuer ce style au thème de la case à cocher: android: theme = "@ style / youStyle"

J'espère que cela t'aides.


d'accord avec cette solution, ces attributs devraient mieux fonctionner avec le composant Android intégré par défaut sans tracas sur le dessinable comme la réponse votée.
Trung Le

1
Ceci est une répétition de la réponse d'Amro elaswar de 9 mois plus tôt.
jk7

C'est le genre de solution qui est UNE VRAIE SOLUTION.
Iharob Al Asimi

16

Ajouter un bouton Teinte dans votre xml

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

2
Le contenu de cette réponse existe déjà dans la réponse d'un afathman .
MTCoster

10

Ajoutez cette ligne dans votre styles.xmlfichier:

<style>
    <item name="android:colorAccent">@android:color/holo_green_dark</item>
</style>

Veuillez modifier votre réponse avec votre exemple et ne pas la poster en tant que commentaire
bish

4
Légère correction: c'est <item name = " android : colorAccent> </item>. En outre, cela n'est disponible qu'à partir d'API 21 et plus.
user3829751

cela change la couleurAccent, ce n'est pas ce qu'on lui a demandé
Alberto M

1
Sur Galaxy S3, il modifie uniquement l'état vérifié d'une CheckBox. Mais l'état non contrôlé est toujours le même.
Slava

9

buttonTint a fonctionné pour moi essayez

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

8

J'ai rencontré le même problème, j'ai obtenu une solution en utilisant la technique ci-dessous. Copiez le btn_check.xmldans android-sdk/platforms/android-#(version)/data/res/drawablele dossier dessinable de votre projet et modifiez les états d'image «on» et «off» en vos images personnalisées.
Ensuite, votre xml aura juste besoinandroid: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/..."

Excellente réponse - beaucoup plus facile que de créer du xml personnalisé .. merci! Pour moi, j'ai un fond gris et la bordure de la case à cocher n'était pas visible. J'ai ajouté ceci et vous pouvez le voir maintenant: android: button = "@ android: drawable / checkbox_off_background"
Gene Bo

1
Il y a en fait un peu plus à utiliser cette approche que je ne le pensais .. mais toujours une bonne option. J'ai ajouté des détails ci-dessous stackoverflow.com/a/29831532/2162226
Gene Bo

5

Vous pouvez changer la checkboxcouleur en utilisant une seule ligne de code

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


4

Approche 100% robuste.

Dans mon cas, je n'avais pas accès au fichier source de mise en page XML, car je reçois Checkbox à partir d'une bibliothèque MaterialDialog tierce. Je dois donc résoudre ce problème par programme.

  1. Créez un ColorStateList en 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. Ensuite, appliquez-le à la case à cocher:

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

PS De plus, si quelqu'un est intéressé, voici comment 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.


3

créez un xml Drawable resource filesous res->drawableet nommez-le, 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 de case à cocher personnalisés (je recommande png) sur votre res->drawable dossier.

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

<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, tant qu'il android:buttonpointe vers le fichier XML correct que vous avez créé auparavant.

REMARQUE POUR LES NOUVEAUX: bien que ce ne soit pas obligatoire, il est néanmoins recommandé de nommer votre case à cocher avec un identifiant unique dans l'ensemble de votre arborescence.


3

Salut C'est le code du thème pour le thème sombre et le thème clair.

<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 vérifié et "android: textColorSecondary" sera utilisé pour l'état décoché.

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

L'attribut "buttonsearch_picture" sera utilisé pour changer la couleur de teinte du bouton d'action dans la barre d'action. Il s'agit d'un attribut personnalisé dans style.xml

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

Il en va de même pour le bouton d'actualisation que j'utilise dans mon application.

L'attribut "android: popupMenuStyle" utilise pour obtenir le style de menu contextuel du thème clair dans le thème foncé.

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

Et voici le code de la 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

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 au coin de 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>


1
Bien qu'il soit judicieux de connaître les graphiques vectoriels dessinables, cette réponse ne répond pas à la question de l'OP concernant la teinte du bouton.
Mike Poole

2

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

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

colorControlNormal est pour la vue normale de la case à cocher, et colorControlActivated est lorsque la case est cochée.


1

Vous pouvez changer la couleur d'arrière-plan du en l' <CheckBox>intégrant à l'intérieur d'un <LinearLayout>. Modifiez ensuite la couleur d'arrière-plan de <LinearLayout>la couleur souhaitée.


La question concerne la couleur de la case à cocher et non l'arrière
Zvi

1

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

1

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é que vous devez 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);

        }
    });

Eh bien, c'est un travail supplémentaire qui n'est vraiment pas nécessaire. Dans le fichier xml du dessin, vous fournissez des références aux ressources dessinables activées ou désactivées pour le sélecteur. Cela place automatiquement le dessinable correct en fonction de l'état de la case à cocher.
jkincali

0

La plupart des réponses passent par le fichier xml. Si vous trouvez une réponse active pour la plupart des versions d'Android et que vous n'avez qu'une seule couleur pour les deux états Cochez et décochez: voici ma 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);
}

-1

Il existe un moyen beaucoup plus simple de définir la couleur par programmation. Utilisez la méthode ci-dessous, Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Vous pouvez utiliser les lignes de code ci-dessous pour modifier l'arrière-plan de la case à cocher dynamiquement dans votre code java.

//Setting up background color on checkbox.
 checkbox.setBackgroundColor(Color.parseColor("#00e2a5"));

Cette réponse provenait de ce site . Vous pouvez également utiliser ce site pour convertir votre couleur RVB en valeur hexadécimale, vous devez alimenter le parseColor

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.