Wie ändere ich die Farbe einer CheckBox?


247

Wie ändere ich die Standardfarbe CheckBoxin Android?
Standardmäßig ist die CheckBoxFarbe grün und ich möchte diese Farbe ändern.
Wenn es nicht möglich ist, sag mir bitte, wie man einen Brauch macht CheckBox.


1
Versuchen Sie, die Schriftfarbe zu ändern? Oder die Farbe der eigentlichen Box?

1
tatsächliche Box Farbe, die ich ändere
Piyush

72
Das Einstellen von android:buttonTint="@color/mybrown"ist eine einfache Möglichkeit, die Farbe der Box zu ändern.
Shauvik

6
@ Shauvik es arbeitet gerade am Materialdesign :)
Mucahit

9
@ Shauvik es ist besser, app:buttonTint="@color/mybrown"stattdessen zu verwenden , auf diese Weise kann es auf API <21
Nikaoto

Antworten:


187

Wenn Sie minSdkVersionmindestens 21 Jahre alt sind, verwenden Sie das android:buttonTintAttribut, um die Farbe eines Kontrollkästchens zu aktualisieren:

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

In Projekten, die die AppCompat-Bibliothek verwenden und Android-Versionen unter 21 unterstützen, können Sie eine kompatible Version des buttonTintAttributs verwenden:

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

In diesem Fall, wenn Sie eine Unterklasse a möchten, CheckBoxvergessen Sie nicht, diese zu verwendenAppCompatCheckBox stattdessen .

VORHERIGE ANTWORT:

Sie können CheckBoxs drawable mit android:button="@drawable/your_check_drawable"attribute ändern .


7
Sie müssten Ihr eigenes Zeichen erstellen. Es muss einen
direkteren

14
Das Ändern der buttonTint-Farbe ist einfacher. Wir müssen die nativen Elemente verwenden, anstatt sie unnötig anzupassen.
Neela

3
Hinweis: Für das Design von Materialdesigns gibt es contentControljetzt folgende Optionen: materialdoc.com/components/selection-controls
SimpsOff

392

Sie können die Farbe direkt in XML ändern. Verwendung buttonTintfür die Box: (ab API-Level 23)

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

Sie können dies auch appCompatCheckbox v7für ältere API-Ebenen tun :

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

5
AppCompatCheckBox ... Danke. Das wusste ich nicht.
Moskis

8
Nett, danke! Und vergessen Sie nicht, xmlns: app = " schemas.android.com/apk/res-auto " zu Ihrem Haupt- / Elternlayout hinzuzufügen
Alberto Méndez

2
Funktioniert nicht für mich mit 'android.support.v7.widget.AppCompatCheckBox'
Zvi

1
Dies wird automatisch verwendet, wenn Sie CheckBox in Ihren Layouts verwenden. Sie sollten diese Klasse nur manuell verwenden müssen, wenn Sie benutzerdefinierte Ansichten schreiben.
12.

2
Wie wäre es mit 2 verschiedenen Farben für aktivierte und nicht aktivierte Zustände?
DYS

129

Sie können das Android-Design des Kontrollkästchens festlegen, um die gewünschte Farbe in Ihrer styles.xml zu erhalten.

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

dann in Ihrer Layoutdatei:

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

Im Gegensatz zur Verwendung android:buttonTint="@color/CHECK_COLOR"dieser Methode funktioniert unter Api 23


5
TEXTCOLORSECONDARY !!!! Danke mann! Das ist es. Ich habe lange gesucht, um nur die nicht ausgewählte Hintergrundfarbe zu ändern, und wollte nicht mit benutzerdefinierten Zeichen arbeiten. Das ist es!
Mulgard

@ Mulgard froh, dass ich helfen kann!
Amro Elaswar

2
Arbeitete für mich, musste aber zur CheckBox-XML hinzugefügt werden, um den Text sehen zu können - android: textColor = "@ color / textColor"
Zvi

Wie mache ich das auch programmgesteuert?
Zvi

@ Zvi Ich bin nicht sicher, ob Sie dies programmatisch tun können
Amro elaswar

48

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

1
Danke dir. Sie rocken, die bessere Lösung.
Carlos

Es gab mir ein unerwartetes Ergebnis mit Farben. Bist du sicher, dass du nichts verwechselt hast?
Kirill Karmazin

@ Carlos Dies ist keine "bessere" Lösung, weil Sie in Android immer versuchen sollten, alle Layout-Sachen in der XML-Datei und nicht programmgesteuert
festzulegen,

