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?

Piyush
źródło
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.

Michael
źródło
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" /> 
afathman
źródło
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

Amro Elaswar
źródło
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));
mbonnin
źródło
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>
D. Siergiejew
źródło
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.

Bahadin Khalilieh
źródło
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" />
Shweta Chauhan
źródło
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>
Yogesh Rathi
źródło
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"/>
Sai Gopi N.
źródło
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/..."
sravan
źródło
Ś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

Kishore Reddy
źródło
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.

Kirill Karmazin
źródło
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.

Tony Gil
źródło
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>
Ashish Saini
źródło
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>

abhiruchi vijay
źródło
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.

Tajveer Singh Nijjar
źródło
1

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

łagodny
źródło
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" />
Imtiyaz Khalani
źródło
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);

        }
    });
Gene Bo
źródło
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);
}
Chanh
źródło
-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)))

Swaroop
źródło
-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

Arsene Foka
źródło