studio - Android: establece el color de CheckBox
radio button style android (7)
Desde Android 5 y API nivel 21, es posible elegir libremente los colores de las casillas de verificación (y muchos otros widgets). Agregue lo siguiente a sus values-v21/styles.xml
(a la vez que se asegura de tener un respaldo para las API anteriores en values/styles.xml
:
<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>
Luego solo tienes que aplicar el estilo a tu casilla de verificación en tu diseño:
<CheckBox
style="@style/CustomCheckBox" />
¡Eso es todo, las casillas de verificación aparecen en tus colores favoritos!
He buscado en varios lugares y no parezco capaz de descifrar el cuadro de Checkable para el borde de la casilla de verificación. ¿Alguien puede señalarme en la dirección correcta?
Aquí es lo que parece sin marcar (apenas se puede ver el cuadro)
Aquí está el estado verificado
Esto es lo que trato de hacer para que se vea.
El mismo problema también ocurre cuando utiliza el tema Holo Dark para la actividad y el fondo blanco. Entonces la casilla de verificación tiene estilo oscuro. La solución simple es establecer directamente el fondo de la Holo Light de Android:
int id = Resources.getSystem().getIdentifier("btn_check_holo_light", "drawable", "android");
checkBox.setButtonDrawable(id);
Puede encontrar una gran visión general de cómo funcionan todas estas cosas en la siguiente respuesta: https://.com/a/10139809/1170154
Está especificado por los elementos extraíbles: android.R.drawable.checkbox_off_background
y android.R.drawable.checkbox_on_background
Esta será la forma más eficiente.
android: buttonTint = "@ color / black"
Ok, lo siento, pero la mayoría de estas respuestas están incompletas o tienen alguna falla menor en ellas. Controles ''estilo'' a través de diferentes versiones de Android es un dolor épico en el culo. Después de tirarme de los pelos durante días en un proyecto con restricciones de diseño muy estrictas, finalmente fracasé y escribí una aplicación de prueba y luego profundicé y probé las diversas soluciones para diseñar interruptores y casillas de verificación, ya que cuando un diseño tiene uno con frecuencia tiene el otro. Esto es lo que encontré ...
Primero: en realidad no puedes aplicarles un estilo a ninguno de ellos, pero puedes aplicar un tema a todos ellos, o solo a uno de ellos.
Segundo: puede hacerlo todo desde XML y no necesita un segundo valor-v21 / styles.xml.
Tercero: cuando se trata de switches, tienes dos opciones básicas si quieres soportar versiones anteriores de Android (como estoy seguro de que lo haces) ...
- Puede usar un
SwitchCompat
y podrá hacer que se vea igual en todas las plataformas. - Puedes usar un
Switch
y podrás tematizarlo con el resto de tu tema, o simplemente con ese interruptor en particular y en las versiones anteriores de Android verás un antiguo interruptor cuadrado sin estilo.
Ok ahora para el código de referencia simple. Nuevamente, si crea un simple Hello World! y suelta este código en el que puedes jugar al contenido de tu corazón. Todo eso es placa de caldera aquí, así que solo voy a incluir el XML para la actividad y el estilo ...
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>
Lo sé, lo sé, eres demasiado flojo para construir esto, solo quieres que se escriba tu código. Lo entiendo. Esto es lo que parece cuando lo ejecutas ...
API_21:
API_18:
Puede establecer el color CHECKBOX como este API21 y superior
android: buttonTint = "@ color / YOUR_COLOR"
<CheckBox
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:buttonTint="@color/YOUR_COLOR" />
Para el soporte de la versión anterior, use la biblioteca AppCompatCheckBox of V7
aplicación: buttonTint = "@ color / YOUR_COLOR"
<android.support.v7.widget.AppCompatCheckBox
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:buttonTint="@color/YOUR_COLOR" />
Puede usar un archivo xml de casilla de verificación personalizado para esto. Guarde el siguiente código xml en la carpeta de custom_checkbox.xml
, custom_checkbox.xml
nombre 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>
Luego use este archivo como fondo de su casilla de verificación de esta manera:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/custom_checkbox"
android:id="@+id/checkBox" />
Aquí estoy cargando mis propias imágenes que utilicé en lugar de cbchk_blue y cbunchk_blue