style studio react programacion example color android android-layout

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



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

  1. Puede usar un SwitchCompat y podrá hacer que se vea igual en todas las plataformas.
  2. 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