Terapkan Ripple Sentuhan Desain Material ke ImageButton?

96

Saya memiliki tombol gambar yang tidak merespons dengan animasi sentuh saat diklik karena ini adalah gambar statis tidak seperti tombol biasa pada permen lolipop yang dilengkapi dengan efek riak bawaan. Saya ingin menambahkan efek sentuhan riak desain material ke gambar tetapi tampaknya tidak dapat menemukan cara untuk menerapkannya. Saya dapat menyetel filter warna di atas gambar, tetapi itu bukan efek riak. Contoh dari apa yang saya coba lakukan adalah saat Anda memegang gambar sampul album di Google Play Musik dan riak bayangan bergerak di seluruh gambar.

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

Jawaban:

266

Untuk hasil yang lebih baik: 

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>
i.shadrin
sumber
7
Ini adalah jawaban yang lebih baik - memberikan kesan melingkar sekaligus efek riak, terima kasih.
ElliotM
3
Haruskah ini juga berfungsi dengan drawable berwarna? Bagi saya, tidak ada efek sentuhan yang terlihat meskipun menerapkan latar belakang. Tema saya diturunkan dari Theme.AppCompat.Light.DarkActionBar, apakah ini bisa menjadi masalah?
Nama tampilan
12
sebagai gantinya gunakan latar belakang untuk latar depan agar semua tampilan berfungsi dengan baik.
Gopi Cg
1
Adakah yang menemukan cara untuk melakukan ini dan juga mengubah warna latar belakang? Mengubah BackgroundTint tidak berfungsi dan pengaturan Foreground ke "? Attr / selectableItemBackgroundBorderless" memberikan padding yang tidak enak pada tombol.
Sev
1
Jika Anda menggunakan latar belakang gelap, riak mungkin tidak cukup terlihat. Anda mengubahnya menjadi riak berwarna terang dengan menambahkan android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(bekerja pada <API 21). Lihat stackoverflow.com/q/28605031/599535 untuk solusi lainnya.
Lifes
28

Anda bisa menambahkan latar belakang ke ImageButton Anda seperti ini:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />
Nicolas
sumber
2
Gunakan android: foreground = "? Attr / selectableItemBackgroundBorderless"
MFQ
@MFQ Bagaimana ini berbeda dari? Android: attr / selectableItemBackground
Killer
1
@killer selectableItemBackgroundBorderless = berikan riak melingkar tanpa batas seperti jika Anda mengklik ikon di Toolbar, tetapi selectableItemBackground memberikan riak persegi panjang, Anda dapat melihat perbedaannya jika lama mengklik ikon yang menerapkan drawbels ini
MFQ
6

Saya mendapat jawaban bagus dari i.shadrin (di sini ) dan Nicolars (di sini ).

Perbedaan antara jawaban mereka adalah yang ?attr/selectableItemBackgroundBorderlessdapat memberi Anda android.view.InflateException, jadi ?android:attr/selectableItemBackgroundsolusinya.

FWIW, saya tidak tahu mengapa pengecualian terjadi, karena jawaban pertama berfungsi dengan baik di semua proyek lama saya, tetapi di proyek terbaru saya tidak (mungkin karena tema aplikasi = android:Theme.Material?).

Hal aneh yang terjadi adalah bahwa meskipun efek riak ditampilkan, itu melampaui ImageButton, jadi solusinya adalah:

  • Untuk menggunakan android:foreground="?android:attr/selectableItemBackgroundBorderless"alih - alihandroid:background="?android:attr/selectableItemBackgroundBorderless"

Semoga membantu Anda jika Anda menghadapi hal yang sama.

Filipe Brito
sumber
3

Jika Anda sudah memiliki latar belakang dan tidak ingin mengubahnya, gunakan latar depan;

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