Jak zmienić kolor CheckBox?


247

Jak zmienić domyślny CheckBoxkolor w Androidzie?
Domyślnie CheckBoxkolor jest zielony i chcę zmienić ten kolor.
Jeśli nie jest to możliwe, proszę powiedz mi, jak zrobić niestandardowy CheckBox?


1
Czy próbujesz zmienić kolor czcionki? Czy kolor rzeczywistego pudełka?

1
rzeczywisty kolor pudełka zmieniam
— Piyush,

72
Ustawienie android:buttonTint="@color/mybrown"jest łatwym sposobem na zmianę koloru pudełka.
— shauvik

6
@Shauvik to tylko praca nad projektowaniem materiałów :)
— Mucahit,

9
@shauvik lepiej jest użyć app:buttonTint="@color/mybrown"zamiast tego, w ten sposób może działać na API <21
— Nikaoto

Odpowiedzi:


187

Jeśli masz minSdkVersionukończone 21 lat, użyj android:buttonTintatrybutu, aby zaktualizować kolor pola wyboru:

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

W projektach korzystających z biblioteki AppCompat i obsługujących wersje Androida poniżej 21 możesz użyć zgodnej wersji buttonTintatrybutu:

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

W takim przypadku, jeśli chcesz podklasę CheckBox, nie zapomnij użyć AppCompatCheckBoxzamiast tego.

POPRZEDNIA ODPOWIEDŹ:

Możesz zmienić CheckBoxs rysowalny za pomocą android:button="@drawable/your_check_drawable"atrybutu.


7
Będziesz musiał stworzyć własną rysownię. Musi być prostszy sposób ...
— IgorGanapolsky

14
Zmiana przycisku Odcień jest prostszym sposobem. Zamiast tego niepotrzebnie dostosowujemy elementy natywne.
— Neela,

3
Uwaga: w przypadku stylistyki materiałów dostępne są contentControlteraz opcje: materialdoc.com/components/selection-controls
— SimpsOff

392

Możesz zmienić kolor bezpośrednio w XML. Użyj buttonTintdla pudełka: (od poziomu API 23)

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

Możesz to również zrobić za pomocą appCompatCheckbox v7starszych poziomów API:

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

5
AppCompatCheckBox ... Dzięki. Nie wiedziałem tego
— moskis

8
Fajnie dzięki! I nie zapomnij dodać xmlns: app = " schemas.android.com/apk/res-auto " do głównego / macierzystego układu
— Alberto Méndez

2
Nie działa dla mnie przy użyciu „android.support.v7.widget.AppCompatCheckBox”
— Zvi

1
Zostanie to automatycznie wykorzystane, gdy użyjesz CheckBox w swoich układach. Tej klasy powinieneś potrzebować tylko podczas pisania widoków niestandardowych.
— 최봉재

2
Co powiesz na ustawienie 2 różnych kolorów dla stanów zaznaczonych i niezaznaczonych?
— DYS,

130

możesz ustawić motyw android pola wyboru, aby uzyskać żądany kolor w swoich stylach. xml dodaj:

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

następnie w pliku układu:

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

w przeciwieństwie do korzystania z android:buttonTint="@color/CHECK_COLOR"tej metody działa pod Api 23


5
TEXTCOLORSECONDARY !!!! Dziękuje! Otóż ​​to. Szukałem grup wiekowych, aby po prostu zmienić niezaznaczony kolor tła i nie chciałem pracować z niestandardowymi rysunkami. To jest to!
— Mulgard

@Mulgard cieszę się, że mogę pomóc!
— Amro elaswar

2
Pracował dla mnie, ale musiałem dodać do xml CheckBox, aby móc zobaczyć tekst - android: textColor = "@ color / textColor"
— Zvi

Jak to zrobić również programowo?
— Zvi

@Zvi Nie jestem pewien, czy możesz to zrobić programowo
— Amro elaswar

48

Wersja programowa:

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
Dzięki Tobie. Kołyszesz, lepsze rozwiązanie.
— Carlos

dało mi nieoczekiwany efekt z kolorami, czy jesteś pewien, że niczego nie pomyliłeś?
— Kirill Karmazin

@Carlos Nie jest to „lepsze” rozwiązanie, ponieważ w Androidzie zawsze powinieneś próbować ustawiać wszystkie elementy układu w pliku xml, a nie programowo, z wyjątkiem sytuacji, gdy trzeba to dynamicznie zmieniać
— kyay

