¡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!

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" />

Agregue el atributo de "?attr/selectableItemBackground"su vista android:foregroundsi ya tiene un fondo junto con android:clickable="true".

Agregar efecto de onda / animación 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 dominó / 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" />

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"

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/

AppCompat v7 +

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

Debe usar "?android:attr/selectableItemBackground"o "?android:attr/selectableItemBackgroundBorderless", según su preferencia. Yo prefiero Borderless.

Puede ponerlo en android:backgroundo android:foregroundpara 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, los tienen truepor defecto.

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

Programáticamente (Java)

TypedValue value = new TypedValue();
context.getTheme().resolveAttribute(android.R.attr.selectableItemBackground, value, true);
myView.setBackgroundResource(value.resourceId);
myView.setFocusable(true); // If needed for view type

Programáticamente (Kotlin)

val value = TypedValue()
context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
myView.setBackgroundResource(value.resourceId)
myView.setFocusable(true) // If needed for view type

Función de extensión reutilizable de Kotlin

myView.ripple()

fun View.ripple(): View {
    val value = TypedValue()
    context.theme.resolveAttribute(android.R.attr.selectableItemBackground, value, true)
    setBackgroundResource(value.resourceId)
    isFocusable = true // Required for some view types
    return this
}

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

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

Además de Sudheesh R

Agregue Ripple Effect / Animation a un botón de Android con forma de rectángulo de botón con esquina

Cree un archivo xml res / drawable / your_file_name.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="@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>

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

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

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

<?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>

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: deberá crear un selector personalizado por menos de v21:

<?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>

prueba esto

<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" />

Un enfoque simple es establecer un tema de vista como se describe aquí .

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

Solo usa :

android:backgroundTint="#f816a463"

En vez de:

android:background="#f816a463"

No olvides cambiar tu Buttonaandroid.support.v7.widget.AppCompatButton

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

Cree un dibujo para el fondo del botón e inclúyalo <item android:drawable="?attr/selectableItemBackground">en<layer-list>

Luego (y creo que esta es la parte importante) se establece 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>