Appliquer l'ondulation tactile de Material Design à ImageButton?

95

J'ai un bouton d'image qui ne répond pas avec une animation tactile lorsque vous cliquez dessus, car il s'agit d'une image statique contrairement aux boutons normaux de la sucette qui sont livrés avec l'effet d'entraînement intégré. Je voudrais ajouter l'effet tactile d'ondulation de conception matérielle à l'image, mais je n'arrive pas à trouver un moyen de l'implémenter. Je peux définir un filtre de couleur sur l'image mais ce n'est pas l'effet d'entraînement. Un exemple de ce que j'essaie de faire est lorsque vous tenez une image de couverture d'album dans Google Play Musique et qu'une ondulation d'ombre se déplace sur l'image.

— sanic
source

261

Pour un résultat encore meilleur:

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

— i.shadrin
source

7

C'est la meilleure réponse - donnant la sensation circulaire ainsi que l'effet d'entraînement, merci.

— ElliotM

3

Cela devrait-il également fonctionner avec les tirages colorés? Pour moi, aucun effet tactile n'est visible bien que l'application du fond. Mon thème s'étend de Theme.AppCompat.Light.DarkActionBar, cela pourrait-il être un problème?

— Afficher le nom

12

à la place, utilisez-le au premier plan pour toutes les vues, il fonctionne correctement.

— Gopi Cg

1

Quelqu'un a-t-il trouvé un moyen de faire cela et également de changer la couleur d'arrière-plan? Changer BackgroundTint ne fonctionne pas et définir le Foreground sur "? Attr / selectableItemBackgroundBorderless" donne un mauvais remplissage sur le bouton.

— Sev

1

Si vous utilisez un arrière-plan sombre, l'ondulation peut ne pas être suffisamment visible. Vous le changez en une ondulation de couleur claire en ajoutant android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(fonctionne sur <API 21). Voir stackoverflow.com/q/28605031/599535 pour d'autres solutions.

— Lifes

28

Vous pouvez simplement ajouter un arrière-plan à votre ImageButton comme ceci:

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

— Nicolas
source

2

Utilisez Android: foreground = "? Attr / selectableItemBackgroundBorderless"

— MFQ

@MFQ En quoi est-ce différent du? Android: attr / selectableItemBackground

— Killer

1

@killer selectableItemBackgroundBorderless = donne une ondulation circulaire sans limites, comme si vous cliquez sur une icône dans la barre d'outils, mais selectableItemBackground donne une ondulation du rectangle, vous pouvez voir la différence si vous avez longtemps cliqué sur l'icône qui implémente ces tirettes

— MFQ

6

J'ai eu de bonnes réponses de i.shadrin ( ici ) et de Nicolars ( ici ).

La différence entre leurs réponses est que cela ?attr/selectableItemBackgroundBorderlesspeut vous donner un android.view.InflateException, alors ?android:attr/selectableItemBackgroundc'est la solution.

FWIW, je ne sais pas pourquoi l'exception se produit, car la première réponse a bien fonctionné dans tous mes anciens projets, mais pas dans mon projet récent (peut-être parce que le thème de l'application = android:Theme.Material?).

La chose étrange qui se passait est que bien que l'effet d'entraînement ait été montré, il dépassait le ImageButton, donc la solution est:

Pour utiliser au android:foreground="?android:attr/selectableItemBackgroundBorderless"lieu deandroid:background="?android:attr/selectableItemBackgroundBorderless"

J'espère que cela vous aidera si vous faites face à la même chose.

— Filipe Brito
source

3

Si vous avez déjà un arrière-plan et que vous ne souhaitez pas le modifier, utilisez le premier plan;

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