@kyay Nie „zawsze” ... system zasobów Androida to bałagan, a często robienie tego programowo jest znacznie łatwiejsze i łatwiejsze w utrzymaniu.
— nyholku

To rodzaj ułatwia oddzielenie obawy
— kyay

42

Służy buttonTintdo zmiany koloru przycisku i selektora kolorów dla wersji powyżej 21+ interfejsu 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 / 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>

3
Czy mówisz po angielsku i wyjaśnić swoją odpowiedź plse
— GGO

Zawsze trzymaj się angielskiego w SO.
— nyconing

To lepsza odpowiedź
— Vivek A Naik

Wydaje się, że jest to jedyne proste podejście do ustawiania kolorów zaznaczonych i niezaznaczonych, które działają na wszystkich urządzeniach.
— Gumby The Green

To powinna być zaakceptowana odpowiedź. Chociaż należy zauważyć, że nie działa, gdy selektor jest zadeklarowany jako valueszasób. Jak wskazano powyżej, ścieżka musi znajdować się w colorsfolderze zasobów.
— Benjamin Basmaci,

18

Sugerowałbym użycie podejścia opartego na stylu w Androidzie jako sposobu konfiguracji wbudowanych widoków Androida, dodania nowego stylu do swojego projektu:

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

i dodaj przypisanie tego stylu do motywu pola wyboru: android: theme = "@ style / youStyle"

mam nadzieję że to pomoże.


zgadzam się z tym rozwiązaniem, te atrybuty powinny działać lepiej z domyślnym wbudowanym komponentem Androida bez kłopotów z rysowalnymi, takimi jak pozytywna odpowiedź.
— Trung Le

1
To powtórzenie odpowiedzi Amro Elaswara sprzed 9 miesięcy.
— jk7

Jest to rodzaj rozwiązania, które jest PRAWDZIWE ROZWIĄZANIEM.
— Iharob Al Asimi,

16

Dodaj buttonTint w swoim pliku 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
Treść tej odpowiedzi już istnieje w odpowiedzi afathmana .
— MTCoster

10

Dodaj tę linię do swojego styles.xmlpliku:

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

Edytuj swoją odpowiedź za pomocą swojego przykładu i nie zamieszczaj jej jako komentarza
— bish

4
Nieznaczna korekta: jest to <item name = " android : colorAccent> </item>. Jest to również dostępne tylko od API 21 i
— wyższych

to zmienia kolor Procent, nie o to pytano
— Alberto M

1
W Galaxy S3 zmienia tylko zaznaczony stan CheckBox. Ale niesprawdzony stan jest nadal taki sam.
— Slava

9

buttonTint zadziałał dla mnie spróbuj

android: buttonTint = "@ kolor / biały"

<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

Napotkałem ten sam problem, mam rozwiązanie wykorzystujące technikę poniżej. Skopiować btn_check.xmlod android-sdk/platforms/android-#(version)/data/res/drawabledo folderu rozciągliwej Twojego projektu i zmień „on” i „off” stanów obraz do niestandardowych obrazów.
Wtedy twój xml będzie po prostu potrzebowałandroid:button="@drawable/btn_check"

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

Jeśli chcesz użyć różnych domyślnych ikon Androida, możesz użyć:

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

Świetna odpowiedź - znacznie łatwiej niż tworzenie niestandardowych plików XML… dzięki! Dla mnie mam szare tło, a ramka pola wyboru nie była widoczna. Dodałem to i widać to teraz: android: przycisk = "@ android: drawable / checkbox_off_background"
— Gene Bo

1
Korzystanie z tego podejścia jest w rzeczywistości nieco więcej niż sobie uświadomiłem ... ale wciąż jest to fajna opcja. Dodałem szczegóły poniżej stackoverflow.com/a/29831532/2162226
— Gene Bo

5

Możesz zmienić checkboxkolor za pomocą pojedynczej linii kodu

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


4

100% niezawodne podejście.

W moim przypadku nie miałem dostępu do pliku źródłowego układu XML, ponieważ dostaję Checkbox z trzeciej strony lib MaterialDialog. Więc muszę rozwiązać to programowo.

  1. Utwórz ColorStateList w 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. Następnie zastosuj go do pola wyboru:

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

