如何更改复选框的颜色?

Posted

技术标签:

【中文标题】如何更改复选框的颜色?【英文标题】:How to change the color of a CheckBox? 【发布时间】:2011-08-16 18:40:48 【问题描述】:

如何更改 android 中的默认 CheckBox 颜色? 默认情况下,CheckBox 颜色为绿色,我想更改此颜色。 如果不可能,请告诉我如何自定义CheckBox

【问题讨论】:

你想改变字体的颜色吗?还是实际盒子的颜色? 我改变的实际盒子颜色 设置android:buttonTint="@color/mybrown" 是更改框颜色的简单方法。 @Shauvik 它只是在做材料设计 :) @shauvik 最好使用app:buttonTint="@color/mybrown",这样它可以在 API 上工作 【参考方案1】:

您可以直接在 XML 中更改颜色。框使用buttonTint(从 API 级别 23 开始)

<CheckBox
    android:layout_
    android:layout_
    android:buttonTint="@color/CHECK_COLOR" />

对于较旧的 API 级别,您也可以使用 appCompatCheckbox v7 执行此操作:

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

【讨论】:

AppCompatCheckBox... 谢谢。我不知道这个。 很好,谢谢!并且不要忘记将 xmlns:app="schemas.android.com/apk/res-auto" 添加到您的主/父布局 不适合我使用 'android.support.v7.widget.AppCompatCheckBox' 当您在布局中使用 CheckBox 时,将自动使用它。您应该只需要在编写自定义视图时手动使用此类。 为选中和未选中状态设置 2 种不同颜色怎么样?【参考方案2】:

如果您的 minSdkVersion 是 21+,请使用 android:buttonTint 属性更新复选框的颜色:

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

在使用 AppCompat 库并支持低于 21 的 Android 版本的项目中,您可以使用 buttonTint 属性的兼容版本:

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

在这种情况下,如果您想继承 CheckBox,请不要忘记改用 AppCompatCheckBox

以前的答案:

您可以使用android:button="@drawable/your_check_drawable" 属性更改CheckBoxs 可绘制对象。

【讨论】:

您必须创建自己的可绘制对象。必须有一个更直接的方式...... 更改 buttonTint 颜色是一种更直接的方法。我们必须使用原生元素而不是不必要地对其进行自定义。 注意:对于材料设计样式,现在有contentControl 选项:materialdoc.com/components/selection-controls buttonTint 的值似乎覆盖了textColor 的值。任何想法如何解决这个问题?【参考方案3】:

您可以设置复选框的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_
     android:layout_/>

与使用 android:buttonTint="@color/CHECK_COLOR" 不同,此方法适用于 Api 23

【讨论】:

TEXTCOLORSECONDARY!!!!谢谢你,兄弟!而已。我搜索了很长时间来更改未选择的背景颜色,并且不想使用自定义可绘制对象。就是这个! @Mulgard 很高兴我能帮上忙! 为我工作,但需要添加到 CheckBox xml 才能看到文本 - android:textColor="@color/textColor" 如何以编程方式进行操作? @Zvi 我不确定您是否可以通过编程方式完成此操作【参考方案4】:

使用 buttonTint 更改 21+ api 版本的按钮和颜色选择器的颜色。

<android.support.v7.widget.AppCompatCheckBox
                android:id="@+id/check"
                android:layout_
                android:layout_
                app:buttonTint="@color/checkbox_filter_tint"
                tools:targetApi="21"/>

res/colors/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>

【讨论】:

你能说英语并解释一下你的答案吗 在 SO 中始终坚持使用英语。 这是一个更好的答案 这似乎是设置适用于所有设备的选中和未选中颜色的唯一简单方法。 这应该是公认的答案。 Although it should be noted that it doesnt work when the selector is declared as a values resource.如上图所示,它必须在colors资源文件夹内。【参考方案5】:

程序化版本:

int states[][] = android.R.attr.state_checked, ;
int colors[] = color_for_state_checked, color_for_state_normal
CompoundButtonCompat.setButtonTintList(checkbox, new ColorStateList(states, colors));

【讨论】:

谢谢你。你摇滚,更好的解决方案。 它给了我意想不到的颜色结果,你确定你没有混淆任何东西吗? @Carlos 这不是一个“更好”的解决方案,因为在 android 中,您应该始终尝试在 xml 文件中设置所有布局内容,而不是以编程方式设置,除非您需要动态更改它 @kyay 不是“总是”...Android 资源系统是一团糟,经常以编程方式进行操作更容易且更易于维护。 它有助于分离关注点【参考方案6】:

我建议在 android 中使用 he style 方法来配置内置的 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 组件一起使用,而不会像 upvoted 的答案那样对 drawable 造成麻烦。 这是 9 个月前 Amro elaswar 回答的重复。 这是一种真正的解决方案。【参考方案7】:

在你的 xml 中添加 buttonTint

<CheckBox
      android:id="@+id/chk_remember_signup"
      android:layout_
      android:layout_
      android:buttonTint="@android:color/white"
      android:text="@string/hint_chk_remember_me" />

【讨论】:

这个答案的内容已经存在于afathman's answer。【参考方案8】:

在您的styles.xml 文件中添加这一行:

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

【讨论】:

请用您的示例编辑您的答案,不要将其作为评论发布 轻微修正:它是 这改变了 colorAccent,它不是被要求的 在 Galaxy S3 上,它仅更改 CheckBox 的选中状态。但是未选中的状态还是一样的。【参考方案9】:

我遇到了同样的问题,我使用以下技术得到了解决方案。将 btn_check.xmlandroid-sdk/platforms/android-#(version)/data/res/drawable 复制到项目的可绘制文件夹,并将“打开”和“关闭”图像状态更改为自定义图像。 那么你的xml只需要android:button="@drawable/btn_check"

<CheckBox
    android:button="@drawable/btn_check"
    android:layout_
    android:layout_
    android:checked="true" />

如果你想使用不同的默认Android图标,你可以使用:

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

【讨论】:

很好的答案 - 比创建自定义 xml 容易得多 .. 谢谢!对我来说,我的背景是灰色的,复选框边框不可见。我添加了这个,你现在可以看到它:android:button="@android:drawable/checkbox_off_background" 使用这种方法实际上比我意识到的要多一些......但仍然是一个不错的选择。我在***.com/a/29831532/2162226 下面添加了详细信息【参考方案10】:

buttonTint 为我工作尝试

android:buttonTint="@color/white"

<CheckBox
    android:layout_
    android:layout_
    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"/>

【讨论】:

【参考方案11】:

res-&gt;drawable下创建一个xmlDrawable resource file并命名,例如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-&gt;drawable 文件夹。

然后进入您的布局文件并将您的复选框更改为

<CheckBox
    android:id="@+id/checkBox1"
    android:button="@drawable/checkbox_custom_01"
    android:layout_
    android:layout_
    android:layout_alignParentLeft="true"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:text="CheckBox"
    android:textSize="32dip"/>

您可以自定义任何内容,只要 android:button 指向您之前创建的正确 XML 文件。

新手注意:虽然这不是强制性的,但在整个布局树中使用唯一 id 命名复选框仍然是一种好习惯。

【讨论】:

【参考方案12】:

100% 稳健的方法。

在我的例子中,我没有访问 XML 布局源文件的权限,因为我从第 3 方 MaterialDialog 库中获得了 Checkbox。 所以我必须以编程方式解决这个问题。

    在 xml 中创建一个 ColorStateList:

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>

    然后将其应用于复选框:

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

附:此外,如果有人感兴趣,您可以通过以下方式从 MaterialDialog 对话框中获取您的复选框(如果您使用 .checkBoxPromptRes(...) 设置它):

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

希望这会有所帮助。

【讨论】:

【参考方案13】:

您可以使用单行代码更改checkbox 颜色

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

【讨论】:

【参考方案14】:

如果 textColorSecondary 不适合您,您可能在主题中将 colorControlNormal 定义为不同的颜色。如果是这样,只需使用

<style name="yourStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">your_checked_color</item> <!-- for checked state -->
    <item name="colorControlNormal">your_unchecked_color</item> <!-- for unchecked state -->
</style>

【讨论】:

【参考方案15】:

大多数答案都通过 xml 文件。如果您找到大多数 Android 版本的有效答案,并且两种状态只有一种颜色 Check an 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);

【讨论】:

【参考方案16】:

您可以在“colors.xml”中使用以下两个属性

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

colorControlNormal是checkbox的普通视图,colorControlActivated是checkbox被勾选的时候。

【讨论】:

【参考方案17】:

您好,这是深色主题和浅色主题的主题代码。

<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" 属性用于在深色主题中获取浅色主题弹出菜单样式。

<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_
    android:elevation="4dp"
    android:layout_
    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>

【讨论】:

【参考方案18】:

您应该尝试以下代码。它对我有用。

<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
    Button="@style/currentcy_check_box_style"
    android:layout_
    android:layout_
    android:paddingLeft="20dp"
    android:text="@string/step_one_currency_aud" />

【讨论】:

【参考方案19】:

您可以在 drawable 中创建自己的 xml 并将其用作 android:background="@drawable/your_xml"

因为你可以给边界角一切

<item>
    <shape>
        <gradient

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

    </shape>
</item>

【讨论】:

虽然知道可绘制矢量图形并不好,但这个答案并不能回答 OP 关于按钮色调的问题。【参考方案20】:

通过设置ColorStateList 以编程方式设置颜色有一种更简单的方法。

 Checkbox.setButtonTintList(ColorStateList.valueOf(getContext().getColor(R.color.yourcolor)))

【讨论】:

【参考方案21】:

您可以通过将&lt;CheckBox&gt; 嵌入到&lt;LinearLayout&gt; 中来更改其背景颜色。然后把&lt;LinearLayout&gt;的背景颜色改成你想要的颜色。

【讨论】:

问题是关于复选框的颜色而不是背景【参考方案22】:

如果你要使用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);

        
    );

【讨论】:

嗯,这是额外的工作,实际上没有必要。在 drawable 的 xml 文件中,您为选择器提供对打开或关闭可绘制资源的引用。这会根据复选框的状态自动放置正确的可绘制对象。【参考方案23】:

我的 minSdkVersion15,我的 BaseAppTheme 父母是 Theme.AppCompat.Light.NoActionBar,我正在以编程方式创建我的复选框。以下步骤对我有用。

1. 在您的 Java 代码中,更改

CheckBox checkBox = new CheckBox(context);

AppCompatCheckBox checkBox = new AppCompatCheckBox(context);

2. 在您的 styles.xml 中,添加:

<style name="MyCheckboxStyle" parent="Widget.AppCompat.CompoundButton.CheckBox">
    <item name="buttonTint">@color/primary_dark</item>
</style>

3. 最后,在您的 BaseAppTheme(或 AppTheme)样式中,添加:

<item name="checkboxStyle">@style/MyCheckboxStyle</item>
<item name="android:checkboxStyle">@style/MyCheckboxStyle</item>

【讨论】:

【参考方案24】:

我的目标是使用自定义复选框按钮并删除强调色按钮色调。我尝试了接受的答案,但现在确实有效,这对我有用:

styles.xml 文件中

<style name="Theme.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
    <item name="android:button">@drawable/theme_checkbox_button</item>
    <item name="android:drawableLeft">@android:color/transparent</item>
    <item name="android:drawablePadding">10dp</item>
    <item name="android:buttonTint">@android:color/transparent</item>
    <item name="android:buttonTintMode">screen</item>
</style>

现在对于这个问题,只有android:buttonTintandroid:buttonTintMode 是必需的属性

现在还有一些额外内容:

我需要使用自定义可绘制对象,因此android:button 设置为selector 可绘制对象 我需要在框和文本之间留一些间距,因此我遵循this SO answer 并设置android:drawableLeftandroid:drawablePadding

【讨论】:

【参考方案25】:

您可以使用以下代码行在您的 java 代码中动态更改 Checkbox 的背景。

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

这个答案来自这个site。您也可以使用site 将您的 RGB 颜色转换为十六进制值,您需要输入 parseColor

【讨论】:

以上是关于如何更改复选框的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何以编程方式更改复选框选中的颜色

MudTreeView - 如何更改复选框的大小和颜色?

CSS/HTML:如何更改复选框输入中复选标记的颜色? [复制]

选中复选框后如何更改datagridview中的行颜色

如何更改 HTML 中复选框的选中标记颜色? [复制]

jquery mobile更改复选框颜色