Immersive Liste
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die immersive Liste besteht aus einer Reihe von Inhalten und Vorschau der
ausgewähltes Element. Es zeigt Inhalte in einem größeren Darstellungsbereich.
Ressourcen
Highlights
- Vorschau des dynamischen Inhalts. Wenn Nutzende durch die Reihe
Inhalt wird der Vorschaubereich automatisch aktualisiert und zeigt
Element im Fokus.
- Die Komponente „Immersive Listen“ bietet einen größeren Darstellungsbereich für
sodass Nutzer Inhalte einfacher sehen und schätzen können.
die visuellen Details
des fokussierten Elements.
- Immersive Listen enthalten relevante und kontextbezogene Informationen
über das fokussierte Element, sodass Nutzende fundierte Entscheidungen treffen können,
die Browsernutzung verlassen.
- Bei der Komponente „Immersive List“ wird durch eine progressive Offenlegung Folgendes angezeigt:
mehr Details zu den Inhalten, während die Nutzer navigieren, und reduziert so ihre kognitiven Fähigkeiten
und die Aufrechterhaltung des Nutzer-Engagements.
- Die Komponente „Immersive Listen“ sorgt für einheitliche
Interaktionen in der gesamten App,
um Nutzenden eine vertraute und vorhersehbare Erfahrung zu bieten.
Anatomie
- Bildhintergrund
- Inhaltsblock
- Karte im Fokus
- Inhaltsraster
- Filmeffekt
- Poster
- Hintergrundfarbe
Technische Daten
Verhalten
Wenn Sie zwischen Karten in der immersiven Liste wechseln, werden die Details der
werden nach und nach im Hintergrund eingeblendet.
Wenn die immersive Liste im Fokus ist, wird sie erhöht
zusätzliche Informationen wie den Hintergrundtitel und
eine Beschreibung, wie im folgenden Video gezeigt.
Nutzung
Verwenden Sie immersive Karussells, wenn Sie die Aufmerksamkeit auf vorgestellte oder
beworbene Inhalte wie Neuveröffentlichungen, beliebte Shows oder exklusive Inhalte
Titel. Der größere Darstellungsbereich und die dynamische Vorschau bieten einen
wichtige Elemente zu präsentieren.
Bildanzeige
- Kartenfokus: Während der Nutzer durch das Karussell navigiert,
fokussierte Karte wird visuell hervorgehoben, indem sie mithilfe eines Rahmens um 1,1 skaliert wird.
und andere visuelle Hinweise wie Elevation, um die Auswahl zu verdeutlichen. Inhalte sicherstellen
der Titel innerhalb der Miniaturansicht der Karte
gut sichtbar und leichter lesbar sind.
- Hintergrundbild: Wenn eine Karte im Fokus ist, wird ein entsprechender Hintergrund
wird im größeren Darstellungsbereich angezeigt. Wir empfehlen diesen Hintergrund
von hoher Qualität und visuell ansprechend ist,
einen ansprechenden Hintergrund für die Inhalte.
Komposition
check_circle
Dos
Das Motiv lässt sich skalieren und oben rechts ausrichten, um ein Kinoerlebnis zu erzeugen.
cancel
Don'ts
Vermeide es, das Motiv im Vollbildmodus zuzuschneiden, damit es unter dem Inhalt zugeschnitten wird.
Um sicherzustellen, dass die Bilder, die als Hintergründe in der Komponente „Immersive List“ verwendet werden,
gut aussehen, achten Sie darauf, sie entsprechend zu skalieren, damit sie nicht verschwommen sind.
verzerrt sein.
Seitenverhältnis
Verwenden Sie für Hintergrundbilder möglichst ein Seitenverhältnis von 16:9, damit
ein optisch ansprechendes und einheitliches Layout.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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."]]
