Immersive list
Stay organized with collections
Save and categorize content based on your preferences.
Immersive list is a combination of a row of content & preview of the
selected item. It features content in a larger viewport.
Resources
Highlights
- Dynamic content preview. When a user navigates through the row of
content, the preview area automatically update to display the
current focused item.
- 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.
- Immersive lists provide relevant and contextual information
about the focused item, helping users make informed decisions without
leaving the browsing experience.
- The Immersive list component uses progressive disclosure to reveal
more details about the content as users navigate, reducing cognitive
load and maintaining user engagement.
- The Immersive list component ensures consistent interactions across the app,
providing users with a familiar and predictable experience.
Anatomy
- Image background
- Content block
- Card on focus
- Content grid
- Cinematic scrim
- Poster
- Background color
Specs
Behavior
When navigating between cards in the Immersive list, the details of the
selected card are progressively revealed in the background.
When the immersive list is in focus, its height increases to reveal
additional information, such as the background title and
description, as shown in the following video.
Usage
Use immersive carousels when you want to draw attention to featured or
promoted content, such as new releases, popular shows, or exclusive
titles. The larger viewport and dynamic preview provide a compelling
way to showcase these high-priority items.
Image display
- 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.
- 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.
Composition
check_circle
Do
Scale and align the subject to the top right corner creating a cinematic experience.
cancel
Don't
Avoid using full screen crop that will make crop the subject under the content.
To ensure the images used as backgrounds in the Immersive list component
look good, make sure to scale them appropriately so they are not blurry
or distorted.
Aspect ratio
Use a 16:9 ratio for background images whenever possible to ensure
a visually appealing and consistent layout.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2024-08-19 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2024-08-19 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."]]
