Kartu
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Kartu adalah elemen penyusun dasar aplikasi TV Anda.
Referensi
Sorotan
- Menggunakan kartu untuk menampilkan konten tentang satu topik.
- Kartu dapat menyimpan apa pun mulai dari gambar hingga judul,
teks, tombol, daftar, dan elemen UI lainnya.
- Kartu tidak dapat digabungkan dengan kartu lain atau dibagi menjadi beberapa kartu.
- Ada enam variasi kartu: standar, klasik, ringkas,
inset, standar lebar, dan klasik lebar.
Varian
Ada lima jenis kartu, masing-masing dengan kasus penggunaan yang berbeda:
- Standar
- Klasik
- Rapat
- Standar lebar
- Klasik lebar
Pemblokiran konten
Konten kartu disusun dalam blok yang berbeda. Desain visual kartu termasuk
penekanan menunjukkan hierarki. Tata letak kartu itu sendiri mengakomodasi
jenis konten yang ada di kartu.
Anatomi
- Judul
- Subjudul
- Deskripsi
- Teks tambahan
Spesifikasi
Kartu standar
Anatomi
- Gambar
- Pemblokiran konten
Status
Spesifikasi
Kartu klasik
Anatomi
- Gambar
- Pemblokiran konten
Status
Spesifikasi
Kartu ringkas
Anatomi
- Gambar
- Pemblokiran konten
Status
Spesifikasi
Kartu standar lebar
Anatomi
- Gambar
- Pemblokiran konten
Status
Spesifikasi
Kartu klasik lebar
Anatomi
- Gambar
- Pemblokiran konten
Status
Spesifikasi
Penggunaan
Kartu adalah elemen desain serbaguna yang dapat digunakan untuk menampilkan berbagai
konten dengan cara yang menarik secara visual dan mudah digunakan. Bagian berikut
menjelaskan pertimbangan desain untuk kartu.
Rasio aspek
Ada tiga rasio aspek yang umum untuk kartu: 16:9, 1:1, dan 2:3.
Setiap rasio aspek memiliki keunggulannya masing-masing, jadi pilihan terbaik untuk
Anda bergantung pada kebutuhan spesifik Anda.
- 16:9 adalah rasio aspek yang paling umum untuk kartu. Rasio aspek lebar ini
sangat cocok untuk menampilkan gambar dan video.
- 1:1 adalah rasio aspek persegi. Ini adalah pilihan tepat untuk kartu yang
harus seimbang secara visual, seperti pemeran dan kru, logo channel, atau logo tim.
- 2:3 adalah rasio aspek yang lebih tinggi. Ini adalah pilihan yang baik jika Anda ingin
memecah {i>grid<i} dan memberikan lebih banyak penekanan.
Pada akhirnya, cara terbaik untuk memilih rasio aspek untuk kartu Anda adalah bereksperimen dengan berbagai opsi dan melihat mana yang paling menarik.
Berikut beberapa contoh penggunaan berbagai rasio aspek
1:1
Pemeran dan kru
Logo tim olahraga
2:3
Buku trending
16:9
Kartu film
Tata letak dan spasi
Memvariasikan lebar kartu berdasarkan jumlah kartu yang terlihat di layar
dapat dicapai dengan menerapkan memuncak yang tepat dengan spasi 20 dp.
Tata letak 1 kartu
Lebar kartu — 844 dp
Tata letak 2 kartu
Lebar kartu — 412 dp
Tata letak 3 kartu
Lebar kartu — 268 dp
Tata letak 4 kartu
Lebar kartu — 196 dp
Tata letak 5 kartu
Lebar kartu — 124 dp
Pemblokiran konten
Lebar blok konten dalam kartu harus sama dengan lebar thumbnail
gambar. Jika Anda perlu menampilkan lebih banyak teks di blok konten,
gunakan variasi kartu lebar.
check_circle
Anjuran
Gunakan kartu lebar untuk menampilkan deskripsi singkat, tetapi hanya jika benar-benar diperlukan. Panjang deskripsi sebaiknya hanya beberapa kata.
cancel
Larangan
Hindari deskripsi panjang pada kartu yang ditumpuk secara vertikal.
Kartu ringkas
Kartu ringkas harus ringkas dan lebih mudah dibaca. Konten sebelum
gambar latar harus singkat dan langsung mengenai intinya. Hindari judul, {i>subtitle<i},
atau deskripsi yang panjang. Ini membuat {i>card <i}Anda lebih menarik
secara visual dan lebih mudah untuk dipindai.
Agar teks lebih mudah dibaca pada gambar, tambahkan overlay gradien hitam semi-transparan. Ini akan menggelapkan latar belakang tanpa terlalu mengaburkan
gambar, membuat teks lebih mudah dilihat.
check_circle
Anjuran
Kartu ringkas yang menggunakan scrim di atas latar belakang gambar.
cancel
Larangan
Jangan gunakan kartu ringkas tanpa scrim di atas gambar latar.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Cards are the basic building blocks of your TV app. \n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose](/reference/kotlin/androidx/tv/material3/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,androidx.tv.material3.CardShape,androidx.tv.material3.CardColors,androidx.tv.material3.CardScale,androidx.tv.material3.CardBorder,androidx.tv.material3.CardGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) | Available |\n\nHighlights\n----------\n\n- Use a card to display content on a single topic.\n- A card can hold anything from images to headlines, supporting text, buttons, lists, and other UI elements.\n- A card cannot merge with another card or divide into multiple cards.\n- There are six variations of cards: standard, classic, compact, inset, wide standard, and wide classic.\n\nVariants\n--------\n\nThere are five types of cards, each with a different use case:\n\n1. Standard\n2. Classic\n3. Compact\n4. Wide standard\n5. Wide classic\n\nContent blocks\n--------------\n\nA card's contents are arranged in distinct blocks. The card visual design\nincluding emphasis denotes hierarchy. The layout of the cards themselves\naccommodates the types of content the cards contain.\n\n### Anatomy\n\n1. Title\n2. Subtitle\n3. Description\n4. Extra text\n\n### Specs\n\nStandard card\n-------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nClassic card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nCompact card\n------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide standard card\n------------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nWide classic card\n-----------------\n\n### Anatomy\n\n1. Image\n2. Content block\n\n### States\n\n### Specs\n\nUsage\n-----\n\nCards are versatile design elements that can be used to display a variety\nof content in a visually appealing and user-friendly way. The following\nsections explore design considerations for cards.\n\n### Aspect ratio\n\nThere are three common aspect ratios for cards: 16:9, 1:1, and 2:3.\nEach aspect ratio has its strengths, so the best choice for\nyou depends on your specific needs.\n\n- 16:9 is the most common aspect ratio for cards. It is a wide aspect ratio that is well-suited for displaying images and videos.\n- 1:1 is a square aspect ratio. It is a good choice for cards that need to be visually balanced, such as cast and crew, channel logos, or team logos.\n- 2:3 is a taller aspect ratio. It is a good choice if you want to break up the grid and bring more emphasis.\n\nUltimately, the best way to choose an aspect ratio for your cards is to\nexperiment with different options and see what looks best.\n\nHere are some examples usages of different aspect ratios \n\n### 1:1\n\nCast and crew \n\nSports teams logos\n\n### 2:3\n\nTrending books\n\n### 16:9\n\nMovie cards\n\n### Layout and spacing\n\nVarying card widths based on the number of cards visible on the screen\ncan be achieved by implementing proper peaking with a spacing of 20dp. \n\n### 1-card layout\n\nWidth of the card --- 844dp\n\n### 2-card layout\n\nWidth of the card --- 412dp\n\n### 3-card layout\n\nWidth of the card --- 268dp\n\n### 4-card layout\n\nWidth of the card --- 196dp\n\n### 5-card layout\n\nWidth of the card --- 124dp\n\n### Content block\n\nThe width of the content block in a card should be the same width as the image\nthumbnail. If you need to display more text in the content block,\nuse a wide card variation. \ncheck_circle\n\n### Do\n\nUse wide cards to show short descriptions, but only if absolutely necessary. The length of the description should be only a few words. \ncancel\n\n### Don't\n\nAvoid long descriptions on vertically stacked cards.\n\n### Compact card\n\nCompact cards should be concise and easier to read. The content preceding the\nbackground image should be brief and to the point. Avoid long titles,\nsubtitles, or descriptions. This makes your cards more\nvisually appealing and easier to scan.\n\nTo make text more readable on an image, add a semi-transparent black\ngradient overlay. This darkens the background without obscuring\nthe image too much, making the text easier to see. \ncheck_circle\n\n### Do\n\nCompact card using scrim on top of image background. \ncancel\n\n### Don't\n\nDon't use compact cards without scrim on top of the background image."]]
