Como personalizar el estado de un botón TOOGLE BUTTON con iconos PNG y JPG en Android Studio

Si queremos personalizar los botones de nuestra app con los estados accionado y des accionado, tenemos que crear un nuevo DRAWER RESOUCE.

Vamos a ver el ejemplo que os propongo paso a paso para un TOGGLE BUTTON:

- devemos colocar en posición PROJECT nuestro menú desplegable de la compilación para poder colocar dentro la carpeta DRAWABLE nuestros iconos. Para nuestro ejemplo, un play y un stop en .png :

- arrastramos dos dos iconos hasta la carpeta y soltamos:

- damos OK en las siguientes opciones:

- quedando:

- una vez alojados los iconos, debemos crear el nuevo DRAWER RESOUCE ( el valor del dibujo en archivo XLM ) de la siguiente manera:

           DRAWABLE => NEW => DRAWABLE RESOUCE FILE

- le ponemos como nombre, por ejemplo, estado_play_stop y damos OK :

- ahora debemos colocar este código en la nueva pestaña XLM que hemos creado:

<item android:drawable="@drawable/stop"

        android:state_checked="true" />

    <item android:drawable="@drawable/play"

        android:state_checked="false"/>

- en el TEXTO XLM de nuetra ACTIVITY principal, debemos hacer esto para que no nos aparezca las letras ON y OFF que vienen por defecto en TOGGLE BUTTON de Android:

- después, nos dirigimos a las PROPIEDADES de botón y damos clic en las opciones de BACKGROUND para cargar nuestro valor:

- nos aparece este menú de RESOUCE. Debemos buscar el nombre del valor que hemos creado:

- si vamos más abajo, en el apartado DRAWABLE de la pestaña PROJECT:

- selecionamos y damos OK:

- nos aparece automáticamente en nuestra ACTIVITY principal el TOGGLE BUTTON con la forma de nuestro icono:

- si arrancamos el emulador, nos aparece el botón en estado false = play

- y si lo accionamos, nos aparece el siguiente estado true = stop

Espero que les sirva de ayuda.

Saludosa tod@s  y gracias por la visita!