¿Cómo cambiar el color del botón en Android cuando se hace clic?

81

Estoy trabajando en la aplicación de Android. Quiero tener 4 botones para colocarlos horizontalmente en la parte inferior de la pantalla. En estos 4 botones, 2 botones tienen imágenes. El borde de los botones debe ser de color negro y el borde debe ser lo más delgado posible. Cuando hago clic en el botón, quiero que el fondo del botón se cambie a color azul sin cambiar el color del borde y que se mantenga en ese color durante algún tiempo. ¿Cómo puedo lograr este escenario en Android?

android Android_programmer_camera
fuente
Posible duplicado de Cómo cambiar el color de la ruta de dibujo vectorial al hacer clic en el botón Lo marqué como duplicado, puede verificar mi respuesta aquí: stackoverflow.com/a/55205149/3763032
mochadwi

Respuestas:

128

Un enfoque es crear un archivo XML como este en drawable, llamado lo que sea.xml:

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

    <item
        android:state_focused="false"
        android:state_pressed="true"
        android:drawable="@drawable/bgalt" />

    <item android:drawable="@drawable/bgnorm" />
</selector>

bgalty bgnormson imágenes PNG en dibujables.

Si crea los botones mediante programación en su actividad, puede establecer el fondo con:

final Button b = new Button (MyClass.this);
b.setBackgroundDrawable(getResources().getDrawable(R.drawable.whatever));

Si configura el estilo de sus botones con un XML, haría algo como:

<Button
  android:id="@+id/mybutton"
  android:background="@drawable/watever" />

Y finalmente un enlace a un tutorial . Espero que esto ayude.

metodo
fuente
16
También puede reemplazar esos elementos de diseño en el archivo XML con definiciones de colores si desea evitar el uso de imágenes.
haseman
7
@ jshin47 una cantidad empíca de prueba y error. He escrito dos libros sobre el desarrollo de Android ahora :-)
haseman
@haseman - ¿Puedes publicar los enlaces de esos 2 libros o compartir conmigo en [email protected]? Me
encantaría revisarlos
1
¿Y si solo colores, no imágenes?
Kala J
@KalaJ ¿has encontrado una solución?
Prafulla Kumar Sahu
75

Guarde este código en la carpeta dibujable con "bg_button.xml" y llame a "@ drawable / bg_button" como fondo del botón en su xml:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#004F81" />
            <stroke
                android:width="1dp"
                android:color="#222222" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#89cbee"
                android:endColor="#004F81"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#4aa5d4" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>
Faakhir
fuente
2
Gracias hombre, usando el estilo puedes reducir el tamaño de la aplicación. buena idea no usar
dibujables
Por otro lado, los elementos de diseño XML basados ​​en vectores suelen tener un rendimiento peor que las imágenes, especialmente en dispositivos más antiguos. No optimices prematuramente, pero tenlo en cuenta también.
Przemyslaw Jablonski
10

Prueba esto

    final Button button = (Button) findViewById(R.id.button_id);
    button.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View view, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_UP) {
                button.setBackgroundColor(Color.RED);
            } else if(event.getAction() == MotionEvent.ACTION_DOWN) {
                button.setBackgroundColor(Color.BLUE);
            }
            return false;
        }

    });
Waxren
fuente
9

Refiera esto,

boolean check = false;
Button backward_img;
Button backward_img1;
backward_img = (Button) findViewById(R.id.bars_footer_backward);
backward_img1 = (Button) findViewById(R.id.bars_footer_backward1);
backward_img.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {
        check = true;
        backward_img.setBackgroundColor(Color.BLUE);
    }
});

if (check == true) {
    backward_img1.setBackgroundColor(Color.RED);
    backward_img.setBackgroundColor(Color.BLUE);
}
Sankar Ganesh PMP
fuente
2
Esto establecerá el GS de forma permanente, es decir, si el usuario hace clic en el botón Atrás, el fondo será rojo.
método
@methode: ok, consulte la nueva respuesta, he corregido la respuesta anterior
Sankar Ganesh PMP
8 
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- default -->
    <item
        android:state_pressed="false"
        android:state_focused="false">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#00a3e2" />

            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />

        </shape>
    </item>

    <!-- button focused -->
    <item
        android:state_pressed="false"
        android:state_focused="true">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#5a97f5" />

            <padding
                android:bottom="5dp"
                android:left="10dp"
                android:right="10dp"
                android:top="5dp" />
        </shape></item>

    <!-- button pressed -->
    <item
        android:state_pressed="true"
        android:state_focused="false">
        <shape
            android:innerRadiusRatio="1"
            android:shape="rectangle" >
            <solid android:color="#478df9"/>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
        </shape></item>
</selector>
سیدرسول میرعظیمی
fuente
6

Si desea cambiar la imagen de fondo o el color del botón cuando se presiona, simplemente copie este código y péguelo en su proyecto en la ubicación exacta que se describe a continuación.

      <!-- Create new xml file like mybtn_layout.xml file in drawable -->
<?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/pressed" /> <!--pressed --> 
<item android:drawable="@drawable/normal" /> <!-- Normal -->
</selector>
  <!-- Now this file should be in a drawable folder and use this 
  single line code in    button code to get all the properties of this xml file -->

    <Button
      android:id="@+id/street_btn"
      android:layout_width="wrap_content"
      android:background="@drawable/layout_a" > <!-- your required code -->
    </Button>
Pir Fahim Shah
fuente
4

Prueba esto......

Primero cree un archivo xml llamado button_pressed.xml Estos son sus contenidos.

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

No, prueba esto en tu botón.

int imgID = getResources().getIdentifier("button_pressed", "drawable", getApplication().getPackageName());
button.setImageResource(imgID);

