Daftar imersif
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Daftar imersif adalah kombinasi dari baris konten & pratinjau
item yang dipilih. Fitur ini menampilkan konten dalam area pandang yang lebih besar.
Referensi
Sorotan
- Pratinjau konten dinamis. Saat pengguna menavigasi
melalui baris
konten, area pratinjau akan diperbarui secara otomatis untuk menampilkan
item yang difokuskan saat ini.
- Komponen daftar imersif menampilkan area pandang yang lebih besar untuk
menampilkan konten, sehingga memudahkan pengguna untuk melihat dan mengapresiasi
detail visual dari
item yang difokuskan.
- Daftar imersif memberikan informasi yang relevan dan kontekstual
tentang item yang difokuskan, membantu pengguna membuat keputusan yang tepat
meninggalkan pengalaman penjelajahan.
- Komponen daftar imersif menggunakan
pengungkapan progresif untuk mengungkapkan
detail selengkapnya tentang konten saat pengguna bernavigasi, yang mengurangi tingkat kognitif
memuat dan mempertahankan
engagement pengguna.
- Komponen daftar imersif memastikan interaksi yang konsisten di seluruh aplikasi,
memberikan pengalaman yang familier dan dapat diprediksi kepada pengguna.
Anatomi
- Latar belakang gambar
- Pemblokiran konten
- Kartu saat fokus
- {i>Content grid<i} (Kisi konten)
- Scrim sinematik
- Poster
- Warna latar belakang
Spesifikasi
Perilaku
Saat bernavigasi di antara kartu dalam daftar Imersif, detail
kartu yang dipilih ditampilkan secara bertahap di latar belakang.
Saat daftar imersif menjadi fokus, tingginya akan bertambah untuk menampilkan
informasi tambahan, seperti judul latar belakang dan
seperti yang terlihat dalam video berikut.
Penggunaan
Gunakan korsel yang imersif saat Anda ingin menarik perhatian ke iklan unggulan atau
konten yang dipromosikan, seperti rilis baru, acara populer, atau konten
judul. Area pandang yang lebih besar dan pratinjau dinamis memberikan gambaran yang menarik
untuk memamerkan item
prioritas tinggi ini.
Tampilan gambar
- Fokus kartu: Saat pengguna menavigasi carousel,
kartu yang difokuskan secara visual ditekankan, menskalakan kartu dengan 1,1, menggunakan {i>border<i},
dan isyarat visual lainnya sebagai ketinggian
untuk menunjukkan pilihannya. Memastikan konten
judul di dalam thumbnail kartu yang difokuskan sudah jelas
terlihat dan
lebih mudah dibaca.
- Gambar latar: Saat kartu berada dalam fokus, latar belakang yang sesuai
gambar ditampilkan dalam area pandang yang lebih besar. Kami merekomendasikan latar belakang ini
berkualitas tinggi dan menarik secara visual, karena memberikan
tampilan latar yang
menarik untuk konten.
Komposisi
check_circle
Anjuran
Skalakan dan selaraskan subjek ke sudut kanan atas untuk menciptakan pengalaman sinematik.
cancel
Larangan
Hindari pemangkasan layar penuh yang akan membuat subjek terpangkas di bawah konten.
Untuk memastikan gambar digunakan sebagai latar belakang dalam komponen daftar imersif
terlihat bagus, pastikan untuk menskalakan dengan tepat agar tidak buram
atau terdistorsi.
Rasio aspek
Gunakan rasio 16:9 untuk gambar latar bila memungkinkan guna memastikan
tata letak yang menarik secara visual
dan konsisten.
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,["# Immersive list is a combination of a row of content \\& preview of the\nselected item. It features content in a larger viewport.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Sample](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:tv/samples/src/main/java/androidx/tv/samples/ImmersiveListSamples.kt;drc=5920fece16ad6723107098f24a492a25937cd51a) | N/A |\n\nHighlights\n----------\n\n- Dynamic content preview. When a user navigates through the row of content, the preview area automatically update to display the current focused item.\n- The Immersive list component features a larger viewport for displaying content, making it easier for users to view and appreciate the visual details of the focused item.\n- Immersive lists provide relevant and contextual information about the focused item, helping users make informed decisions without leaving the browsing experience.\n- The Immersive list component uses progressive disclosure to reveal more details about the content as users navigate, reducing cognitive load and maintaining user engagement.\n- The Immersive list component ensures consistent interactions across the app, providing users with a familiar and predictable experience.\n\nAnatomy\n-------\n\n1. Image background\n2. Content block\n3. Card on focus\n4. Content grid\n\n1. Cinematic scrim\n2. Poster\n3. Background color\n\nSpecs\n-----\n\nBehavior\n--------\n\nWhen navigating between cards in the Immersive list, the details of the\nselected card are progressively revealed in the background. \n\nWhen the immersive list is in focus, its height increases to reveal\nadditional information, such as the background title and\ndescription, as shown in the following video.\n\nUsage\n-----\n\nUse immersive carousels when you want to draw attention to featured or\npromoted content, such as new releases, popular shows, or exclusive\ntitles. The larger viewport and dynamic preview provide a compelling\nway to showcase these high-priority items.\n\n### Image display\n\n1. **Card focus**: As the user navigates through the carousel, the focused card is visually emphasized, scaling the card by 1.1, using a border, and other visual cues as elevation to indicate its selection. Ensure content titles inside the thumbnail of the focused card are clearly visible and easier to read.\n2. **Background image**: When a card is in focus, a corresponding background image is displayed in the larger viewport. We recommend this background image is high-quality and visually appealing, as it provides an immersive and engaging backdrop for the content.\n\n### Composition\n\ncheck_circle\n\n### Do\n\nScale and align the subject to the top right corner creating a cinematic experience. \ncancel\n\n### Don't\n\nAvoid using full screen crop that will make crop the subject under the content.\n\nTo ensure the images used as backgrounds in the Immersive list component\nlook good, make sure to scale them appropriately so they are not blurry\nor distorted.\n\n### Aspect ratio\n\nUse a 16:9 ratio for background images whenever possible to ensure\na visually appealing and consistent layout."]]
