Zastosować falowanie dotyku Material Design do ImageButton?

96

Mam przycisk obrazu, który nie reaguje animacją dotykową po kliknięciu, ponieważ jest to obraz statyczny, w przeciwieństwie do zwykłych przycisków na Lollipopie, które mają wbudowany efekt tętnienia. Chciałbym dodać efekt ripple touch do obrazu, ale nie mogę znaleźć sposobu na jego wdrożenie. Mogę ustawić filtr kolorów na obrazie, ale to nie jest efekt tętnienia. Przykładem tego, co próbuję zrobić, jest trzymanie obrazu okładki albumu w Muzyce Google Play i poruszanie się po nim cieni.

android xml android-5.0-lollipop imagebutton material-design sanic
źródło

Odpowiedzi:

265

Dla jeszcze lepszego wyniku: 

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>
i.shadrin
źródło
7
To jest lepsza odpowiedź - dziękuję za efekt kolistości i tętnienia.
ElliotM
3
Czy powinno to działać również z kolorowymi przedmiotami do rysowania? U mnie nie widać efektu dotyku pomimo nałożenia tła. Mój motyw rozszerza się z Theme.AppCompat.Light.DarkActionBar, czy to może być problem?
Wyświetlana nazwa
12
zamiast tego używa go jako pierwszego planu dla wszystkich widoków, które działa dobrze.
Gopi Cg
1
Czy ktoś znalazł sposób na zrobienie tego i zmianę koloru tła? Zmiana BackgroundTint nie działa, a ustawienie Foreground na „? Attr / selectableItemBackgroundBorderless” powoduje nieprzyjemne wypełnienie przycisku.
Siedem
1
Jeśli używasz ciemnego tła, tętnienie może nie być wystarczająco widoczne. Zmieniasz to na tętnienie w jasnym kolorze, dodając android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(działa na <API 21). Więcej rozwiązań znajdziesz na stackoverflow.com/q/28605031/599535 .
Lifes
28

Możesz po prostu dodać tło do swojego ImageButton w następujący sposób:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />
Nicolas
źródło
2
Użyj android: foreground = "? Attr /
selectableItemBackgroundBorderless
@MFQ Czym różni się od? Android: attr / selectableItemBackground
Killer
1
@killer selectableItemBackgroundBorderless = daj okrągłe tętnienie bez ograniczeń, jak kliknięcie ikony na pasku narzędzi, ale selectableItemBackground daje tętnienie prostokąta, możesz zobaczyć różnicę, jeśli długo kliknąłeś ikonę, która implementuje te drawbele
MFQ
6

Otrzymałem dobre odpowiedzi od i.shadrin ( tutaj ) i Nicolars ( tutaj ).

Różnica między ich odpowiedziami polega na tym, że ?attr/selectableItemBackgroundBorderlessmogą one dać ci odpowiedź android.view.InflateException, więc ?android:attr/selectableItemBackgroundjest to rozwiązanie.

FWIW, nie wiem, dlaczego zdarza się wyjątek, ponieważ pierwsza odpowiedź działała dobrze we wszystkich moich starych projektach, ale w moim ostatnim nie (może dlatego, że motyw aplikacji = android:Theme.Material?).

Dziwne było to, że chociaż efekt tętnienia został pokazany, wykraczał poza ImageButton, więc rozwiązanie jest następujące:

  • Aby użyć android:foreground="?android:attr/selectableItemBackgroundBorderless"zamiastandroid:background="?android:attr/selectableItemBackgroundBorderless"

Mam nadzieję, że pomoże ci to, jeśli napotkasz to samo.

Filipe Brito
źródło
3

Jeśli masz już tło i nie chcesz go zmieniać, użyj pierwszego planu;

<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ş
źródło