Как изменить цвет CheckBox?


247

Как изменить CheckBoxцвет по умолчанию в Android?
По умолчанию CheckBoxцвет зеленый, и я хочу изменить этот цвет.
Если это невозможно, подскажите пожалуйста, как сделать кастом CheckBox?


1
Вы пытаетесь изменить цвет шрифта? Или цвет самой коробки?

1
фактический цвет коробки я меняю
— Пиюш

72
Установка android:buttonTint="@color/mybrown"- это простой способ изменить цвет окна.
— Шаувик

6
@Shauvik это просто работает над дизайном материала :)
— Mucahit

9
@shauvik лучше использовать app:buttonTint="@color/mybrown"вместо этого, таким образом он может работать на API <21
— Nikaoto

Ответы:


187

Если вам minSdkVersion21+, используйте android:buttonTintатрибут для обновления цвета флажка:

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

В проектах, которые используют библиотеку AppCompat и поддерживают версии Android ниже 21, вы можете использовать совместимую версию buttonTintатрибута:

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

В этом случае, если вы хотите создать подкласс CheckBox, не забудьте использовать AppCompatCheckBoxвместо этого.

ПРЕДЫДУЩИЙ ОТВЕТ:

Вы можете изменить CheckBoxs drawable используя android:button="@drawable/your_check_drawable"атрибут.


7
Вы должны создать свой собственный Drawable. Должен быть более прямой путь ...
— Игорь Ганапольский

14
Изменение цвета buttonTint является более простым способом. Мы должны использовать нативные элементы, вместо этого настраивая их без необходимости.
— Нила

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 ... Спасибо. Я этого не знал.
— Москис

8
Хорошо, спасибо! И не забудьте добавить xmlns: app = " schemas.android.com/apk/res-auto " в основной / родительский макет
— Альберто Мендес,

2
У меня не работает использование 'android.support.v7.widget.AppCompatCheckBox'
— Zvi

1
Это будет автоматически использоваться при использовании CheckBox в ваших макетах. Вам нужно только вручную использовать этот класс при написании пользовательских представлений.
— 최봉재

2
Как насчет установки 2 разных цветов для отмеченных и непроверенных состояний?
— DYS

130

Вы можете установить для Android тему флажка, чтобы получить нужный цвет в вашем файле styles.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
TEXTCOLORSECONDARY !!!! Спасибо, мужик! Вот и все. Я искал целую вечность, чтобы просто изменить невыбранный цвет фона, и не хотел работать с пользовательскими объектами рисования. Это оно!
— Малгард

@Mulgard рад, что могу помочь!
— Амро Эласвар

2
Работал для меня, но нужно было добавить в CheckBox xml, чтобы можно было видеть текст - android: textColor = "@ color / textColor"
— 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 вы всегда должны пытаться установить все
— элементы

@kyay Не "всегда" ... система ресурсов Android - беспорядок, и часто делать это программно гораздо проще и проще в обслуживании.
— Нихолку

Это как бы помогает разделению интересов
— kyay

42

Используйте buttonTintдля изменения цвета кнопки и селектора цвета для более 21+ версии 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"/>

Рез / цвет / 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

Всегда придерживайтесь английского в SO.
— nyconing

Это лучший ответ
— Vivek A Naik

Похоже, это единственный простой подход для установки как проверенных, так и непроверенных цветов, который работает на всех устройствах.
— Гамби Грин

Это должен быть принятый ответ. Хотя следует отметить, что он не работает, когда селектор объявлен как 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: theme = "@ style / youStyle"

надеюсь это поможет.


Согласитесь с этим решением, эти атрибуты должны работать лучше со встроенным компонентом Android по умолчанию, без лишних хлопот, как в ответе с голосованием.
— Трунг Ле

1
Это повторение ответа Амро Эласвара от 9 месяцев назад.
— jk7

Это такое решение, которое НАСТОЯЩЕЕ РЕШЕНИЕ.
— Ихароб Аль Асими

16

Добавить buttonTint в ваш 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
Содержание этого ответа уже существует в ответе афатмана .
— MTCoster

10

Добавьте эту строку в ваш styles.xmlфайл:

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

Пожалуйста, отредактируйте свой ответ своим примером и не
— публикуйте

4
Небольшая коррекция: это <item name = " android : colorAccent> </ item>. Кроме того, это доступно только из API 21 и выше.
— user3829751

это меняет цвет на Accent, это не то, о чем его спрашивали
— Alberto M

1
На Galaxy S3 меняется только проверенное состояние CheckBox. Но непроверенное состояние остается прежним.
— Слава

9

ButtonTint работал для меня, попробуйте

андроид: 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.xmlfrom android-sdk/platforms/android-#(version)/data/res/drawableв папку drawable вашего проекта и измените состояния «on» и «off» на ваши собственные изображения.
Тогда ваш 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: drawable / checkbox_off_background"
— Джин Бо,

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

5

Вы можете изменить checkboxцвет, используя одну строку кода

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


4

100% надежный подход.

В моем случае у меня не было доступа к исходному файлу макета XML, так как я получаю Checkbox от сторонней библиотеки 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 в Drawable и использовать его как Android: background = "@ drawable / 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

Вы можете использовать следующие два свойства в "colors.xml"

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

colorControlNormal для нормального просмотра флажка, а colorControlActivation для того, когда флажок установлен.


1

Вы можете изменить цвет фона <CheckBox>, вставив его внутрь <LinearLayout>. Затем измените цвет фона <LinearLayout>на нужный вам цвет.


Вопрос о цвете флажка, а не о фоне
— Цви

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-файле drawable вы предоставляете ссылки на включаемые или отключаемые ресурсы для селектора. Это автоматически ставит правильное рисование в соответствии с состоянием флажка.
— Jkincali

0

Большинство ответов проходят через XML-файл. Если вы найдете активный ответ для большинства версий Android и только один цвет для двух статусов, отметьте «Отменить проверку»: вот мое решение:

Котлин:

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

Ява:

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

Вы можете использовать приведенные ниже строки кода, чтобы динамически изменить фон Checkbox в вашем 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.