Efek riak pada Android Lollipop CardView


192

Saya mencoba mendapatkan CardView untuk menampilkan efek riak ketika disentuh dengan mengatur atribut android: backgound dalam file XML aktivitas seperti dijelaskan di sini di halaman Android Developers, tetapi tidak berfungsi. Tidak ada animasi sama sekali, tetapi metode di onClick dipanggil. Saya juga mencoba membuat file ripple.xml seperti yang disarankan di sini , tetapi hasilnya sama.

CardView seperti yang muncul di file XML aktivitas:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="155dp"
    android:layout_height="230dp"
    android:elevation="4dp"
    android:translationZ="5dp"
    android:clickable="true"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:onClick="showNotices"
    android:background="?android:attr/selectableItemBackground"
    android:id="@+id/notices_card"
    card_view:cardCornerRadius="2dp">

</android.support.v7.widget.CardView> 

Saya relatif baru dalam pengembangan android, jadi saya mungkin telah membuat beberapa kesalahan yang jelas.

Jawaban:


594

Anda harus menambahkan yang berikut ke CardView:

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

8
Bekerja pada lollipop dengan efek riak tetapi hanya memberi warna solid saat dijalankan pada platform lama. Cukup baik untukku :)
mach

16
Sebuah pengamatan kecil: Saya mencatat bahwa atribut yang dapat diklik tidak diperlukan dan bahkan dapat merusak beberapa hal! Saya memiliki GridView yang diisi dengan CardViews yang dapat diklik dan pendengarnya tidak berfungsi dengan baik. Saya menghapus tag yang dapat diklik dari XML dan semuanya sekarang berfungsi dengan sempurna
Joaquin Iurchuk

2
@ Jooaquin tanpa dapat diklik, itu menyebabkan riak berasal dari pusat saja
frostymarvelous

2
?android:attr/selectableItemBackgroundmembutuhkan API level 11
Pratik Butani

9
Bekerja tanpa android:clickable="true".
Sean

30

Tambahkan dua kode baris ini ke tampilan xml Anda untuk memberikan efek riak pada cardView Anda.

android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"

Luar biasa! foregroundbekerja dengan tampilan latar belakang kustom seperti pesona! Bagus!
sud007

24

Saya berhasil mendapatkan efek riak pada cardview dengan:

<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:clickable="true" 
    android:foreground="@drawable/custom_bg"/>

dan untuk custom_bg yang dapat Anda lihat dalam kode di atas, Anda harus mendefinisikan file xml untuk perangkat lollipop (dalam paket drawable-v21) dan pra-lollipop (dalam paket yang dapat ditarik). untuk custom_bg dalam paket drawable-v21 kodenya adalah:

<ripple 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
<item
    android:id="@android:id/mask"
    android:drawable="@android:color/white"/>
</ripple>

untuk custom_bg dalam paket drawable, kodenya adalah:

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

<item android:state_pressed="true">
    <shape>
        <solid android:color="@color/colorHighlight"></solid>
    </shape>
</item>
<item>
    <shape>
        <solid android:color="@color/navigation_drawer_background"></solid>
    </shape>
</item>
</selector>

jadi pada perangkat pre-lollipop Anda akan memiliki efek klik padat dan pada perangkat lollipop Anda akan memiliki efek riak pada cardview.


1
Hai, saya sadar dengan menerapkan pemilih (atau riak) di latar depan CardView, itu akan memblokir anak-anak di CardView sendiri - stackoverflow.com/questions/33763403/... Bolehkah saya tahu Anda menemukan masalah yang sama seperti yang saya lakukan? Atau, apakah saya kehilangan sesuatu? Terima kasih.
Cheok Yan Cheng

@CheokYanCheng: Saya tidak menghadapi masalah seperti masalah Anda tetapi saya akan mengatakan dari pengalaman pribadi bahwa cardView memiliki beberapa bug untuk pre-lollipop. Hindari menggunakan cardview: properti elevasi di pre-lollipop. Di atas berfungsi dengan baik untuk saya dan upvotes lainnya.
Rahul Ahuja

