¿Cómo puedo diseñar un interruptor de Android?

121

El widget de interruptor introducido en API 14 tiene un estilo predeterminado con el tema holo. Quiero darle un estilo ligeramente diferente, cambiando sus colores y formas un poco por razones de marca. ¿Cómo se hace esto? Sé que debe ser posible, ya que he visto la diferencia entre el ICS predeterminado y el tema touchwiz de Samsung

ingrese la descripción de la imagen aquí

Supongo que necesitaré algunos dibujos de estado, y he visto algunos estilos en http://developer.android.com/reference/android/R.styleable.html con Switch_thumb y Switch_track que se parecen a lo que podría estar buscando. . Simplemente no sé cómo usarlos.

Estoy usando ActionbarSherlock si eso hace la diferencia. Por supuesto, solo los dispositivos que ejecuten API v14 o superior podrán usar un interruptor.

— Glenn.nz
fuente

258

Puede definir los elementos dibujables que se utilizan para el fondo, y la parte del conmutador de esta manera:

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/switch_thumb"
    android:track="@drawable/switch_bg" />

Ahora necesita crear un selector que defina los diferentes estados del conmutador dibujable. Aquí las copias de las fuentes de Android:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

Esto define el pulgar dibujable, la imagen que se mueve sobre el fondo. Se utilizan cuatro imágenes de nueve parches para el control deslizante:

La versión desactivada (versión xhdpi que está usando Android)
El control deslizante presionado:
El control deslizante activado (estado activado):
La versión predeterminada (estado desactivado): ingrese la descripción de la imagen aquí

También hay tres estados diferentes para el fondo que se definen en el siguiente selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_dark" />
    <item                               android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

La versión desactivada:
La versión enfocada:
Y la versión predeterminada:

Para tener un interruptor con estilo, simplemente cree estos dos selectores, configúrelos en su Vista de interruptor y luego cambie las siete imágenes al estilo deseado.

— Janusz
fuente

1

Gracias muy detalladas, las imágenes del control deslizante de 9 parches que permitieron que parte del pulgar se moviera fuera de la pista fue especialmente útil, ya que no pude averiguar cómo lo hacían. (el control deslizante predeterminado hace que los bits de borde puntiagudos se muevan más allá del final de la pista para formar un extremo cuadrado en un lado)

— Glenn.nz

2

Hay un estado más que es <item android: state_checked = "true"> que puede cambiar la imagen de la pista cuando el interruptor está en estado "on". así que si quieres cambiar la pista en "on" / "off", usa este estado.

— narangrajeev81

1

¿Cómo puedo peinar el color del texto para el pulgar? no puedo encontrarlo en ningún lado :(

— pojomx

1

@ pojomx. ¿Encontró alguna solución para el color del texto, es decir, el color del texto activado / desactivado? Estoy enfrentando el mismo problema y atrapado en el mismo punto.

— Smeet

Para cambiar el color del texto => android: switchTextAppearance = "@ style / mySwitchTextSyle"

— Andrew

50

Es una asombrosa respuesta detallada de Janusz. Pero solo por el bien de las personas que visitan esta página para obtener respuestas, la forma más fácil es en http://android-holo-colors.com/ (enlace muerto) vinculado desde Android Asset Studio

Una buena descripción de todas las herramientas está en AndroidOnRocks.com (sitio fuera de línea ahora)

Sin embargo, recomiendo a todos que lean la respuesta de Janusz, ya que aclarará la comprensión. Usa la herramienta para hacer cosas muy rápido

— kishu27
fuente

66

Gran ahorro de tiempo. ¡9 parches, listas de estado dibujables, etc. todo en un solo clic!

— Steve

Esta respuesta es tan útil que me gustaría verla publicada como una pregunta de "herramienta para crear fácilmente controles holo de Android por color personalizado" y la respuesta aceptada. Los desarrolladores necesitan esto.

— Rachael

Estoy seguro de que habría sido una gran herramienta ... todos los enlaces están muertos, lamentablemente

— Razvan_TK9692

3

Puede personalizar los estilos de material configurando diferentes propiedades de color. Por ejemplo , tema de aplicación personalizada

<style name="CustomAppTheme" parent="Theme.AppCompat">
    <item name="android:textColorPrimaryDisableOnly">#00838f</item>
    <item name="colorAccent">#e91e63</item>
</style>

Tema de interruptor personalizado

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
    <item name="android:colorControlActivated">#1b5e20</item>
    <item name="android:colorForeground">#f57f17</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

Puede personalizar cambiar la pista y cambiar el pulgar como la imagen de abajo definiendo los elementos dibujables xml. Para más información http://www.zoftino.com/android-switch-button-and-custom-switch-examples

— Arnav Rao
fuente

1

Una forma alternativa y mucho más fácil es usar formas en lugar de 9 parches. Ya se explica aquí: https://stackoverflow.com/a/24725831/512011

— netpork
fuente

idk, la herramienta mencionada en la respuesta de kishu27 fue mucho más rápida simplemente cambiando el color, ya que crea todos los archivos por usted. Supongo que si quisieras personalizar la forma además del color, probablemente esto sea más rápido.

— JStephen

La herramienta es realmente genial, aunque, francamente, no me gusta la idea de que si solo quieres cambiar el color de algo necesitas generar un montón de imágenes. Además, si está utilizando formas, puede tener diferentes colores para las posiciones de encendido / apagado del interruptor.

— netpork

Es cierto, si eres indeciso como yo y sigues cambiando el color hasta que encuentres uno que te guste, entonces esto es mucho más rápido, por suerte para mí, alguien más está a cargo de elegir los colores :)

— JStephen