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

247

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

Piyush
источник
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" /> 
afathman
источник
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));
mbonnin
источник
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/..."
sravan
источник
Отличный ответ - гораздо проще, чем создавать пользовательские 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>на нужный вам цвет.

mellowg
источник
Вопрос о цвете флажка, а не о фоне
Цви
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)))

Swaroop
источник
-2

Вы можете использовать приведенные ниже строки кода, чтобы динамически изменить фон Checkbox в вашем Java-коде.

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

Этот ответ был с этого сайта . Вы также можете использовать этот сайт, чтобы преобразовать ваш цвет RGB в значение Hex, вам нужно кормить parseColor

Арсен Фока
источник