PS Dodatkowo, jeśli ktoś jest zainteresowany, oto jak możesz uzyskać pole wyboru z okna dialogowego MaterialDialog (jeśli ustawiłeś to .checkBoxPromptRes(...)):

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

Mam nadzieję że to pomoże.


3

utwórz xml Drawable resource filepod res->drawablei nazwij go, na przykład,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>

Prześlij niestandardowe pliki obrazów pól wyboru (polecam png) do swojego res->drawablefolderu.

Następnie przejdź do pliku układu i zmień pole wyboru na

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

możesz dostosować wszystko, o ile android:buttonwskazuje na poprawny plik XML, który wcześniej utworzyłeś.

UWAGA DLA WIADOMOŚCI: chociaż nie jest to obowiązkowe, dobrą praktyką jest nazywanie swojego pola wyboru unikalnym identyfikatorem w całym drzewie układu.


3

Cześć To jest kod motywu dla Dark Theme i 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>

Jeśli chcesz zmienić kolor pola wyboru, atrybut „colorAccent” użyje dla stanu zaznaczonego, a „android: textColorSecondary” użyje dla stanu odznaczenia.

„actionOverflowButtonStyle” użyje do zmiany koloru ikony przepełnienia na pasku akcji.

Atrybut „buttonsearch_picture” będzie używał do zmiany koloru odcienia przycisku akcji na pasku akcji. Jest to niestandardowy atrybut w style.xml

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

To samo dotyczy przycisku odświeżania, którego używam w mojej aplikacji.

Atrybut „android: popupMenuStyle” służy do uzyskania stylu menu kontekstowego jasnego motywu w ciemnym motywie.

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

I to jest kod paska narzędzi, którego używam w mojej aplikacji 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>

Tematy: -

 <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

możesz utworzyć swój własny plik XML w trybie do rysowania i używać go jako systemu Android: background = "@ drawable / your_xml"

w ten sposób możesz dać wszystkim narożnik

<item>
    <shape>
        <gradient

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

    </shape>
</item>


1
Chociaż wiedza o grafice wektorowej do rysowania jest niepokojąca, ta odpowiedź nie odpowiada na pytanie OP dotyczące odcienia przycisku.
— Mike Poole,

2

Możesz użyć następujących dwóch właściwości w pliku „colors.xml”

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

colorControlNormal służy do normalnego widoku pola wyboru, a colorControlActivated ma miejsce, gdy pole wyboru jest zaznaczone.


1

Możesz zmienić kolor tła, <CheckBox>umieszczając go wewnątrz <LinearLayout>. Następnie zmień kolor tła na żądany <LinearLayout>kolor.


Pytanie dotyczy koloru pola wyboru, a nie tła
— Zvi

1

Powinieneś spróbować poniżej kodu. To działa dla mnie.

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

i 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

Jeśli zamierzasz korzystać z ikon Androida, jak opisano powyżej ..

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

.. to fajna opcja, ale aby to zadziałało - odkryłem, że musisz dodać logikę przełączania, aby pokazać / ukryć znacznik wyboru, jak poniżej:

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

        }
    });

To dodatkowa praca, która naprawdę nie jest konieczna. W pliku xml drawable podajesz odniesienia do włączanych lub wyłączanych zasobów drawable dla selektora. Spowoduje to automatyczne ustawienie poprawnej rysowalności zgodnie ze stanem pola wyboru.
— jkincali

0

Większość odpowiedzi przechodzi przez plik xml. Jeśli znajdziesz aktywną odpowiedź dla większości wersji Androida i masz tylko jeden kolor dla dwóch statusów Zaznacz pole wyboru Odznacz: oto moje rozwiązanie:

Kotlin:

val colorFilter = PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP)
CompoundButtonCompat.getButtonDrawable(checkBox)?.colorFilter = colorFilter

Jawa:

ColorFilter colorFilter = new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
Drawable drawable = CompoundButtonCompat.getButtonDrawable(checkBox);
if (drawable != null) {
    drawable.setColorFilter(colorFilter);
}

-1

Jest o wiele łatwiejszy sposób programowego ustawienia kolorów. Użyj poniższej metody Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Możesz użyć poniższych wierszy kodu, aby dynamicznie zmieniać tło pola wyboru w kodzie Java.

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

Ta odpowiedź pochodzi z tej strony . Możesz także skorzystać z tej strony, aby przekonwertować kolor RGB na wartość heksadecymalną, musisz podać parseColor

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.