Menambahkan Efek Ripple ke item RecyclerView

105

Saya mencoba menambahkan Efek Ripple ke item RecyclerView. Saya telah mencari online, tetapi tidak dapat menemukan apa yang saya butuhkan. Saya berasumsi itu harus menjadi efek khusus. Saya telah mencoba atribut android: background ke RecyclerView itu sendiri dan menyetelnya ke "? Android: selectableItemBackground" tetapi tidak berhasil .:

    <android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:clickable="true"
    android:background="?android:selectableItemBackground"
    android:id="@+id/recyclerView"
    android:layout_below="@+id/tool_bar"/>

Ini adalah RecyclerView yang saya coba tambahkan efeknya:

masukkan deskripsi gambar di sini

Georgi Koemdzhiev
sumber
1
Saya membuka kembali ini bukan duplikat dari pertanyaan ini . Meskipun solusinya mungkin serupa, ada aspek tertentu yang memiliki a CardViewdalam pertanyaan itu yang tidak berkaitan dengan pertanyaan yang lebih umum ini.
Suragch
@Suragch Terima kasih telah memperhatikan perbedaannya :)
Georgi Koemdzhiev

Jawaban:

222

Saya pikir. Satu-satunya hal yang harus saya lakukan adalah menambahkan atribut ini:

android:background="?android:attr/selectableItemBackground"

ke elemen root tata letak tempat adaptor RecyclerView saya mengembang seperti itu:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="8dp"
    android:paddingBottom="8dp"
    android:background="?android:attr/selectableItemBackground"
    tools:background="@drawable/bg_gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="17sp"
        android:layout_marginLeft="15dp"
        android:layout_marginStart="15dp"
        android:id="@+id/shoppingListItem"
        android:hint="@string/enter_item_hint"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/shopping_list_item_checkbox_label"
        android:id="@+id/shoppingListCheckBox"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:checked="false"/>

</RelativeLayout>

Hasil:

masukkan deskripsi gambar di sini

Jika Anda masih tidak dapat melihat efek riak, tambahkan juga garis-garis ini ke elemen akar tata letak.

android:clickable="true"
android:focusable="true"
Georgi Koemdzhiev
sumber
3
Bagaimana jika elemen root adalah CardView?
Nabin
6
@SpiderMan Anda harus menulis kode Anda di dalam Relative atau Linear Layout dan kemudian menempatkannya di dalam Card Layout.
SanVed
7
@pronoobsanved, ini membantu saya! Bagi mereka yang masih menghadapi masalah, CardView menggunakan satu layout sebagai anak. Untuk anak itu, setel dapat diklik, dapat difokuskan sebagai benar dan latar belakang sebagai? Attr / selectedableItemBackground
Vamsi Challa
42
@NabinKhadka untuk CardView, tetapkan sebagai latar depan, yaituandroid:foreground="?android:attr/selectableItemBackground"
Lorne Laliberte
6
Saya harus menambahkan opsi android:clickable="true"juga agar ini berfungsi
Joaquin Iurchuk
69

Seperti yang sudah dijawab, solusi paling sederhana adalah dengan menambahkan salah satu dari berikut ini sebagai RecyclerViewlatar belakang baris Anda :

  • android:background="?android:attr/selectableItemBackground"
  • android:background="?attr/selectableItemBackground"

Namun jika Anda mengalami masalah dengan metode ini atau jika Anda ingin kontrol yang lebih baik atas warna, maka Anda dapat melakukan hal berikut.

Efek Riak Kustom

Jawaban ini dimulai dengan contoh RecyclerView Android sederhana ini . Ini akan terlihat seperti gambar berikut.

GIF contoh efek riak

Tambahkan pemilih untuk perangkat pra API 21

