¿Cómo cambiar el color de un CheckBox?


247

¿Cómo cambio el CheckBoxcolor predeterminado en Android?
Por defecto, el CheckBoxcolor es verde, y quiero cambiar este color.
Si no es posible, dígame cómo hacer una costumbre CheckBox.


1
¿Estás tratando de cambiar el color de la fuente? ¿O el color de la caja real?

1
color real de la caja que cambio
Piyush

72
Configurar android:buttonTint="@color/mybrown"es una forma fácil de cambiar el color de la caja.
shauvik

66
@Shauvik solo está trabajando en el diseño de materiales :)
Mucahit

99
@shauvik es mejor usarlo app:buttonTint="@color/mybrown", de esta manera puede funcionar en API <21
Nikaoto

Respuestas:


187

Si minSdkVersiontiene más de 21 años, utilice el android:buttonTintatributo para actualizar el color de una casilla de verificación:

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

En los proyectos que usan la biblioteca AppCompat y admiten versiones de Android inferiores a 21, puede usar una versión compatible del buttonTintatributo:

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

En este caso, si desea subclasificar a CheckBox, no olvide usarlo AppCompatCheckBox.

RESPUESTA ANTERIOR:

Puede cambiar CheckBoxs dibujable usando el android:button="@drawable/your_check_drawable"atributo.


77
Tendrías que crear tu propio dibujable. Tiene que haber una manera más directa ...
IgorGanapolsky

14
Cambiar el color del botón es una forma más directa. Tenemos que usar los elementos nativos en lugar de personalizarlos innecesariamente.
Neela

3
Nota: Para el diseño de materiales, ahora hay contentControlopciones: materialdoc.com/components/selection-controls
SimpsOff

392

Puede cambiar el color directamente en XML. Uso buttonTintpara el cuadro: (a partir del nivel 23 de API)

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

También puede hacer esto usando appCompatCheckbox v7niveles de API anteriores:

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

55
AppCompatCheckBox ... Gracias. No sabia esto.
moskis

8
¡Genial gracias! Y no olvide agregar xmlns: app = " schemas.android.com/apk/res-auto " a su diseño principal / principal
Alberto Méndez

2
No funciona para mí usando 'android.support.v7.widget.AppCompatCheckBox'
Zvi

1
Esto se usará automáticamente cuando use CheckBox en sus diseños. Solo debería necesitar usar esta clase manualmente al escribir vistas personalizadas.
최봉재

2
¿Qué tal configurar 2 colores diferentes para estados marcados y no marcados?
DYS

130

puede configurar el tema de Android de la casilla de verificación para obtener el color que desea en su styles.xml agregar:

<style name="checkBoxStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">CHECKEDHIGHLIGHTCOLOR</item>
    <item name="android:textColorSecondary">UNCHECKEDCOLOR</item>
</style>

luego en su archivo de diseño:

<CheckBox
     android:theme="@style/checkBoxStyle"
     android:id="@+id/chooseItemCheckBox"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

a diferencia del uso de android:buttonTint="@color/CHECK_COLOR"este método funciona bajo la API 23


55
TEXTCOLORSECONDARY !!!! ¡Gracias hombre! Eso es. Busqué edades para cambiar el color de fondo no seleccionado y no quería trabajar con dibujos personalizados. ¡Eso es todo!
Mulgard

@Mulgard me alegro de poder ayudar!
Amro elaswar

2
Funcionó para mí, pero necesitaba agregar al CheckBox xml para poder ver el texto - android: textColor = "@ color / textColor"
Zvi

¿Cómo lo hago también programáticamente?
Zvi

@Zvi No estoy seguro de que puedas hacer esto programáticamente
Amro elaswar

48

Versión programática:

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
Gracias a ti. Ustedes rocas, la mejor solución.
Carlos

me dio un resultado inesperado con los colores, ¿estás seguro de que no confundiste nada?
Kirill Karmazin

@Carlos Esto no es una solución "mejor", porque en Android siempre se debe tratar de establecer todas las cosas de diseño en el archivo xml y no excepto programación cuando es necesario cambiar de forma dinámica
kyay

@kyay No "siempre" ... el sistema de recursos de Android es un desastre y, a menudo, hacerlo programáticamente es mucho más fácil y más fácil de mantener.
nyholku


42

Úselo buttonTintpara cambiar el color del botón y el selector de color para las versiones superiores a 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"/>

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>

3
¿Puedes hablar inglés y explicar tu respuesta por favor
GGO

Siempre apégate al inglés en SO.
nyconing

Es una mejor respuesta
Vivek A Naik el

Este parece ser el único enfoque simple para configurar los colores marcados y sin marcar que funcionan en todos los dispositivos.
Gumby The Green

Esta debería ser la respuesta aceptada. Aunque debe tenerse en cuenta que no funciona cuando el selector se declara como un valuesrecurso. Como lo indica la ruta que se muestra arriba, tiene que estar dentro de la colorscarpeta de recursos.
Benjamin Basmaci

18

Sugeriría usar el enfoque de estilo en Android como la forma de configurar vistas de Android incorporadas, agregar un nuevo estilo en su proyecto:

<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>

y agregue asignar este estilo al tema de la casilla de verificación: android: theme = "@ style / youStyle"

espero que esto ayude.


de acuerdo con esta solución, esos atributos deberían funcionar mejor con el componente de Android incorporado predeterminado sin problemas en el dibujo como la respuesta votada.
Trung Le

1
Esta es una repetición de la respuesta de Amro elaswar de 9 meses antes.
jk7

Este es el tipo de solución que es UNA SOLUCIÓN REAL.
Iharob Al Asimi

16

Añadir buttonTint en tu 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
El contenido de esta respuesta ya existe en la respuesta de afathman .
MTCoster

10

