Kartu

Komponen Card berisi konten dan tindakan tentang satu subjek.

Anatomi

Komponen kartu hanya memiliki satu slot. Kartu dapat berisi ikon, gambar, atau label yang dapat disesuaikan.

Secara default, kartu berbentuk persegi panjang dengan sudut membulat dan latar belakang gradasi. Setel tinggi maksimum kartu ke 60% untuk memastikan kartu ditampilkan sepenuhnya di layar karena layar melingkar dapat memotong hingga 20% bagian atas dan bawah layar.

Kartu Judul

Gunakan Kartu judul untuk menampilkan informasi dalam aplikasi, seperti pesan. Kartu judul memiliki tata letak tiga slot yang mencakup judul, kolom waktu opsional, dan konten yang relevan, yaitu gambar atau teks.

Kartu Aplikasi

Gunakan Kartu aplikasi untuk menampilkan elemen interaktif dari beberapa aplikasi. Kartu aplikasi memiliki tata letak lima slot yang mencakup ikon aplikasi, nama aplikasi, waktu aktivitas terjadi, Judul dari beberapa jenis dan konten relevan yang berupa gambar atau teks.

Rekomendasi desain

Kartu gambar

Kartu gambar menampilkan konten terkait satu topik dengan gambar latar belakang. Kartu gambar juga dapat menampilkan gambar mandiri.

TitleCard(
    onClick = { ... },
    title = { Text("Workout") },
    backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
        backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
    ),
    contentColor = MaterialTheme.colors.onSurface,
    titleColor = MaterialTheme.colors.onSurface
) {
    Text("12 songs · 1 Hour 32 mins")
}

Ukuran

Lebar kartu

Kartu ditetapkan secara default ke lebar maksimum penampung.

Tinggi kartu

Tinggi kartu fleksibel. Tinggi ditentukan oleh konten komponen.

Pada tampilan jam berbentuk lingkaran, kartu yang tingginya lebih dari 60% dari tinggi layar akan terpotong.