android - buttons - ¿Agregar efecto de onda a mi botón con el color de fondo del botón?

ripple effect button

Question

¡Creé un botón y quiero agregar un efecto dominó a ese botón!

Creé un archivo XML de botón bg: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

Y este es mi archivo de efecto dominó: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Y este es mi botón que quiero agregar efecto dominó:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

Pero después de agregar el fondo del botón de efecto dominó es transparente, y el botón se muestra solo cuando se hace clic, de esta manera:

Antes de hacer clic

Al hacer clic

Pero necesito el color de fondo del botón y el efecto de onda, encontré parte de este código en diferentes blogs de Stack Overflow, ¡pero aún así no funciona!

Answer 1

AppCompat v7 +

Si no prefijas con ?android: tu aplicación se bloqueará.

Debe usar "?android:attr/selectableItemBackground" o "?android:attr/selectableItemBackgroundBorderless" , según sus preferencias. Prefiero Borderless .

Puede ponerlo en android:background o android:foreground para mantener las propiedades existentes.

El elemento debe tener android:clickable="true" y android:focusable="true" para que esto funcione, pero muchos elementos, como los botones, tienen true por defecto.

<Button
    ...
    android:background="@color/white"
    android:foreground="?android:attr/selectableItemBackgroundBorderless"
/>
<TextView
    ...
    android:background="?android:attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:focusable="true"
/>

Answer 2

Además de Sudheesh R

Agregue Ripple Effect / Animation a un botón de Android con forma de botón rectangular con esquina

Cree un archivo xml res / drawable / your_file_name.xml

<Button
            android:id="@+id/btn_location"
            android:layout_width="121dp"
            android:layout_height="38dp"
            android:layout_gravity="center"
            android:layout_marginBottom="24dp"
            android:layout_marginTop="24dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:background="@drawable/btn_corner"
            android:gravity="center_vertical|center_horizontal"
            android:paddingLeft="13dp"
            android:paddingRight="13dp"
            android:text="Save"
            android:textColor="@color/color_white" />

Answer 3

Además de la solución de Jigar Patel , agréguelo a ripple.xml para evitar el fondo transparente de los botones.

<item
    android:id="@android:id/background"
    android:drawable="@color/your-color" />

Xml completo :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/your-color"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/your-color" />
        </shape>
    </item>
    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />
</ripple>

Use este ripple.xml como fondo en su botón:

android:background="@drawable/ripple"

Answer 4

Agregar atributos de primer plano y clics funcionó para mí.

<Button
 ...
style="@style/Widget.AppCompat.Button.Colored" />

Answer 5

Aquí hay otro xml dibujable para aquellos que desean agregar todo el fondo degradado, el radio de la esquina y el efecto dominó:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>

Agregue esto al fondo de su botón.

<Button
    ...
    android:background="@drawable/button_background" />

Answer 6

Cuando el botón tiene un fondo del dibujable, podemos agregar un efecto dominó al parámetro de primer plano. Verifique que el código siguiente funcione para mi botón con un fondo diferente

    <Button
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:layout_centerHorizontal="true"                                                             
    android:background="@drawable/shape_login_button"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true"
    android:text="@string/action_button_login"
     />

Agregue el siguiente parámetro para el efecto dominó

   android:foreground="?attr/selectableItemBackgroundBorderless"
   android:clickable="true"

Para referencia, consulte el siguiente enlace https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

Answer 7

Cuando usa android: background, está reemplazando gran parte del estilo y la apariencia de un botón con un color en blanco.

Actualización: a partir de la versión 23.0.0 de AppCompat, hay un nuevo Widget.AppCompat.Button.Un estilo de color que utiliza el colorButtonNormal de su tema para el color deshabilitado y colorAccent para el color habilitado.

Esto le permite aplicarlo a su botón directamente a través de

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>

Puede usar un dibujable en su directorio v21 para su fondo como:

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

Esto asegurará que su color de fondo sea? Attr / colorPrimary y tenga la animación de ondulación predeterminada usando el? Attr / colorControlHighlight predeterminado (que también puede configurar en su tema si lo desea).

Nota: tendrá que crear un selector personalizado por menos de v21:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/colorWhite"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="50dp" />
        </shape>
    </item>

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorAccent"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="50dp" />
        </shape>
    </item>
</ripple>

Answer 8

Solo usa :

android:backgroundTint="#f816a463"

En lugar de:

android:background="#f816a463"

No olvides cambiar tu Button a android.support.v7.widget.AppCompatButton

Answer 9

Una solución alternativa para usar la etiqueta <ripple> (que personalmente prefiero no hacer, porque los colores no son "predeterminados"), es la siguiente:

Cree un elemento de dibujo para el fondo del botón e incluya <item android:drawable="?attr/selectableItemBackground"> en la <layer-list>

Luego (y creo que esta es la parte importante) establezca programáticamente backgroundResource(R.drawable.custom_button) en su instancia de botón.

Actividad / Fragmento

Button btn_temp = view.findViewById(R.id.btn_temp);
btn_temp.setBackgroundResource(R.drawable.custom_button);

Diseño

<Button
    android:id="@+id/btn_temp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_button"
    android:text="Test" />

custom_button.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:drawable="?attr/selectableItemBackground" />
</layer-list>

Answer 10

agregue el "?attr/selectableItemBackground" al atributo de foreground su vista si ya tiene un fondo junto con android:clickable="true"

Answer 11

prueba esto

<Button
    ... 
    android:background="@color/your_color"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:clickable="true" />

Answer 12

Agregue Ripple Effect / Animation a un botón de Android

Simplemente reemplace el atributo de fondo del botón con android: background = "? Attr / selectableItemBackground" y su código se verá así.

      <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/selectableItemBackground"
        android:text="New Button" />

Otra forma de agregar efecto de onda / animación a un botón de Android

Con este método, puede personalizar el color del efecto dominó. Primero, debe crear un archivo xml en su directorio de recursos dibujables. Cree un archivo ripple_effect.xml y agregue el siguiente código. res / drawable / ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Y establezca el fondo del botón en el archivo de recursos extraíble anterior

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_effect"
    android:padding="16dp"
    android:text="New Button" />