Як змінити колір CheckBox?


247

Як змінити CheckBoxколір за замовчуванням в Android?
За замовчуванням CheckBoxколір зелений, і я хочу змінити цей колір.
Якщо це неможливо, скажіть, як зробити замовлення CheckBox?


1
Ви намагаєтесь змінити колір шрифту? Або колір фактичної коробки?

1
фактичний колір я
змінюю

72
Налаштування android:buttonTint="@color/mybrown"- це простий спосіб змінити колір коробки.
shauvik

6
@Shauvik це просто працює над дизайном матеріалів :)
Mucahit

9
@shauvik краще використовувати app:buttonTint="@color/mybrown"натомість, таким чином він може працювати над API <21
Nikaoto

Відповіді:


187

Якщо ваш атрибут minSdkVersionuse 21+ використовується android:buttonTintдля оновлення кольору прапорця:

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

У проектах, які використовують бібліотеку AppCompat та підтримують версії Android нижче 21 року, ви можете використовувати компактну версію buttonTintатрибута:

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

У цьому випадку, якщо ви хочете підклас CheckBox, не забудьте використати AppCompatCheckBoxнатомість.

ПОПЕРЕДНЯ ВІДПОВІДЬ:

Ви можете змінити CheckBoxs малювання за допомогою android:button="@drawable/your_check_drawable"атрибута.


7
Вам доведеться створити власний малюнок. Має бути більш прямий шлях ...
ІгорГанапольський,

14
Зміна кольору кнопки відтінку - більш прямий шлях вперед. Ми маємо використовувати нативні елементи замість того, щоб без потреби їх налаштовувати.
Ніла

3
Примітка. Для стильового дизайну матеріалів зараз є contentControlваріанти: materialdoc.com/components/selection-controls
SimpsOff

392

Ви можете змінити колір безпосередньо в XML. Використовуйте buttonTintдля поля: (станом на рівень API 23)

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

Ви також можете це зробити, використовуючи appCompatCheckbox v7для старих рівнів API:

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

5
AppCompatCheckBox ... Дякую. Я цього не знав.
moskis

8
Приємно, дякую! І не забудьте додати xmlns: app = " schemas.android.com/apk/res-auto " до вашого основного / батьківського макета
Альберто Мендес

2
Не працює для мене, використовуючи 'android.support.v7.widget.AppCompatCheckBox'
Zvi

1
Це автоматично використовуватиметься при використанні CheckBox у своїх макетах. Вам слід лише вручну використовувати цей клас під час написання спеціальних представлень.
최봉재

2
Як щодо налаштування 2 різних кольорів для перевірених та неперевірених станів?
DYS

130

ви можете встановити андроїд тему прапорця, щоб отримати потрібний колір у ваших стилях.xml додати:

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

потім у вашому файлі компонування:

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

на відміну від використання android:buttonTint="@color/CHECK_COLOR"цього методу працює під Api 23


5
ТЕКСТОЛОРСЕКОНДАРНИЙ !!!! ДЯК, ти людина! Це воно. Я шукав віки, щоб просто змінити невибраний колір тла і не хотів працювати з власноручними малюнками. Це воно!
Малгард

@Mulgard рада, що можу допомогти!
Amro elaswar

2
Працював для мене, але потрібно було додати до CheckBox xml, щоб мати можливість бачити текст - android: textColor = "@ color / textColor"
Zvi

Як це зробити також програмно?
Zvi

@Zvi Я не впевнений, що ти можеш це робити програмно
Amro elaswar

48

Програмна версія:

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
Завдяки тобі. Ви скелі, краще рішення.
Карлос

це дало мені несподіваний результат із кольорами, ви впевнені, що нічого не переплутали?
Кирило Кармазін

@Carlos Це не "краще" рішення, тому що в android ви завжди повинні намагатися встановити всі елементи макета у XML-файлі, а не програмно, за винятком випадків, коли вам потрібно це змінити динамічно
kayay

@kyay Не "завжди" ... Система ресурсів Android - це безлад, і часто це робити програмно, набагато простіше і рентабельніше.
nyholku

Це свого роду допомагає розділити проблеми
kayay

42

Використовуйте, buttonTintщоб змінити колір кнопки та селектор кольорів для версії версії API вище 21+.

<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 / color / 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
Чи можете ви розмовляти англійською мовою і пояснити свою відповідь plse
GGO

Завжди дотримуйтесь англійської мови.
Ніконінг

Це краща відповідь
Vivek A Naik

Здається, це єдиний простий підхід для встановлення як перевірених, так і неперевірених кольорів, який працює на всіх пристроях.
Gumby The Green

Це має бути прийнятою відповіддю. Хоча слід зазначити, що він не працює, коли селектор оголошується valuesресурсом. Як вказує шлях, показаний вище, він повинен знаходитися всередині colorsпапки ресурсів.
Бенджамін Басмачі

18

Я б запропонував використовувати підхід до стилю в android як спосіб налаштування вбудованих переглядів Android, додати новий стиль у свій проект:

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

і додайте призначити цей стиль темі прапорця: android: topic = "@ style / youStyle"

сподіваюся, що це допомагає.


погодьтеся з цим рішенням, ці атрибути повинні краще працювати з вбудованим компонентом Android за замовчуванням, без клопоту про те, як можна відповісти.
Trung Le

1
Це повторення відповіді Amro elaswar від 9 місяців раніше.
jk7

Це таке рішення, яке є РЕАЛЬНИМ РІШЕННЯМ.
Іхароб Аль Асімі


10

