studio - switch button style android

Cómo cambiar el color de un SwitchCompat de la biblioteca AppCompat

Question

Esta pregunta ya tiene respuestas aquí :

Cambiar el color "encendido" de un interruptor (17 respuestas)

Cerrado hace 9 meses .

Tengo algunos controles de cambio con diferentes colores en mi aplicación y para cambiar sus colores utilicé múltiples selectores personalizables.

Con el lanzamiento de la biblioteca AppCompat v21, se introdujo un nuevo control android.support.v7.widget.SwitchCompat.

¿Es posible cambiar el color de un SwitchCompat programáticamente sin el selector de dibujo del cliente, pero con XML o código?

Answer 1

Atributos de tintado de AppCompat:

Primero, debería echar un vistazo al artículo de appCompat lib there y a diferentes atributos que puede configurar:

colorPrimary : el color de marca principal de la aplicación. Por defecto, este es el color aplicado al fondo de la barra de acción.

colorPrimaryDark : variante oscura del color de marca principal. De forma predeterminada, este es el color aplicado a la barra de estado (a través de statusBarColor) y a la barra de navegación (a través de navigationBarColor).

colorAccent : complemento brillante del color de marca principal. Por defecto, este es el color aplicado a los controles del marco (a través de colorControlActivated).

colorControlNormal : el color aplicado a los controles del marco en su estado normal.

colorControlActivated : el color aplicado a los controles del marco en su estado activado (por ejemplo, marcado, encendido).

colorControlHighlight : el color aplicado a los aspectos más destacados del control de marco (por ejemplo, ondas, selectores de lista).

colorButtonNormal : el color aplicado a los botones del marco en su estado normal.

colorSwitchThumbNormal : el color aplicado al marco cambia los pulgares en su estado normal. (apagar)

Si todos los modificadores personalizados son iguales en una sola actividad:

Con los atributos anteriores puedes definir tu propio tema para cada actividad:

<style name="Theme.MyActivityTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/my_awesome_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">@color/my_awesome_darker_color</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">@color/accent</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight, and colorSwitchThumbNormal. -->
</style>

y:

<manifest>
...
<activity
android:name=".MainActivity"
android:theme="@style/Theme.MyActivityTheme">
</activity>
...
</manifest>

Si desea tener diferentes interruptores personalizados en una sola actividad:

Como el tinte de widgets en appcompat funciona interceptando cualquier inflación de diseño e insertando una versión especial de tinte del widget en su lugar (vea la publicación de Chris Banes al respecto ), no puede aplicar un estilo personalizado a cada cambio de su archivo xml de diseño. Debe establecer un contexto personalizado que cambiará con los colores correctos.

-

Para hacerlo para la versión anterior a la 5.0 , debe crear un Contexto que superponga el tema global con atributos de aduana y luego cree sus interruptores mediante programación:

ContextThemeWrapper ctw = ContextThemeWrapper(getActivity(), R.style.Color1SwitchStyle);
SwitchCompat sc = new SwitchCompat(ctw)

A partir de AppCompat v22.1 , puede usar el siguiente XML para aplicar un tema al widget de cambio:

<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
...>
<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:theme="@style/Color1SwitchStyle"/>

Su tema de cambio personalizado:

<style name="Color1SwitchStyle">
<item name="colorControlActivated">@color/my_awesome_color</item>
</style>

-

En Android 5.0 parece que una nueva vista de atributo cobra vida: android:theme (igual que un uso para la declaración de actividad en manifiesto). Basado en otra post Chris Banes, con esta última debería poder definir un tema personalizado directamente en una vista desde su diseño xml:

<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/Color1SwitchStyle"/>

Para cambiar el color de la pista de un SwitchCompat

Gracias a vine''th, completo mi respuesta con un enlace a la respuesta SO que explica cómo especificar el primer plano de la pista cuando Switch está apagado, está there .

Answer 2

Creo que la respuesta en el siguiente enlace es mejor

Cómo cambiar el color de la pista de un SwitchCompat

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<!-- Active thumb color & Active track color(30% transparency) -->
<item name="colorControlActivated">@color/theme</item>
<!-- Inactive thumb color -->
<item name="colorSwitchThumbNormal">@color/grey300</item>
<!-- Inactive track color(30% transparency) -->
<item name="android:colorForeground">@color/grey600</item>
...
</style>

Answer 3

Entonces, algunos días me faltan células cerebrales y:

<android.support.v7.widget.SwitchCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/CustomSwitchStyle"/>

no aplica el tema porque el estilo es incorrecto. Se suponía que debía usar la aplicación: tema: P

<android.support.v7.widget.SwitchCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="@style/CustomSwitchStyle"/>

Whoopsies Esta publicación fue lo que me dio una idea de mi error ... espero que si alguien tropieza con esto, les ayude como a mí. Gracias Gaëtan Maisse por tu respuesta

Answer 4

Mi ejemplo de trabajo de usar style y android: theme simultáneamente (API> = 21)

