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.