Belajar Menggunakan CardView di Android Studio

Pendahuluan

Android 5.0 mengenalkan sebuah widget baru bernama CardView yang sebetulnya FrameLayout dengan sudut yang membulat dan shadow berdasarkan nilai elevation-nya. Perlu dicatat bahwa sebuah CardView membungkus suatu layout dan biasanya dipakai sebagai container untuk setiap item di dalam ListView atau RecyclerView.

Menggunakan CardView

Anggap kita memiliki layout yang seperti ini:

<FrameLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</FrameLayout>

Untuk menggantikan FrameLayout dengan CardView, pertama kita perlu menambahkan dependensinya terlebih dahulu di build.gradle:

dependencies {
    ...
    compile 'com.android.support:cardview-v7:25.2.1'
}

Lalu, ganti tag XML-nya.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</android.support.v7.widget.CardView>

Selesai! Hanya dengan menambahkan tag CardView kita sudah dapat mengganti tampilannya. Hanya saja tampilan CardView mungkin berbeda bagi perangkat yang menjalankan Android sebelum Lollipop.

Baca juga: Belajar Membuat Aplikasi Android dari 10 Aplikasi Open Source Ini

Kostumisasi CardView

CardView sudah memiliki elevation dan radius sudut bawaan agar memiliki layout yang konsisten. Namun, kita bisa mengubah nilai bawaan ini jika mau. Kita bahkan bisa mengubah warna latarnya.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#E6E6E6"
    card_view:cardCornerRadius="8dp"
    card_view:cardElevation="8dp">

    <!-- Main Content View -->
    <RelativeLayout>
        ...
    </RelativeLayout>
</android.support.v7.widget.CardView>

Perhatikan, propeti card_view:cardElevation dipakai untuk menentukan ukuran dan kehalusan dari shadow sealami mungkin. Properti di atas juga dapat diatur lewat Java:

CardView card = ...
card.setCardBackgroundColor(Color.parseColor("#E6E6E6"));
card.setMaxCardElevation(0.0);
card.setRadius(5.0);

Lihat dokumentasi CardView untuk properti lain.

Menambah Efek Ripple

Secara otomatis sebuah CardView tidak memiliki umpan balik apapun saat disentuh. Untuk menampilkan animasi visual untuk memberikan umpan balik saat CardView disentuh dapat ditambahkan dengan properti berikut:

<android.support.v7.widget.CardView
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</android.support.v7.widget.CardView>

Mendukung Sistem Android sebelum Lollipop

Di sistem Android sebelum Lollipop, CardView menambahkan padding agar memiliki radius di sudut-sudutnya. Untuk shadow juga CardView menambahkan padding untuk konten dan menampilkan shadow di daerah tersebut. Padding untuk content ini ditambah berdasarkan nilai elevation seperti yang tertulis di dokumentasinya:

Nilai padding berikut ini sama dengan maxCardElevation + (1 - cos45) * cornerRadius dibagian sisi (kiri dan kanan) dan maxCardElevation * 1.5 + (1 - cos45) * cornerRadius untuk bagian atas dan bawah.

Sehingga, jika ingin menambahkan padding khusus untuk konten, kita perlu menggunakan atribut card_view:contentPadding.

Lalu, untuk mengganti warna latar dari CardView, kita juga harus menggunakan atribut card_view:cardBackgroundColor.

Sumber: codepath