Botón de activación de Android apariencia personalizada

styles customization

Question

He estado tratando de personalizar el aspecto del botón de alternar, pero sin éxito. Así es como quiero que se vea:

¿Puede alguien darme un tutorial?

Answer 1

Crear selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_da" android:state_checked="true"/>
    <item android:drawable="@drawable/btn_nu"/>
</selector>

y úsalo como fondo para tu ToggleButton.

Answer 2

Creo que necesitas definir un fondo personalizado para tu botón. Eche un vistazo a Developer Guide para personalizar el fondo de un Botón .

Sin embargo, en el paso tres, cree un nuevo archivo XML en el res/drawable/ directory Use este Xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_da"
          android:state_checked="true" />
    <item android:drawable="@drawable/button_nu" />
</selector>

El elemento android:state_checked="true" es lo que define ese estado como el fondo marcado.

Hazme saber si esto funciona para ti.

Answer 3

No sé si esta es la mejor solución, pero funcionó bien para mí:

1.- Decide qué tan grande quieres el botón para alternar. En mi caso ancho 56dp y altura 76dp.

2.- Crea el ícono configurado 56px-76px para mdpi, 84px-113px hdpi, lo mismo para xhdpi y xxhdpi

3.- Mueva los iconos en la carpeta dibujable correspondiente. En mi caso, 20 iconos 5 en cada carpeta, llamados ic_name1_on, ic_name1_off [...] ic_name5_off

4.- Crea los siguientes archivos xml en una nueva carpeta llamada dibujable (si aún no existe):

• ic_name1_toggle.xml
• ic_name1_toggle_bg.xml
• ic_name2_toggle.xml
• (...)
• ic_name5_toggle_bg.xml

5.- En ic_name1_toggle.xml, el código debe ser:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="false"
        android:drawable="@drawable/ic_name1_off" />
    <item
        android:state_checked="true"
        android:drawable="@drawable/ic_name1_on" />
</selector>

6.- En ic_name1_toggle_bg.xml, el código debe ser:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:id="@+android:id/background"
         android:drawable="@android:color/transparent" />
   <item android:id="@+android:id/toggle"
         android:drawable="@drawable/ic_name1_toggle" />
</layer-list>

7.- Finalmente en su layout.xml:

<ToggleButton
                android:id="@+id/toggleButton1"
                android:layout_width="56dp"
                android:layout_height="76dp"
                android:background="@android:color/transparent"
                android:button="@drawable/ic_name1_toggle_bg"
                android:textOff=""
                android:textOn="" />

Answer 4

crear toggle_selector.xml en res / dibujable

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/toggle_on" android:state_checked="true"/>
  <item android:drawable="@drawable/toggle_off" android:state_checked="false"/>
</selector>

aplicar el selector a su botón de alternar

<ToggleButton
            android:id="@+id/chkState"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

Nota: para eliminar el texto que utilicé siguiendo el código anterior

textOff=""
textOn=""