Agregue esta línea en su styles.xmlarchivo:

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

Edite su respuesta con su ejemplo y no la publique como comentario
obispo

44
Corrección leve: es <item name = " android : colorAccent> </item>. Además, esto solo está disponible desde API 21 en adelante.
user3829751

esto cambia el color Acento, no es lo que se le preguntó
Alberto M

1
En Galaxy S3 solo cambia el estado verificado de un CheckBox. Pero el estado no verificado sigue siendo el mismo.
Slava

9

buttonTint funcionó para mí intentar

android: buttonTint = "@ color / blanco"

<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

Me enfrenté al mismo problema, obtuve una solución usando la técnica a continuación. Copie el btn_check.xmlde android-sdk/platforms/android-#(version)/data/res/drawableen la carpeta dibujable de su proyecto y cambie los estados de imagen "encendido" y "apagado" a sus imágenes personalizadas.
Entonces tu xml solo necesitaráandroid:button="@drawable/btn_check"

<CheckBox
    android:button="@drawable/btn_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true" />

Si desea usar diferentes iconos predeterminados de Android, puede usar:

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

Gran respuesta: mucho más fácil que crear un XML personalizado ... ¡gracias! Para mí, tengo un fondo gris y el borde de la casilla de verificación no estaba visible. Agregué esto y puedes verlo ahora: android: button = "@ android: drawable / checkbox_off_background"
Gene Bo

1
En realidad, utilizar este enfoque es un poco más de lo que creía ... pero sigue siendo una buena opción. He agregado detalles a continuación stackoverflow.com/a/29831532/2162226
Gene Bo

5

Puedes cambiar el checkboxcolor usando una línea de código simple

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


4

Enfoque 100% robusto.

En mi caso, no tenía acceso al archivo fuente de diseño XML, ya que recibo Checkbox de una libra de MaterialDialog de terceros. Entonces tengo que resolver esto programáticamente.

  1. Cree una ColorStateList en 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. Luego aplíquelo a la casilla de verificación:

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

PD Además, si alguien está interesado, así es cómo puede obtener su casilla de verificación desde el cuadro de diálogo MaterialDialog (si lo configura con .checkBoxPromptRes(...)):

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

Espero que esto ayude.


3

cree un xml Drawable resource filedebajo res->drawabley asígnele un nombre, por ejemplo,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>

Cargue sus archivos de imagen de casilla de verificación personalizados (recomiendo png) a su res->drawablecarpeta.

Luego vaya a su archivo de diseño y cambie su casilla de verificación a

<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"/>

puede personalizar cualquier cosa, siempre que android:buttonapunte al archivo XML correcto que creó anteriormente.

NOTA PARA LOS NOVEDADES: aunque no es obligatorio, es una buena práctica nombrar su casilla de verificación con una identificación única en todo su árbol de diseño.


3

Hola, este es el código de tema para Dark Theme y Light Theme.

<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>

Si desea cambiar el color de la casilla de verificación, el atributo "colorAccent" se usará para el estado marcado y "android: textColorSecondary" se usará para desmarcar el estado.

"actionOverflowButtonStyle" se usará para cambiar el color del icono de desbordamiento en la barra de acción.

El atributo "buttonsearch_picture" se usará para cambiar el color del tinte del botón de acción en la barra de acción. Este es un atributo personalizado en style.xml

<attr name="buttonsearch_picture" format="reference"/>

Lo mismo es para el botón de actualización que estoy usando en mi aplicación.

El atributo "android: popupMenuStyle" se utiliza para obtener el estilo del menú emergente del tema Light en el tema Dark.

<style name="PopupMenu" parent="Theme.AppCompat.Light.NoActionBar">
</style>

Y este es el código de barra de herramientas que estoy usando en mi aplicación 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>

Temas: -

 <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

puedes crear tu propio xml en drawable y usarlo como android: background = "@ drawable / your_xml"

en eso puedes darle todo a la esquina

<item>
    <shape>
        <gradient

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

    </shape>
</item>


1
Si bien es bueno saber acerca de los gráficos vectoriales dibujables, esta respuesta no responde a la pregunta del OP sobre el tinte del botón.
Mike Poole

2

Puede usar las siguientes dos propiedades en "colors.xml"

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

colorControlNormal es para la vista normal de la casilla de verificación, y colorControlActivated es para cuando la casilla de verificación está marcada.


1

Puede cambiar el color de fondo de la <CheckBox>incrustación dentro de a <LinearLayout>. Luego cambie el color de fondo de <LinearLayout>al color que desee.


La pregunta es sobre el color de la casilla de verificación y no el fondo
Zvi

1

Deberías probar el siguiente código. Me esta funcionando.

<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>

y 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

Si va a usar los íconos de Android, como se describió anteriormente ...

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

.. es una buena opción, pero para que esto funcione, descubrí que debes agregar la lógica de alternar para mostrar / ocultar la marca de verificación, así:

    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);

        }
    });

Bueno, este es un trabajo extra que realmente no es necesario. En el archivo xml del sorteo, usted proporciona referencias a recursos extraíbles para el selector. Esto pone automáticamente el dibujo correcto según el estado de la casilla de verificación.
jkincali

0

La mayoría de las respuestas pasan por el archivo xml. Si encuentra una respuesta activa para la mayoría de las versiones de Android y solo tiene un color para los dos estados Marque una casilla de verificación: aquí está mi solución:

Kotlin:

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);
}

-1

Hay una manera mucho más fácil de configurar el color mediante programación. Utilice el siguiente método, Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Puede usar las siguientes líneas de código para cambiar dinámicamente el fondo de la casilla de verificación en su código Java.

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

Esta respuesta fue de este sitio . También puede usar este sitio para convertir su color RGB al valor hexadecimal, necesita alimentar el parseColor

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.