Boleh saya tahu, berapa nilai colorHighlight & navigation_drawer_background Anda. Jika Anda menggunakan warna yang Anda tentukan sendiri tanpa transparansi, apakah Anda masih dapat melihat anak-anak kartu Anda?
Cheok Yan Cheng

@CheokYanCheng: nilainya seperti, <color name = "navigation_drawer_background"> ​​# FFFFFF </color> <color name = "colorHighlight"> # FF8A65 </color>
Rahul Ahuja

Saya tidak bekerja untuk kasus saya. Saya menggunakan pemilih Anda sebagai latar depan. Seperti yang diharapkan, warna putih solid (navigation_drawer_background), yang digunakan sebagai latar depan tampilan kartu akan memblokir visibilitas semua anak - i.imgur.com/CleYh5B.png Ini adalah tampilannya tanpa menerapkan pemilih sebagai foreground - i.imgur. com / ZXk5Aoq.png
Cheok Yan Cheng

14

Efek riak dihilangkan di pustaka dukungan appcompat yang Anda gunakan. Jika Anda ingin melihat riak, gunakan versi Android L dan uji pada perangkat Android L. Per situs AppCompat v7:

"Mengapa tidak ada riak pada pra-Lollipop? Banyak hal yang memungkinkan RippleDrawable untuk berjalan dengan lancar adalah RenderThread Android 5.0 yang baru. Untuk mengoptimalkan kinerja pada versi Android sebelumnya, kami membiarkan RippleDrawable keluar untuk saat ini."

Lihat tautan ini di sini untuk info lebih lanjut


Itu saja. Terima kasih!
AkraticCritic

39
Tapi bagaimana Anda memberi efek riak pada cardView untuk Android Lollipop?
Pengembang Android

Jadi saya harus memutuskan antara kompatibilitas ke belakang menggunakan appcompat atau memiliki semua efek baru, menggunakan kelas dari inti Android tetapi membatasi diri saya ke API 21?
Urs Reupke

Anda dapat membuat 2 APK satu untuk 21+ dan yang lain untuk <21. Atau membagi kode karena 21+ tidak akan menggunakan supportActionbar dll. Mungkin terdengar seperti banyak masalah, tapi itu masalah Anda, saya percaya.
Mathijs Segers

1
Inilah sebabnya mengapa menulis aplikasi Android L "murni" tidak dapat dilakukan saat ini. Pada Juli 2015 Anda akan menargetkan 12% dari basis pengguna Android.
Glenn Bech

10

Jika aplikasi minSdkVersionyang Anda gunakan level 9, Anda dapat menggunakan:

android:foreground="?selectableItemBackground"
android:clickable="true"

Sebaliknya, mulai dari level 11, Anda menggunakan:

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

Dari dokumentasi:

diklik - Menentukan apakah pandangan ini bereaksi terhadap peristiwa klik. Harus berupa nilai boolean, baik "benar" atau "salah".

foreground - Menentukan drawable untuk menggambar konten. Ini dapat digunakan sebagai hamparan. Drawable foreground berpartisipasi dalam padding konten jika gravitasi diatur untuk mengisi.


Menggunakan android: foreground = "? Android: attr / selectableItemBackground" bekerja untuk kompatibilitas AndroidX, terima kasih!
dianakarenms

6

Bagi saya, menambahkan foregroundto CardViewtidak berfungsi (alasan tidak diketahui: /)

Menambahkan yang sama untuk tata letak anak itu melakukan trik.

KODE:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:focusable="true"
    android:clickable="true"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:id="@+id/card_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        android:padding="@dimen/card_padding">

    </LinearLayout>
</android.support.v7.widget.CardView>

2
Itu karena anak menyadap acara tersebut, jika Anda mencoba sesuatu seperti menambahkan padding ke cardview (sekitar 20dp), dan Anda mengklik pada bagian di mana padding akan berada, maka Anda akan melihat efek riak bahkan tanpa anak memiliki set atribut foreground
Cruces

