¿Aplicar ondulación táctil de Material Design a ImageButton?

95

Tengo un botón de imagen que no responde con una animación táctil cuando se hace clic en él porque es una imagen estática, a diferencia de los botones normales de una paleta que vienen con el efecto de onda incorporado. Me gustaría agregar el efecto de toque ondulado de diseño de material a la imagen, pero parece que no puedo encontrar una manera de implementarlo. Puedo establecer un filtro de color sobre la imagen, pero ese no es el efecto dominó. Un ejemplo de lo que estoy tratando de hacer es cuando sostienes la imagen de la portada de un álbum en Google Play Music y una onda de sombra se mueve a través de la imagen.

— sanic
fuente

263

Para un resultado aún mejor:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

— yo.shadrin
fuente

7

Esta es la mejor respuesta: dar la sensación circular y el efecto dominó, gracias.

— ElliotM

3

¿Debería funcionar esto también con dibujos de colores? Para mí ningún efecto táctil es visible aunque aplique el fondo. Mi tema se extiende desde Theme.AppCompat.Light.DarkActionBar, ¿podría ser esto un problema?

— Nombre

12

en su lugar, el fondo lo usa en primer plano para todas las vistas, funciona bien.

— Gopi Cg

1

¿Alguien ha encontrado una manera de hacer esto y también cambiar el color de fondo? Cambiar BackgroundTint no funciona y configurar el primer plano en "? Attr / selectableItemBackgroundBorderless" da un relleno desagradable en el botón.

— Sev

1

Si está usando un fondo oscuro, es posible que la ondulación no sea lo suficientemente visible. Lo cambia a una ondulación de color claro agregando android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(funciona en <API 21). Consulte stackoverflow.com/q/28605031/599535 para ver otras soluciones.

— Lifes

28

Puede simplemente agregar un fondo a su ImageButton de esta manera:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

— Nicolas
fuente

2

Use android: foreground = "? Attr /

— selectableItemBackgroundBorderless

@MFQ ¿En qué se diferencia del? Android: attr / selectableItemBackground

— Killer

1

@killer selectableItemBackgroundBorderless = da una ondulación circular sin límites como si hace clic en un icono en la barra de herramientas, pero seleccionableItemBackground da ondulación rectangular, puede ver la diferencia si hace clic durante mucho tiempo en el icono que implementa estos tiradores

— MFQ

6

Obtuve buenas respuestas de i.shadrin ( aquí ) y Nicolars ( aquí ).

La diferencia entre sus respuestas es que ?attr/selectableItemBackgroundBorderlesspuede darte una android.view.InflateException, por lo que?android:attr/selectableItemBackground es la solución.

FWIW, no sé por qué ocurre la excepción, porque la primera respuesta funcionó bien en todos mis proyectos anteriores, pero en mi proyecto reciente no (tal vez porque el tema de la aplicación = android:Theme.Material ?).

Lo extraño que estaba sucediendo es que, aunque se mostró el efecto dominó, superaba al ImageButton, por lo que la solución es:

Para usar el en android:foreground="?android:attr/selectableItemBackgroundBorderless"lugar deandroid:background="?android:attr/selectableItemBackgroundBorderless"

Espero que te ayude si te enfrentas a lo mismo.

— Filipe Brito
fuente

3

Si ya tiene un fondo y no desea cambiarlo, use el primer plano;

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>

— Sabri Meviş
fuente