Membuat Tata Letak Berbasis Kartu

Sering kali aplikasi perlu menampilkan data dalam container dengan gaya yang mirip. Container ini sering digunakan dalam daftar untuk menampung informasi setiap item. Sistem menyediakan CardView API sebagai cara mudah untuk menampilkan informasi di dalam kartu yang memiliki tampilan konsisten di seluruh platform. Kartu ini memiliki elevasi default di atas kelompok tampilan yang menampungnya, sehingga sistem menggambar bayangan di bawahnya. Kartu memberikan cara mudah untuk menampung sekelompok tampilan, sekaligus memberikan gaya yang konsisten untuk container.

Gambar 1. Contoh kartu

Menambahkan dependensi

Widget CardView adalah bagian dari AndroidX. Untuk menggunakannya dalam project Anda, tambahkan dependensi berikut ke file build.gradle modul aplikasi Anda:

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

Membuat Kartu

Agar dapat menggunakan CardView, Anda perlu menambahkannya ke file tata letak. Gunakan ini sebagai kelompok tampilan untuk menampung tampilan lain. Dalam contoh ini, CardView berisi satu TextView untuk menampilkan informasi tertentu kepada pengguna.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

Kartu digambar ke layar dengan elevasi default, yang menyebabkan sistem menggambar bayangan di bawahnya. Anda dapat memberikan elevasi kustom untuk kartu dengan atribut card_view:cardElevation. Atribut ini akan menggambar bayangan yang lebih jelas dengan elevasi yang lebih besar, dan elevasi yang lebih rendah akan menghasilkan bayangan yang lebih terang. CardView menggunakan elevasi riil dan bayangan dinamis di Android 5.0 (API level 21) dan yang lebih baru, serta melakukan fallback ke implementasi bayangan terprogram pada versi lebih lama.

Gunakan properti ini untuk menyesuaikan tampilan widget CardView:

  • Untuk menetapkan radius sudut dalam tata letak Anda, gunakan atribut card_view:cardCornerRadius.
  • Untuk menetapkan radius sudut dalam kode Anda, gunakan metode CardView.setRadius.
  • Untuk menetapkan warna latar belakang kartu, gunakan atribut card_view:cardBackgroundColor.

Untuk informasi selengkapnya, lihat referensi API untuk CardView.