<android.support.v7.widget.SwitchCompat
android:id="@+id/wan_enable_nat_switch"
style="@style/Switch"
app:layout_constraintBaseline_toBaselineOf="@id/wan_enable_nat_label"
app:layout_constraintEnd_toEndOf="parent" />
<style name="Switch">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:theme">@style/ThemeOverlay.MySwitchCompat</item>
</style>
<style name="ThemeOverlay.MySwitchCompat" parent="">
<item name="colorControlActivated">@color/colorPrimaryDark</item>
<item name="colorSwitchThumbNormal">@color/text_outline_not_active</item>
<item name="android:colorForeground">#42221f1f</item>
</style>

Answer 5

Ok, lo siento, pero la mayoría de estas respuestas están incompletas o tienen algún error menor. La respuesta muy completa de @ austyn-mahoney es correcta y la fuente de esta respuesta, pero es complicada y probablemente solo desee diseñar un interruptor. Los controles de ''estilo'' en diferentes versiones de Android son un dolor épico en el culo. Después de sacarme el pelo durante días en un proyecto con restricciones de diseño muy estrictas, finalmente me quebré y escribí una aplicación de prueba y luego realmente busqué y probé las diversas soluciones disponibles para interruptores de estilo y casillas de verificación, desde cuando un diseño tiene una Con frecuencia tiene el otro. Esto es lo que encontré ...

Primero: en realidad no puede diseñar ninguno de ellos, pero puede 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 conmutadores, tiene dos opciones básicas si desea admitir versiones anteriores de Android (como estoy seguro de que lo hace) ...

1. Puede usar SwitchCompat y podrá hacer que se vea igual en todas las plataformas.
2. Puede usar un Switch y podrá crear un tema con el resto de su tema, o solo ese interruptor en particular y en las versiones anteriores de Android, verá un interruptor cuadrado antiguo sin estilo.

Ok ahora para el código de referencia simple. ¡Nuevamente si creas un simple Hello World! y suelte este código para que pueda jugar a su gusto. 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 vago para construir esto, solo quieres escribir tu código y registrarlo para que puedas cerrar este dolor en el culo Error de pesadilla de compatibilidad de Android para que el diseñador de tu equipo finalmente esté feliz . Lo entiendo. Así es como se ve cuando lo ejecutas ...

API_21:

API_18:

Answer 6

Para tener un mayor control del color de la pista (sin cambios alfa controlados por API ), extendí SwitchCompat y SwitchCompat los elementos mediante programación:

 public class CustomizedSwitch extends SwitchCompat {
public CustomizedSwitch(Context context) {
super(context);
initialize(context);
}
public CustomizedSwitch(Context context, AttributeSet attrs) {
super(context, attrs);
initialize(context);
}
public CustomizedSwitch(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initialize(context);
}
public void initialize(Context context) {
// DisplayMeasurementConverter is just a utility to convert from dp to px and vice versa
DisplayMeasurementConverter displayMeasurementConverter = new DisplayMeasurementConverter(context);
// Sets the width of the switch
this.setSwitchMinWidth(displayMeasurementConverter.dpToPx((int) getResources().getDimension(R.dimen.tp_toggle_width)));
// Setting up my colors
int mediumGreen = ContextCompat.getColor(context, R.color.medium_green);
int mediumGrey = ContextCompat.getColor(context, R.color.medium_grey);
int alphaMediumGreen = Color.argb(127, Color.red(mediumGreen), Color.green(mediumGreen), Color.blue(mediumGreen));
int alphaMediumGrey = Color.argb(127, Color.red(mediumGrey), Color.green(mediumGrey), Color.blue(mediumGrey));
// Sets the tints for the thumb in different states
DrawableCompat.setTintList(this.getThumbDrawable(), new ColorStateList(
new int[][]{
new int[]{android.R.attr.state_checked},
new int[]{}
},
new int[]{
mediumGreen,
ContextCompat.getColor(getContext(), R.color.light_grey)
}));
// Sets the tints for the track in different states
DrawableCompat.setTintList(this.getTrackDrawable(), new ColorStateList(
new int[][]{
new int[]{android.R.attr.state_checked},
new int[]{}
},
new int[]{
alphaMediumGreen,
alphaMediumGrey
}));
}
}

Cada vez que quiero usar el CustomizedSwitch , solo agrego uno a mi archivo xml .

Answer 7

Sólo

 android:buttonTint="@color/primary"

Answer 8

Tenga cuidado con el error de saber con SwitchCompat

Es un error con un archivo corrupto en drawable-hdpi en AppCompat https://code.google.com/p/android/issues/detail?id=78262

Para solucionarlo, solo anúlelo con estos 2 archivos https://github.com/lopespm/quick-fix-switchcompat-resources Añádalo a su directorio drawable-hdpi

XML

<android.support.v7.widget.SwitchCompat
android:id="@+id/dev_switch_show_dev_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

Y nada era necesario en Java

Answer 9

<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/adamSwitch"
android:textColor="@color/top_color"
android:textAppearance="@color/top_color"
android:gravity="center"
app:showText="true"
app:theme="@style/Custom.Widget.SwitchCompat"
app:switchPadding="5dp"
/>

en style.xml

<style name="Custom.Widget.SwitchCompat" parent="Widget.AppCompat.CompoundButton.Switch" >
<item name="android:textColorPrimary">@color/blue</item> <!--textColor on activated state -->
</style>