Додайте цей рядок у свій styles.xmlфайл:

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

Відредагуйте свою відповідь своїм прикладом і не публікуйте її як коментар
біш

4
Незначна корекція: це <item name = " android : colorAccent> </item>. Також це доступне лише в API 21 і вище.
user3829751

це змінює колір акценту, це не те, про що його запитали
Альберто М

1
У Galaxy S3 він змінює лише перевірений стан CheckBox. Але неперевірений стан все одно той самий.
Слава

9

buttonTint працював для мене, спробуйте

android: buttonTint = "@ колір / білий"

<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

Я зіткнувся з тією ж проблемою, я отримав рішення, використовуючи нижче техніку. Скопіюйте папку btn_check.xmlз android-sdk/platforms/android-#(version)/data/res/drawableв проектну папку, яку ви можете намалювати, і змініть стани зображень "увімкнено" та "вимкнено" на свої власні зображення.
Тоді ваш xml просто знадобитьсяandroid:button="@drawable/btn_check"

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

Якщо ви хочете використовувати різні піктограми Android за замовчуванням, ви можете використовувати:

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

Чудова відповідь - набагато простіше, ніж створювати власні xml .. дякую! Для мене сірий фон, а рамка прапорця не була видна. Я додав це, і ви можете це побачити зараз: android: button = "@ android: dravable / checkbox_off_background"
Джин Бо

1
Насправді є трохи більше використання цього підходу, ніж я зрозумів .. але все ж приємний варіант. Я додав деталі нижче stackoverflow.com/a/29831532/2162226
Джин Бо

5

Ви можете змінити checkboxколір, використовуючи окремий рядок коду

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


4

100% надійний підхід.

У моєму випадку у мене не було доступу до вихідного файлу макета XML, оскільки я отримую прапорець від 3-ї партії вкладки MaterialDialog. Тому я маю це вирішити програмно.

  1. Створіть ColorStateList у 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. Потім застосуйте його до прапорця:

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

PS Крім того, якщо когось цікавить, ось як ви можете отримати свій прапорець у діалоговому вікні MaterialDialog (якщо встановити його .checkBoxPromptRes(...)):

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

Сподіваюсь, це допомагає.


3

створювати XML - Drawable resource fileпід res->drawableі назвіть його, наприклад,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>

Завантажте власні файли зображень прапорець (я рекомендую png) у вашу res->drawableпапку.

Потім увійдіть у файл макета і змініть прапорець на

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

ви можете налаштувати що завгодно, якщо android:buttonвказує на правильний XML-файл, який ви створили раніше.

ПРИМІТКА ДО НОВИНИ: хоча це не є обов’язковим, проте все-таки є хорошою практикою називати свій прапорець унікальним ідентифікатором у всьому дереві макета.


3

Привіт Це код теми як для темної, так і для світлої теми.

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

Якщо ви хочете змінити колір прапорця, тоді атрибут "colorAccent" використовуватиме для встановленого стану, а "android: textColorSecondary" використовуватиме для зняття галочки.

"actionOverflowButtonStyle" використовуватиме для зміни кольору значка переповнення на панелі дій.

Атрибут "buttonsearch_picture" використовуватиме для зміни кольору відтінку кнопки дії в панелі дій. Це спеціальний атрибут у style.xml

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

Те саме стосується кнопки оновлення, яку я використовую у своєму додатку.

Атрибут "android: popupMenuStyle" використовується для отримання стилю спливаючого меню Light тема у темній темі.

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

І це код на панелі інструментів, який я використовую в додатку 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>

Теми: -

 <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

ви можете створити свій власний xml у файлі, що малюється, та використовувати його як android: background = "@ dravable / your_xml"

в тому, що ви можете дати прикордонному куточку все

<item>
    <shape>
        <gradient

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

    </shape>
</item>


1
Незважаючи на те, що відомо про графічну векторну графіку, ця відповідь не відповідає на питання ОП щодо відтінку кнопок.
Майк Пул

2

Ви можете використовувати наступні два властивості у "color.xml"

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

colorControlNormal призначений для звичайного перегляду прапорця, а colorControlActivate - для, коли прапорець встановлений.


1

Ви можете змінити колір тла <CheckBox>, вставивши його всередині <LinearLayout>. Потім змініть колір тла <LinearLayout>на потрібний колір.


Питання про колір прапорця, а не про фон
Zvi

1

Спробуйте спробувати нижче код. Це працює для мене.

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

і 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

Якщо ви збираєтесь використовувати піктограми Android, як описано вище ..

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

.. це приємний варіант, але для того, щоб це працювало - я виявив, що вам потрібно додати логіку перемикання, щоб показати / приховати галочку, як це:

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

        }
    });

Ну, це зайва робота, яка насправді не потрібна. У XML-файлі Dravable ви подаєте посилання на ввімкнення або вимкнення джерел перегляду для селектора. Це автоматично ставить правильний малюнок відповідно до стану прапорця.
jkincali

0

Більшість відповідей проходить через файл XML. Якщо ви знайдете активну відповідь на більшість версій Android і є лише одним кольором для двох статусів. Перевірте UnCheck: ось моє рішення:

Котлін:

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

Існує набагато простіший спосіб встановити колір програмно. Використовуйте метод нижче, Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Ви можете використовувати рядки коду нижче, щоб динамічно змінювати фон прапорець у своєму коді Java.

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

Ця відповідь була з цього сайту . Ви також можете використовувати цей сайт для перетворення кольору RGB у значення Hex, вам потрібно подати parseColor

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.