button_pressed.xml debe estar en la carpeta dibujable. icon_1_press e icon_1 son dos imágenes para presionar botón y enfoque normal.

James
fuente
2

1-haga 1 forma para el botón, haga clic con el botón derecho en el archivo de recursos dibujable y nuevo. cambie el elemento Raíz para darle forma y haga su forma.

ingrese la descripción de la imagen aquí

2-ahora haga 1 copia de su forma y cambie el nombre y cambie el color sólido. ingrese la descripción de la imagen aquí

3-haga clic con el botón derecho en el archivo de recursos dibujable y nuevo, simplemente establezca el elemento raíz en el selector.

ir al archivo y configurar "state_pressed"

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"android:drawable="@drawable/YourShape1"/>
<item android:state_pressed="false" android:drawable="@drawable/YourShape2"/>

</selector>

4-al final, vaya al diseño xml y configure el fondo del botón "su selector"

(perdón por mi inglés débil)

Mj.talebi
fuente
1

Estoy usando este código (con efecto dominó):

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@color/color_gray">
<item android:id="@android:id/mask">
    <color android:color="@color/color_gray" />
</item></ripple>
user3524157
fuente
1

puedes probar este código para resolver tu problema

<?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/login_selected" /> <!-- pressed -->
  <item android:state_focused="true"
   android:drawable="@drawable/login_mouse_over" /> <!-- focused -->
  <item android:drawable="@drawable/login" /> <!-- default -->
</selector>

escriba este código en su dibujable, cree un nuevo recurso y asígnele el nombre que desee y luego escriba el nombre de este drwable en el botón, al igual que nos referimos a image src en Android

Mudassir Khan
fuente
1
hola señor @lmo he dado alguna explicación con la pregunta.
Mudassir Khan
1 
public void onPressed(Button button, int drawable) {
            if (!isPressed) {
                button.setBackgroundResource(R.drawable.bg_circle);
                isPressed = true;
            } else {
                button.setBackgroundResource(drawable);
                isPressed = false;
            }
        }


    @Override
    public void onClick(View v) {

        switch (v.getId()) {
            case R.id.circle1:
                onPressed(circle1, R.drawable.bg_circle_gradient);
                break;
            case R.id.circle2:
                onPressed(circle2, R.drawable.bg_circle2_gradient);
                break;
            case R.id.circle3:
                onPressed(circle3, R.drawable.bg_circle_gradient3);
                break;
            case R.id.circle4:
                onPressed(circle4, R.drawable.bg_circle4_gradient);
                break;
            case R.id.circle5:
                onPressed(circle5, R.drawable.bg_circle5_gradient);
                break;
            case R.id.circle6:
                onPressed(circle6, R.drawable.bg_circle_gradient);
                break;
            case R.id.circle7:
                onPressed(circle7, R.drawable.bg_circle4_gradient);
                break;

        }

por favor intente esto, en este código estoy tratando de cambiar el fondo del botón en el botón haga clic en esto funciona bien.

Abhishek Rana
fuente
0

Para tratar correctamente el tiempo que desea que su botón permanezca en su otro color, le recomendaría esta versión:

button.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch(event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        button.setBackground(getResources().getDrawable(R.drawable.on_click_drawable));
                        break;
                    case MotionEvent.ACTION_UP:
                        new java.util.Timer().schedule(
                                new java.util.TimerTask() {
                                    @Override
                                    public void run() {
                                        ((Activity) (getContext())).runOnUiThread(new Runnable() {
                                            @Override
                                            public void run() {
                                                button.setBackground(getResources().getDrawable(R.drawable.not_clicked_drawable));
                                            }
                                        });
                                    }
                                }, BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION);
                        break;
                    default:
                }
                return false;
            }
        });

BUTTON_CLICK_TIME_AFTER_RELEASE_ANIMATION indica después de cuánto tiempo [ms] el botón se restablecerá al estado anterior (sin embargo, es posible que desee usar algún booleano para verificar que el botón no se haya usado en el medio, dependiendo de lo que desee lograr ...) .

Nicolas Zimmermann
fuente
0

Incluso usando algunos de los comentarios anteriores, esto tomó mucho más tiempo para resolver lo que debería ser necesario. Ojalá este ejemplo ayude a alguien más.

Cree un radio_button.xml en el directorio dibujable.

    <?xml version="1.0" encoding="utf-8"?>

<!-- An element which allows two drawable items to be listed.-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radio_button_checked" /> <!--pressed -->
    <item android:drawable="@drawable/radio_button_unchecked" /> <!-- Normal -->
</selector>

Luego, en el xml del fragmento debería verse algo así como

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioButton

    android:id="@+id/radioButton1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_weight="1"
    android:button="@drawable/radio_button"
    android:paddingLeft="10dp" />        
<RadioButton
    android:id="@+id/radioButton2"
    android:layout_marginLeft="10dp"
    android:paddingLeft="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@drawable/radio_button" />

</RadioGroup>
    </LinearLayout>
</layout>
iCyberPaul
fuente
-1

hai, la forma más fácil es esta:

agregue este código a mainactivity.java

public void start(View view) {

  stop.setBackgroundResource(R.color.red);
 start.setBackgroundResource(R.color.yellow);
}

public void stop(View view) {
stop.setBackgroundResource(R.color.yellow);
start.setBackgroundResource(R.color.red);
}

y luego en tu actividad principal

    <button android:id="@+id/start" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="start" android:text="Click">

</button><button android:id="@+id/stop" android:layout_height="wrap_content" android:layout_width="wrap_content" android:onclick="stop" android:text="Click">

o sigue este tutorial

dondondon
fuente