viernes, 12 de julio de 2019

Cambiar imagen al hacer clic en un boton "Android Studio"

Hoy vamos a ver como hacer algo que en sí, es muy sencillo, y es que tengamos una imagen de fondo en un boton, y al hacer clic sobre el se cambie la imagen, y a su vez, dependiendo de la imagen mostrada, haremos una cosa u otra, comenzamos.



Tendremos en nuesto activity.xml el boton, nuestro ejemplo será el siguiente:

  1. <Button
  2.  android:id="@+id/boton"
  3.  android:layout_width="wrap_content"
  4.  android:layout_height="wrap_content"
  5.  android:background="@drawable/1º_imagen"
  6.  android:onClick="pulsado"/>

Como veis hemos creado un boton que le hemos dado un id llamado boton y un metodo onclick que lo hemos llamado pulsado.

Ahora ya solo nos queda programar en java, que queremos que haga y que fondo le ponemos al hacer clic sobre dicho boton, veamos nuestro archivo MainActivity.java como quedaría:

En primer lugar crearemos un boolean y lo iniciaremos como verdadero.

  1. boolean boton_pulsado = true;
Este boolean lo utilizaremos para ir cambiando de verdadero a falso y así sucesivamente , y segun su estado actuaremos.


  1. public void puldado(View view) {
        if (boton_pulsado){
           //aquí la acción 
        }
    
    }

Como veis al recivir el clic, lo primeros es comprovar el estado del boolen (true o false). Como cuando inicia la aplicacion lo henos puesto en verdadero(true), comenzara con la imagen que le hemos iniciado, a partir de aquí es cuando le cambiamos la imagen , cambiamos el estado del boolean y le decimos que queremos que haga.

  1. public void puldado(View view) {
        if (boton_pulsado){
            boton_pulsado= false;
            nuestro_boton.setBackgroundResource(R.drawable.2º_imagen);
           //aquí la acción que queramos
  2.     }
    
    }

Ya tenemos cambiado el boolean a false, la imagen de fondo la hemos cambiado y hemos realizado la acción que queriamos.
Ahora solo nos queda decirle que queremos que haga cuando haya cambiado la imagen, lo hariamos añadiendo el siguiente código.


  1. else {
        boton_pulsado = true;
    pulsado.setBackgroundResource(R.drawable.1º_imagen);
    //aquí la acción que queramos
        
  2. }

Ahora que teniamos el boolean en falso(false) lo hemos vuelto a pasar a verdadero(true) , hemos vuelto a poner la imagen que teniamos al inicio y hemos ejecutado la segunda acción.

Para que lo veais mas claro voy a poner un ejemplo con un boton que utilizaremos para iniciar y parar una reproducción, boton play stop.



  1. public void puldado(View view) {
        if (boton_pulsado){
            boton_pulsado = false;
            pulsado.setBackgroundResource(R.drawable.stop);
            //ponemos en marcha la reproducción
    
  2.         mMediaPlayer.play();
        }else {
            boton_pulsado = true;
            pulsado.setBackgroundResource(R.drawable.play);
            //paramos la reproducción 
  3.         mMediaPlayer.stop();
        }
    
    }

Como habeis visto es sencillo cambiar imagen del boton y además ejecutar una acción diferente segun sea su imagen de fondo.

Espero que os sea útil.


Un saludo.