Como cambiar el color de un Boton ?

Question

Hola, estoy intentando cambiar el color de un botón cuando se ha pulsado, bueno mas bien cambiar la imagen del botón, porque lo que tengo puesto en el botón es una imagen.

Tengo creadas dos imágenes de un botón, donde una tienes puesto un texto de color blanco y la otra un texto con el color amarillo.

Como puedo hacer que cuando se pulse el botón, se quede mostrando la otra imagen, no quiero decir mientras se está pulsando, si no después de ser pulsado.

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn_Noti"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/boton_cambio"
    app:backgroundTint="@null"
    app:backgroundTintMode="add" />

boton_cambio.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:drawable="@drawable/bt_amarillo"/> <!-- presionado -->
    <item android:state_focused="true" android:drawable="@drawable/bt_blanco"/> <!-- en foco -->
    <item android:drawable="@drawable/bt_blanco" />

</selector>

 

He probado tambien en el siguiente codigo, pero no lo he conseguido:

java:

botonNoti = rootView.findViewById(R.id.btn_Noti);
Drawable drawable = botonNoti.getDrawable();
if (drawable instanceof TransitionDrawable) {
    ((TransitionDrawable) drawable).startTransition(500);
}
botonNoti.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        ....
    }
});

xml

<ImageButton
    android:id="@+id/btn_Noti"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/boton_cambio" />

boton_cambio.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bt_blanco" />
    <item android:drawable="@drawable/bt_amarillo" />
</transition>

 

Gracias.

Answer 1

Quizás lo más sencillo sea en el onclick del botón cambiar la imagen, algo así:

public void onClick(View view) {
        view.setImageResource(R.drawable...);
}

Aunque estaría mejor hecho con el estado de "pressed" y detectando la pulsación, por ejemplo:

miBoton.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        miBoton.setPressed(true);
        return true;
    }
});

Y puedes definirlo en el <selector> con:

<item android:state_selected="true" android:drawable="@drawable/..."/>

 

Comments

Hola Ramon, he probado con las dos opciones, la primera funciona, pero como dices que estaría mejor hecho con el estado de "pressed" intento poner la segunda, y funciona a medias, digo que a medias porque para que cambie la imagen hay que pulsar dos veces, entiendo que la primera vez que se pulsa muestra la imagen con el color blanco, y ya la segunda vez que pulsas en el botón muestra la imagen que tiene el color amarillo.

 

Esto sucede si lo pongo dentro del onClick, si lo pongo fuera del setOnClickListener, si que se lo cambia bien, pero luego no se muestra un mensaje que tengo en el onClick

Aquí la imagen la cambia cuando se pulsa la primera vez, pero no muestra el Toast

	  botonNoti = rootView.findViewById(R.id.btn_Noti);
 
        botonNoti.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                botonNoti.setPressed(true);
                return true;
            }
        });
 
        botonNoti.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getActivity(), "Pulsado pulsado", Toast.LENGTH_SHORT).show();
            }
        });

Y aquí, la primera vez que se pulsa el botón, muestra el Toast y no cambia la imagen, hay que pulsar una segunda vez para se que muestre el otro botón, y esa segunda vez ya no muestra el Toast

botonNoti = rootView.findViewById(R.id.btn_Noti);

botonNoti.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {

        botonNoti.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                botonNoti.setPressed(true);
                return true;
            }
        });

        Toast.makeText(getActivity(), "Pulsado Boton Notificaciones", Toast.LENGTH_SHORT).show();
    }
});

Estoy probando a ver si lo consigo hacer con un botón, pero mi intención es poner tres botones para mostrar diferentes fragment, y cada vez que se pulse uno de los botones tiene que cambiar el color de ese botón a amarillo, pero a la vez volver a cambiar el otro botón a blanco.

 

---

En el primer código, no se te muestra el Toast en el onClick porque el onTouch se ejecuta antes y el "return true" de éste indica que no se propague más el evento de clicado (si quieres que se propague al onClick cambia a "return false")

Por otro lado, si te sirve puedes ahorrarte el onClick y pasar todo el código al onTouch (ya que más o menos hacen lo mismo, con matices).

En el segundo código como el onTouch lo metes dentro del onClick, hasta que no clicas la primera vez no existe el código ejecutable del onTouch.