Як змінити колір 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.