Membuat tata letak berbasis kartu

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.

Kartu di Material 3 →

Sering kali aplikasi perlu menampilkan data dalam container dengan gaya yang mirip, seperti kontainer yang menyimpan informasi tentang item dalam daftar. Sistem menyediakan CardView API untuk Anda menampilkan informasi di kartu yang memiliki tampilan konsisten di seluruh platform. Sebagai misalnya, kartu memiliki elevasi default di atas kelompok tampilan yang memuatnya, jadi sistem akan menggambar bayangan di bawahnya. Kartu memberikan cara untuk menampung sekelompok sekaligus memberikan gaya yang konsisten untuk container.

Menambahkan dependensi

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

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

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

Membuat kartu

Untuk menggunakan CardView, tambahkan ke file tata letak Anda. Gunakan sebagai kelompok tampilan untuk berisi tampilan lain. Pada contoh berikut, CardView berisi ImageView dan beberapa TextViews untuk menampilkan beberapa informasi kepada pengguna:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Cuplikan kode sebelumnya menghasilkan sesuatu yang mirip dengan berikut ini, dengan asumsi Anda menggunakan gambar logo Android yang sama:

Kartu dalam contoh ini digambar ke layar dengan elevasi default, yang menyebabkan sistem menggambar bayangan di bawahnya. Anda dapat memberikan elevasi khusus untuk kartu dengan atribut card_view:cardElevation. Kartu dengan nilai lebih tinggi elevasi memiliki bayangan yang lebih jelas, dan kartu pada elevasi yang lebih rendah memiliki bayangan yang lebih terang. CardView menggunakan elevasi nyata dan bayangan dinamis di Android 5.0 (level API 21) dan yang lebih tinggi.

Gunakan properti ini untuk menyesuaikan tampilan widget CardView:

• Untuk menetapkan radius sudut dalam tata letak Anda, gunakan 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.