Material Design Touch Ripple auf ImageButton anwenden?

95

Ich habe eine Bildschaltfläche, die beim Klicken nicht mit einer Berührungsanimation reagiert, da es sich im Gegensatz zu normalen Schaltflächen auf dem Lutscher, die über den integrierten Welleneffekt verfügen, um ein statisches Bild handelt. Ich möchte dem Bild den Ripple-Touch-Effekt für das Materialdesign hinzufügen, kann aber anscheinend keinen Weg finden, ihn zu implementieren. Ich kann einen Farbfilter über dem Bild einstellen, aber das ist nicht der Welleneffekt. Ein Beispiel für das, was ich versuche, ist, wenn Sie ein Album-Titelbild in Google Play Music halten und sich eine Schattenwelle über das Bild bewegt.

android xml android-5.0-lollipop imagebutton material-design sanic
quelle

Antworten:

259

Für ein noch besseres Ergebnis: 

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>
i.shadrin
quelle
6
Dies ist die bessere Antwort - danke für das kreisförmige Gefühl und den Welleneffekt.
ElliotM
3
Sollte dies auch mit farbigen Drawables funktionieren? Für mich ist kein Touch-Effekt sichtbar, obwohl der Hintergrund angewendet wird. Mein Thema erstreckt sich von Theme.AppCompat.Light.DarkActionBar. Könnte dies ein Problem sein?
Anzeigename
12
Verwenden Sie stattdessen den Vordergrund für alle Ansichten, die einwandfrei funktionieren.
Gopi Cg
1
Hat jemand einen Weg gefunden, dies zu tun und auch die Hintergrundfarbe zu ändern? Das Ändern von BackgroundTint funktioniert nicht und das Setzen des Vordergrunds auf "? Attr / selectableItemBackgroundBorderless" führt zu einem unangenehmen Auffüllen der Schaltfläche.
Sev
1
Wenn Sie einen dunklen Hintergrund verwenden, ist die Welligkeit möglicherweise nicht sichtbar genug. Sie ändern es durch Hinzufügen in eine helle Welligkeit android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(funktioniert bei <API 21). Weitere Lösungen finden Sie unter stackoverflow.com/q/28605031/599535 .
Lifes
28

Sie können Ihrem ImageButton einfach einen Hintergrund hinzufügen:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />
Nicolas
quelle
2
Verwenden Sie android: foreground = "? Attr / selectableItemBackgroundBorderless"
MFQ
@ MFQ Wie unterscheidet es sich von? Android: attr / selectableItemBackground
Killer
1
@killer selectableItemBackgroundBorderless = Geben Sie eine kreisförmige Welligkeit ohne Grenzen an, wie wenn Sie auf ein Symbol in der Symbolleiste klicken, aber selectableItemBackground gibt eine Rechteckwelligkeit an. Sie können den Unterschied sehen, wenn Sie lange auf das Symbol geklickt haben, das diese Drawbels implementiert
MFQ
6

Ich habe gute Antworten von i.shadrin ( hier ) und Nicolars ( hier ) bekommen.

Der Unterschied zwischen ihren Antworten ist, ?attr/selectableItemBackgroundBorderlessdass Sie eine geben könnenandroid.view.InflateException , also ?android:attr/selectableItemBackgroundist das die Lösung.

FWIW, ich weiß nicht, warum die Ausnahme auftritt, da die erste Antwort in allen meinen alten Projekten gut funktioniert hat, in meinem letzten Projekt jedoch nicht (möglicherweise, weil das App-Thema = android:Theme.Material ?).

Das Seltsame war, dass der Ripple-Effekt zwar gezeigt wurde, aber den ImageButton überstieg. Die Lösung lautet also:

  • Um das android:foreground="?android:attr/selectableItemBackgroundBorderless"anstelle von zu verwendenandroid:background="?android:attr/selectableItemBackgroundBorderless"

Ich hoffe, es hilft Ihnen, wenn Sie vor dem gleichen stehen.

Filipe Brito
quelle
3

Wenn Sie bereits einen Hintergrund haben und diesen nicht ändern möchten, verwenden Sie den Vordergrund.

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