Android:设置CheckBox的颜色

时间:2012-07-13 04:30:04

标签: android android-layout

我搜索了很多地方,似乎无法找出复选框边框的CheckBox drawable。有人能指出我正确的方向吗?

以下是未经检查的内容(几乎看不到框)

enter image description here

这是检查状态

enter image description here

这是我试图让它看起来像。

enter image description here

7 个答案:

答案 0 :(得分:55)

您可以使用自定义复选框xml文件。将以下xml代码保存在drawables文件夹中,将其命名为custom_checkbox.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/cbchk_blue"
        android:state_focused="false">
    </item>
    <item android:state_checked="true" 
        android:drawable="@drawable/cbchk_blue"
        android:state_focused="true">
    </item>
    <item android:state_checked="false" 
        android:drawable="@drawable/cbunchk_blue"
        android:state_focused="false">
    </item>
    <item android:state_checked="false" 
        android:drawable="@drawable/cbunchk_blue"
        android:state_focused="true">
    </item>
</selector>

然后使用此文件作为您的复选框的背景,如下所示:

       <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/custom_checkbox"
        android:id="@+id/checkBox" />

我在这里上传自己的图片,用于代替 cbchk_blue cbunchk_blue

Unchecked CheckBox Checked CheckBox

答案 1 :(得分:33)

使用主题Holo Dark for Activity和白色背景时也会出现同样的问题。所以复选框有黑暗风格。简单的解决方法是直接从Android的Holo Light设置背景:

int id = Resources.getSystem().getIdentifier("btn_check_holo_light", "drawable", "android");
checkBox.setButtonDrawable(id);

您可以在以下答案中找到所有这些内容的完整概述: https://stackoverflow.com/a/10139809/1170154

答案 2 :(得分:27)

从Android 5和API 21级开始,可以自由选择复选框(以及许多其他小部件)的颜色。将以下内容添加到values-v21/styles.xml(同时确保您在values/styles.xml中对早期API进行回退:

<style name="CustomCheckBox">
    <item name="android:theme">@style/CheckBoxAppTheme</item>
</style>

<style name="CheckBoxAppTheme">
    <item name="android:colorAccent">
        @color/theFillColorInCheckedState
    </item>
    <item name="android:colorControlNormal">
        @color/theBorderColorInUncheckedState
    </item>
    <item name="android:colorControlHighlight">
        @color/theBackgroundColorWhenFocusingTheCheckBox
    </item>
</style>

然后,您只需将样式应用于布局中的复选框:

<CheckBox
    style="@style/CustomCheckBox" />

就是这样,复选框以您喜欢的颜色显示!

答案 3 :(得分:15)

好的,所以我很抱歉,但大多数答案都不完整或者有一些小错误。 &#39;定型&#39;不同版本的Android中的控件是屁股中的史诗痛苦。在一个项目设计受到严格限制的情况下拔掉头发几天之后,我终于崩溃并编写了一个测试应用程序然后真正挖掘并测试了各种解决方案,用于样式开关和复选框,因为当设计有一个它经常有另一个。这是我发现的......

首先:您实际上不能为其中任何一个设置样式,但您可以将主题应用于所有这些主题,或仅应用其中一个主题。

第二:您可以使用XML完成所有操作,并且您不需要第二个值-v21 / styles.xml。

第三:当涉及到交换机时,如果您想支持旧版Android(例如我确定您这样做),您有两个基本选择......

  1. 您可以使用SwitchCompat,并且可以让它在不同平台上看起来一样。
  2. 您可以使用Switch,然后您可以使用主题的其余部分进行主题设置,或者仅使用特定的开关,在较旧版本的Android上,您只会看到没有样式的旧方块开关
  3. 现在可以使用简单的参考代码。再次,如果您创建一个简单的Hello World!并删除此代码,你可以发挥你的心灵内容。所有这些都是锅炉板,所以我只是要为活动和风格包含XML ...

    ... activity_main.xml中

    <?xml version="1.0" encoding="utf-8"?>
    

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="'Styled' SwitchCompat" />
    
        <android.support.v7.widget.SwitchCompat
            android:id="@+id/switch_item"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false"
            android:textOff="OFF"
            android:textOn="ON"
            app:switchTextAppearance="@style/BrandedSwitch.text"
            app:theme="@style/BrandedSwitch.control"
            app:showText="true" />
    
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Themed SwitchCompat" />
    
        <android.support.v7.widget.SwitchCompat
            android:id="@+id/switch_item2"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false" />
    
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Themed Switch" />
    
        <Switch
            android:id="@+id/switch_item3"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false"
            android:textOff="OFF"
            android:textOn="ON"/>
    
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="'Styled' Switch" />
    
        <Switch
            android:id="@+id/switch_item4"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false"
            android:textOff="OFF"
            android:textOn="ON"
            android:theme="@style/BrandedSwitch"/>
    
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="'Styled' CheckBox" />
    
        <CheckBox
            android:id="@+id/checkbox"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false"
            android:theme="@style/BrandedCheckBox"/>
    
    </RelativeLayout>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.kunai.switchtest.MainActivity">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Themed CheckBox" />
    
        <CheckBox
            android:id="@+id/checkbox2"
            android:layout_width="wrap_content"
            android:layout_height="46dp"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:checked="true"
            android:longClickable="false"/>
    
    </RelativeLayout>
    

    ... styles.xml

    <resources>
    
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#3F51B5</item>
        <item name="colorPrimaryDark">#303F9F</item>
        <item name="colorAccent">#FF4081</item>
    </style>
    
    <style name="BrandedSwitch.control" parent="Theme.AppCompat.Light">
        <!-- active thumb & track color (30% transparency) -->
        <item name="colorControlActivated">#e6e600</item>
        <item name="colorSwitchThumbNormal">#cc0000</item>
    </style>
    
    <style name="BrandedSwitch.text" parent="Theme.AppCompat.Light">
        <item name="android:textColor">#ffa000</item>
        <item name="android:textSize">9dp</item>
    </style>
    
    <style name="BrandedCheckBox" parent="AppTheme">
        <item name="colorAccent">#aaf000</item>
        <item name="colorControlNormal">#ff0000</item>
    </style>
    
    <style name="BrandedSwitch" parent="AppTheme">
        <item name="colorAccent">#39ac39</item>
    </style>
    

    我知道,我知道,你太懒于构建它,你只想写你的代码。我知道了。这就是你运行它时的样子......

    API_21:

    API 21

    API_18:

    API18

答案 4 :(得分:7)

您可以设置 CHECKBOX颜色,就像这样 API21&amp;上述

  

机器人:buttonTint = “@颜色/ YOUR_COLOR”

<CheckBox
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:buttonTint="@color/YOUR_COLOR" />

对于旧版本支持,请使用V7库的 AppCompatCheckBox

  

应用程式:buttonTint = “@颜色/ YOUR_COLOR”

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_height="wrap_content"
    android:layout_width="match_parent"  
    app:buttonTint="@color/YOUR_COLOR" /> 

答案 5 :(得分:6)

答案 6 :(得分:1)

这将是最有效的方式。

机器人:buttonTint =&#34; @彩色/黑色&#34;