Sebelum API 21 (Android 5.0 Lollipop), mengklik RecyclerViewitem baru saja mengubah warna latar belakangnya (tanpa efek riak). Itulah yang akan kami lakukan juga. Jika Anda masih memiliki pengguna dengan perangkat tersebut, mereka terbiasa dengan perilaku tersebut, jadi kami tidak akan terlalu mengkhawatirkan mereka. (Tentu saja, jika Anda juga benar-benar menginginkan efek riak untuk mereka, Anda dapat menggunakan pustaka khusus .)

Klik kanan res/drawablefolder Anda dan pilih New> Drawable resource file . Sebut saja custom_ripple. Klik OK dan tempel kode berikut.

custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

Saya menggunakan colorAccentwarna highlight untuk keadaan yang ditekan karena sudah tersedia, tetapi Anda dapat menentukan warna apa pun yang Anda inginkan.

Tambahkan Efek Ripple untuk perangkat API 21+

Klik kanan res/drawablefolder Anda dan pilih New> Drawable resource file . Sebut custom_ripplelagi. Namun, jangan klik OK, kali ini. Dari daftar Qualifier yang tersedia pilih Version , lalu klik tombol >> dan tulis 21untuk level API Platform . Sekarang klik OK dan tempelkan kode berikut.

v21 / custom_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">

    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

Sekali lagi, saya menggunakan colorAccentwarna riak karena itu tersedia, tetapi Anda dapat menggunakan warna apa pun yang Anda inginkan. Topeng membatasi efek riak hanya pada tata letak baris. Warna topeng tampaknya tidak masalah jadi saya hanya menggunakan putih buram.

Tetapkan sebagai latar belakang

Dalam tata letak akar item RecyclerView Anda, setel latar belakang ke riak khusus yang kita buat.

android:background="@drawable/custom_ripple"

Dalam proyek contoh yang kami mulai, terlihat seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/custom_ripple"
    android:padding="10dp">

    <TextView
        android:id="@+id/tvAnimalName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"/>

</LinearLayout>

Jadi

Itu dia. Anda seharusnya dapat menjalankan proyek Anda sekarang. Terima kasih atas jawaban ini dan video YouTube untuk bantuan.

Suragch
sumber
Jika Anda ingin memiliki warna latar belakang default, cukup hapus baris 'android: id = "@ android: id / mask' dan kemudian setel warna drawable ke apa pun yang Anda inginkan.
Jordan Hochstetler
26

Saya pikir ada satu detail kecil yang terlewat.

Jika Anda masih tidak mendapatkan efek riak setelah menambahkan, android:background="?android:attr/selectableItemBackground"coba tambahkan baris berikut ini di root tata letak.

android:clickable="true"
android:focusable="true"

Ini akan memastikan bahwa tampilan dapat diklik dan akan mengaktifkan efek riak dengan atribut latar belakang yang disebutkan di atas

Sriram R
sumber
5

tambahkan baris ini di tampilan root adaptor xml Anda

android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
Gundu Bandgar
sumber
2

Pendekatan sederhana dan khusus adalah menyetel tema tampilan seperti yang diuraikan di sini .

some_view.xml

<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="?attr/selectableItemBackgroundBorderless"
   android:focusable="true"
   android:src="@drawable/up_arrow"
   android:theme="@style/SomeButtonTheme"/>

some_style.xml

<style name="SomeButtonTheme" >
   <item name="colorControlHighlight">@color/someColor</item>
</style>

Penerapan kustom lainnya dapat ditemukan di sini .

Adam Hurwitz
sumber
1

Menggunakan Gaya Tombol

Ini telah berhasil bagi saya tak terhitung jumlahnya.

Tambahkan Gaya Tombol Tanpa Batas ke elemen akar tata letak Anda. Tidak perlu focusableatau clickableatribut, gaya default merangkum semua itu untuk Anda.

<androidx.constraintlayout.widget.ConstraintLayout
    style="@android:style/Widget.Material.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
Felix Mendukung Chinemerem
sumber
keren, tapi padding ini menambahkan
ededede
@ededede Anda dapat menggunakan atribut XML min-height, max-height, width ... XML untuk menyesuaikannya dengan selera Anda.
Felix Favor Chinemerem