@kyay Nicht "immer" ... das Android-Ressourcensystem ist ein Chaos und oft programmgesteuert ist es viel einfacher und wartbarer.
Nyholku

Es hilft irgendwie bei der Trennung von Bedenken
kyay

42

Verwenden Sie buttonTintdiese Option, um die Farbe der Schaltfläche und des Farbwählers für die API-Version über 21+ zu ändern.

<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
Können Sie Englisch sprechen und Ihre Antwort erklären? Bitte
GGO

Bleib immer bei Englisch in SO.
Nyconing

Es ist eine bessere Antwort
Vivek A Naik

Dies scheint der einzig einfache Ansatz zu sein, um sowohl die aktivierten als auch die nicht aktivierten Farben einzustellen, die auf allen Geräten funktionieren.
Gumby The Green

Dies sollte die akzeptierte Antwort sein. Es sollte jedoch beachtet werden, dass es nicht funktioniert, wenn der Selektor als valuesRessource deklariert ist . Wie aus dem oben gezeigten Pfad hervorgeht, muss er sich im colorsRessourcenordner befinden.
Benjamin Basmaci

18

Ich würde vorschlagen, den Stilansatz in Android als Methode zum Konfigurieren der integrierten Android-Ansichten zu verwenden und Ihrem Projekt einen neuen Stil hinzuzufügen:

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

und fügen Sie diesen Stil dem Thema des Kontrollkästchens zu: android: theme = "@ style / youStyle"

hoffe das hilft.


Stimmen Sie mit dieser Lösung überein, sollten diese Attribute mit der standardmäßig integrierten Android-Komponente besser funktionieren, ohne Probleme mit dem Zeichen wie der hochgestimmten Antwort zu haben.
Trung Le

1
Dies ist eine Wiederholung von Amro elaswars Antwort von 9 Monaten zuvor.
jk7

Dies ist die Art von Lösung, die eine echte Lösung ist.
Iharob Al Asimi

16

Fügen Sie buttonTint in Ihre XML ein

<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
Der Inhalt dieser Antwort existiert bereits in der Antwort von afathman .
MTCoster

10

Fügen Sie diese Zeile in Ihre styles.xmlDatei ein:

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

Bitte bearbeiten Sie Ihre Antwort mit Ihrem Beispiel und posten Sie es nicht als Kommentar
Bish

4
Leichte Korrektur: Es ist <item name = " android : colorAccent> </ item>. Dies ist auch nur ab API 21 und
höher

Dies ändert die FarbeAccent, es ist nicht das, was es gefragt wurde
Alberto M

1
Auf dem Galaxy S3 wird nur der überprüfte Status einer CheckBox geändert. Der ungeprüfte Zustand ist jedoch immer noch der gleiche.
Slava

9

buttonTint hat bei mir versucht

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

Ich hatte das gleiche Problem, ich habe eine Lösung mit der folgenden Technik gefunden. Kopieren Sie das btn_check.xmlvon android-sdk/platforms/android-#(version)/data/res/drawablein den Zeichenordner Ihres Projekts und ändern Sie die Bildzustände "Ein" und "Aus" in Ihre benutzerdefinierten Bilder.
Dann braucht deine XML nur nochandroid:button="@drawable/btn_check"

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

Wenn Sie verschiedene Standard-Android-Symbole verwenden möchten, können Sie Folgendes verwenden:

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

Tolle Antwort - viel einfacher als das Erstellen von benutzerdefinierten XML-Dateien. Danke! Ich habe einen grauen Hintergrund und der Kontrollkästchenrand war nicht sichtbar. Ich habe dies hinzugefügt und Sie können es jetzt sehen: android: button = "@ android: drawable / checkbox_off_background"
Gene Bo

1
Es gibt tatsächlich ein bisschen mehr, diesen Ansatz zu verwenden, als mir klar wurde. Aber immer noch eine gute Option. Ich habe Details unter stackoverflow.com/a/29831532/2162226
Gene Bo

5

Sie können die checkboxFarbe mithilfe einer einzelnen Codezeile ändern

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


4

100% robuster Ansatz.

In meinem Fall hatte ich keinen Zugriff auf die XML-Layout-Quelldatei, da ich das Kontrollkästchen von einer MaterialDialog-Bibliothek eines Drittanbieters erhalte. Also muss ich das programmatisch lösen.

  1. Erstellen Sie eine ColorStateList in 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. Wenden Sie es dann auf das Kontrollkästchen an:

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

