Comment changer la couleur d'une Case à cocher?

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

131
demandé sur JJD 2011-05-02 10:22:27

18 réponses

Vous pouvez modifier CheckBoxs dessinés à l'aide de android:button="@drawable/your_check_drawable" attribut.

42
répondu Michael 2011-05-02 06:33:32

Vous pouvez colorier directement dans le xml. Utilisez buttonTint pour la boîte: (à partir du niveau de L'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 v7 pour les anciennes API:

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:buttonTint="@color/COLOR_HERE" /> 
310
répondu afathman 2016-02-04 21:48:33

Vous pouvez définir le thème android de la case à cocher pour obtenir la couleur que vous voulez dans vos styles.ajouter xml:

<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

91
répondu Amro elaswar 2016-04-14 23:44:16

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));
32
répondu mbonnin 2016-09-07 17:18:32

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 / couleurs / 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>
18
répondu D. Sergeev 2018-01-20 10:25:59
<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" />
14
répondu Shweta Chauhan 2016-07-29 12:27:53

Ajoutez cette ligne dans votre fichier styles.xml:

<style>
    <item name="android:colorAccent">@android:color/holo_green_dark</item>
</style>
11
répondu Yogesh Rathi 2016-01-02 22:08:35

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

J'espère que cela aide.

10
répondu Bahadin Khalilieh 2017-01-30 12:21:22

Moi face au même problème, j'ai eu une solution en utilisant ci-dessous technique. Copiez le btn_check.xml de android-sdk/platforms/android-#(version)/data/res/drawable dans le dossier dessinable de votre projet et modifiez les États d'image' on 'et' off ' en images personnalisées.
Ensuite, votre xml aura juste 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
répondu sravan 2015-02-24 16:47:36

ButtonTint travaillé pour moi essayer

Android:buttonTint="@couleur/blanc"

<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"/>
4
répondu saigopi 2018-07-05 10:50:53

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 à border corner

<item>
    <shape>
        <gradient

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

    </shape>
</item>

2
répondu abhiruchi vijay 2016-09-18 18:28:25

Salut C'est le code de thème pour le thème sombre et le thème léger.

<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 voulez changer la couleur de la case à cocher, l'attribut "colorAccent "utilisera pour l'état vérifié et" android:textColorSecondary " utilisera pour décocher l'état.

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

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

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

Attribut"android:popupMenuStyle" utilise pour obtenir le style de menu contextuel thème léger dans le thème sombre.

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

Et c'est 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
répondu Ashish Saini 2017-11-01 10:10:13

Nous pouvons changer la couleur de la case à cocher en utilisant la ligne de code singe

Android: buttonTint=" @ color / app_color " / / quelle que soit la couleur

1
répondu Kishore Reddy 2018-08-18 06:14:39

Vous pouvez changer la couleur d'arrière-plan du <CheckBox> en l'intégrant dans un <LinearLayout>. Ensuite, changez la couleur d'arrière-plan de <LinearLayout> à la couleur que vous voulez.

0
répondu mellowg 2012-01-25 14:52:03

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 à 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
répondu gnB 2015-04-23 18:26:42

Créez un fichier xml Drawable resource file sous res->drawable et 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) dans votre dossier res->drawable.

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

<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 que android:button pointe vers le bon fichier XML que vous avez créé auparavant.

NOTE aux débutants: bien que ce ne soit pas obligatoire, il est néanmoins recommandé de nommer votre case à cocher avec un identifiant unique tout au long de votre arbre de mise en page entière.

0
répondu tony gil 2016-10-19 11:35:36

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

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

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

0
répondu Tajveer Singh Nijjar 2017-07-01 04:49:09

Vous devriez essayer le code ci-dessous. Il est travaillé 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 Case À Cocher

<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
répondu Imtiyaz Khalani 2015-02-24 16:45:06