Как изменить цвет 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.