1
Ini juga bekerja untuk saya, menggunakan Komponen Bahan baru: com.google.android.material.card.MaterialCardView. Saya memiliki status elevasiListAnimator untuk tampilan kartu untuk menyesuaikan ketinggian dan riak yang diterapkan pada tata letak kendala batin dengan latar belakang item yang dapat dipilih di latar depan tanpa atribut yang dapat diklik.
Patty P

Saya tidak ingat sekarang, tetapi ada cara untuk mengatur pandangan anak untuk tidak bereaksi terhadap acara klik
Seseorang di suatu tempat

3

Tambahkan dua ini seperti kerja kode seperti pesona untuk tampilan seperti Tombol, Linear Layout, atau CardView Cukup letakkan dua baris ini dan lihat keajaiban ...

android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"

2

Jika ada tata letak root seperti RelativeLayout atau LinearLayout yang berisi semua komponen item adaptor di CardView, Anda harus mengatur atribut latar belakang dalam tata letak root tersebut. Suka:

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/touch_bg"/>
</android.support.v7.widget.CardView>

2

Acara riak untuk Cardviewkontrol android :

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    android:layout_marginBottom="4dp"
    android:layout_marginTop="4dp" />

1

Saya tidak senang dengan AppCompat, jadi saya menulis CardView saya sendiri dan riak yang di-backport. Ini dia berjalan di Galaxy S dengan Gingerbread, jadi pasti mungkin.

Demo Ripple di Galaxy S

Untuk lebih jelasnya periksa kode sumber .


tautannya rusak
temirbek

1

Tambahkan berikut ini ke xml Anda:

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

Dan tambahkan ke adaptor Anda (jika itu kasus Anda)

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            val attrs = intArrayOf(R.attr.selectableItemBackground)
            val typedArray = holder.itemView.context.obtainStyledAttributes(attrs)
            val selectableItemBackground = typedArray.getResourceId(0, 0)
            typedArray.recycle()

            holder.itemView.isClickable = true
            holder.itemView.isFocusable = true
            holder.itemView.foreground = holder.itemView.context.getDrawable(selectableItemBackground)
        }
    }

0

Bagi mereka yang mencari solusi untuk masalah efek riak yang tidak bekerja pada CardView yang dibuat secara program (atau dalam kasus khusus saya yang memperluas CardView) yang ditampilkan dalam RecyclerView, berikut ini bekerja untuk saya. Pada dasarnya mendeklarasikan atribut XML yang disebutkan dalam jawaban lain secara deklaratif dalam file tata letak XML tampaknya tidak berfungsi untuk CardView yang dibuat secara terprogram, atau yang dibuat dari tata letak khusus (meskipun tampilan root adalah CardView atau elemen gabungan digunakan), jadi mereka harus diatur secara terprogram seperti:

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
    private MadeUpCardView cardView;

    public MadeUpCardViewHolder(View v){
        super(v);

        this.cardView = (MadeUpCardView)v;

        // Declaring in XML Layout doesn't seem to work in RecyclerViews
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int[] attrs = new int[]{R.attr.selectableItemBackground};
            TypedArray typedArray = context.obtainStyledAttributes(attrs);
            int selectableItemBackground = typedArray.getResourceId(0, 0);
            typedArray.recycle();

            this.cardView.setForeground(context.getDrawable(selectableItemBackground));
            this.cardView.setClickable(true);
        }
    }
}

Di mana MadeupCardView extends CardViewKudos untuk jawaban ini untuk TypedArraybagian itu.


0
  android:foreground="?android:attr/selectableItemBackgroundBorderless"
   android:clickable="true"
   android:focusable="true"

Hanya bekerja api 21 dan gunakan ini tidak menggunakan tampilan kartu baris daftar ini


0

Gunakan Material Cardview sebagai gantinya, itu memperluas Cardview dan menyediakan beberapa fitur baru termasuk efek yang dapat diklik default:

<com.google.android.material.card.MaterialCardView>

...

</com.google.android.material.card.MaterialCardView>

Ketergantungan

implementation 'com.google.android.material:material:1.0.0'
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.