PS Wenn jemand interessiert ist, können Sie Ihr Kontrollkästchen im Dialogfeld "MaterialDialog" abrufen (sofern Sie dies mit festlegen .checkBoxPromptRes(...)):

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

Hoffe das hilft.


3

Erstellen Sie eine XML-Datei Drawable resource fileunter res->drawableund benennen Sie sie beispielsweise.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>

Laden Sie Ihre benutzerdefinierten Kontrollkästchen-Bilddateien (ich empfehle PNG) auf Ihre res->drawable Ordner hoch.

Gehen Sie dann in Ihre Layoutdatei und ändern Sie Ihr Kontrollkästchen in

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

Sie können alles anpassen, solange Sie android:buttonauf die richtige XML-Datei verweisen, die Sie zuvor erstellt haben.

HINWEIS FÜR NEUHEITEN: Obwohl dies nicht obligatorisch ist, empfiehlt es sich, Ihr Kontrollkästchen im gesamten Layoutbaum mit einer eindeutigen ID zu versehen.


3

Hallo, dies ist der Themencode für Dark Theme und 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>

Wenn Sie die Farbe des Kontrollkästchens ändern möchten, wird das Attribut "colorAccent" für den aktivierten Status und das Attribut "android: textColorSecondary" für das Deaktivieren des Status verwendet.

"actionOverflowButtonStyle" wird zum Ändern der Farbe des Überlaufsymbols in der Aktionsleiste verwendet.

Das Attribut "keysearch_picture" wird zum Ändern der Farbtonfarbe der Aktionsschaltfläche in der Aktionsleiste verwendet. Dies ist ein benutzerdefiniertes Attribut in style.xml

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

Gleiches gilt für die Schaltfläche "Aktualisieren", die ich in meiner App verwende.

Das Attribut "android: popupMenuStyle" wird verwendet, um den Popup-Menüstil des hellen Themas im dunklen Thema abzurufen.

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

Und dies ist der Symbolleistencode, den ich in meiner Rocks Player-App verwende.

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

Themen: -

 <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

Sie können Ihre eigene XML in Drawable erstellen und diese als Android verwenden: background = "@ drawable / your_xml"

dadurch kann man grenzecke alles geben

<item>
    <shape>
        <gradient

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

    </shape>
</item>


1
Obwohl es nicht sinnvoll ist, über zeichnbare Vektorgrafiken Bescheid zu wissen, beantwortet diese Antwort nicht die Frage des OP nach dem Farbton der Schaltflächen.
Mike Poole

2

Sie können die folgenden zwei Eigenschaften in "colours.xml" verwenden.

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

colorControlNormal ist für die normale Ansicht des Kontrollkästchens und colorControlActivated für das Kontrollkästchen.


1

Sie können die Hintergrundfarbe von ändern, <CheckBox>indem Sie sie in a einbetten <LinearLayout>. Ändern Sie dann die Hintergrundfarbe <LinearLayout>in die gewünschte Farbe.


Die Frage ist über die Farbe des Kontrollkästchens und nicht den Hintergrund
Zvi

1

Sie sollten unten Code versuchen. Es funktioniert für mich.

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

und 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

Wenn Sie die Android-Symbole wie oben beschrieben verwenden möchten.

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

.. es ist eine nette Option, aber damit dies funktioniert - ich fand, dass Sie eine Umschaltlogik hinzufügen müssen, um das Häkchen wie folgt ein- / auszublenden:

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

        }
    });

Nun, das ist zusätzliche Arbeit, die wirklich nicht notwendig ist. In der XML-Datei des Drawables geben Sie Verweise auf ein- oder ausgeschaltete Drawable-Ressourcen für den Selektor an. Dadurch wird automatisch das richtige Zeichen entsprechend dem Status des Kontrollkästchens erstellt.
jkincali

0

Die meisten Antworten gehen durch die XML-Datei. Wenn Sie für die meisten Android-Versionen eine aktive Antwort finden und nur eine Farbe für die beiden Status haben, überprüfen Sie ein UnCheck: Hier ist meine Lösung:

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

Es gibt eine viel einfachere Möglichkeit, die Farbe programmgesteuert einzustellen. Verwenden Sie die folgende Methode: Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Mit den folgenden Codezeilen können Sie den Hintergrund des Kontrollkästchens in Ihrem Java-Code dynamisch ändern.

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

Diese Antwort war von dieser Seite . Sie können diese Site auch verwenden , um Ihre RGB-Farbe in den Hex-Wert zu konvertieren. Sie müssen die parseColor füttern

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.