Applicare Ripple Touch di Material Design a ImageButton?

95

Ho un pulsante immagine che non risponde con un'animazione tattile quando viene cliccato perché è un'immagine statica a differenza dei normali pulsanti su lecca-lecca che vengono forniti con l'effetto a catena incorporato. Vorrei aggiungere l'effetto tocco increspato del material design all'immagine ma non riesco a trovare un modo per implementarlo. Posso impostare un filtro colore sull'immagine ma non è l'effetto a catena. Un esempio di ciò che sto cercando di fare è quando tieni premuta l'immagine di copertina di un album in Google Play Music e un'increspatura dell'ombra si sposta sull'immagine.

— sanic
fonte

259

Per risultati ancora migliori:

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

— i.shadrin
fonte

6

Questa è la risposta migliore: grazie alla sensazione circolare e all'effetto a catena.

— ElliotM

3

Questo dovrebbe funzionare anche con i drawable colorati? Per me nessun effetto tocco è visibile anche se si applica lo sfondo. Il mio tema si estende da Theme.AppCompat.Light.DarkActionBar, potrebbe essere un problema?

— Nome visualizzato

12

invece lo sfondo lo usa in primo piano per tutte le viste che funziona bene.

— Gopi Cg

1

Qualcuno ha trovato un modo per farlo e cambiare anche il colore di sfondo? La modifica di BackgroundTint non funziona e l'impostazione di Foreground su "? Attr / selectableItemBackgroundBorderless" fornisce una fastidiosa imbottitura sul pulsante.

— Sev

1

Se utilizzi uno sfondo scuro, l'increspatura potrebbe non essere sufficientemente visibile. Puoi cambiarlo in un'ondulazione di colore chiaro aggiungendo android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(funziona su <API 21). Vedi stackoverflow.com/q/28605031/599535 per altre soluzioni.

— Lifes

28

Puoi semplicemente aggiungere uno sfondo al tuo ImageButton in questo modo:

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

— Nicolas
fonte

2

Usa android: foreground = "? Attr / selectableItemBackgroundBorderless"

— MFQ

@MFQ Com'è diverso da? Android: attr / selectableItemBackground

— Killer

1

@killer selectableItemBackgroundBorderless = dà un'increspatura circolare senza limiti come se clicchi su un'icona nella barra degli strumenti, ma selectableItemBackground dà un'increspatura rettangolare, puoi vedere la differenza se fai clic a lungo sull'icona che implementa questo drawbels

— MFQ

6

Ho ricevuto buone risposte da i.shadrin ( qui ) e Nicolars ( qui ).

La differenza tra le loro risposte è che ?attr/selectableItemBackgroundBorderlesspuò darti una android.view.InflateException, quindi ?android:attr/selectableItemBackgroundè la soluzione.

FWIW, non so perché l'eccezione accade, perché la prima risposta ha funzionato bene in tutti i miei vecchi progetti, ma nel mio progetto recente no (forse perché il tema dell'app = android:Theme.Material?).

La cosa strana che stava accadendo è che, sebbene fosse mostrato l'effetto a catena, era fuori delimitato da ImageButton, quindi la soluzione è:

Per usare android:foreground="?android:attr/selectableItemBackgroundBorderless"invece diandroid:background="?android:attr/selectableItemBackgroundBorderless"

Spero che ti aiuti se stai affrontando lo stesso.

— Filipe Brito
fonte

3

Se hai già uno sfondo e non vuoi cambiarlo, usa il primo piano;

<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ş
fonte