leanback-to-compose-tv-migration

The 10-foot UI

A "10-foot UI" is a design paradigm for televisions that tailors an interface for viewing from approximately 3 meters (10 feet) away. When designing for this experience, account for these key characteristics:

• Viewing distance: Viewers are sitting far from the screen, "leaning back". Screen layouts are uncluttered, with text and UI elements that are large enough to be comfortably readable from a distance, without dense blocks of text.
• Color contrast: To avoid washed out colors on TV displays with low contrast ratios, the design uses high-contrast palettes and distinct visual indicators so focused states remain visible across different TV panels.
• D-pad navigation : Interaction relies on a directional remote control with limited 4-way navigation (Up, Down, Left, Right) with components organized into clear spatial grids and carousels without focus traps.

Core architecture and library selection

When migrating an Android TV application to Jetpack Compose, you must use androidx.tv libraries and follow these 10-foot UI patterns:

• UI modernization: Focus on custom, cinematic layouts over legacy direct 1:1 templates. You must use Jetpack Compose for TV features like dynamic gradient hero backdrops, custom focus animations, custom navigation drawers, and custom layouts.
• Primary design system : You must always use androidx.tv.material3.* (androidx.tv:tv-material) over mobile androidx.compose.material3.*. TV Material 3 provides built-in D-Pad focus handling, focus zoom scaling, and TV-optimized typography and shapes. To set up Compose for TV dependencies, follow Compose for TV setup.
• Focus zoom animation : For interactive cards, you must use CompactCard, ClassicCard, or WideCardContainer with scale = CardDefaults.scale(focusedScale = 1.1f) to provide standard TV focus animation.
• Coil image loading : To use declarative AsyncImage(model, contentDescription, ...) without passing an explicit ImageLoader parameter, you must include io.coil-kt:coil-compose in your Gradle dependencies.
• Explicit imports : You must always import TV Material 3 classes explicitly (for example, import androidx.tv.material3.Surface, import androidx.tv.material3.ListItem) instead of using wildcard imports (import androidx.tv.material3.*).
• File naming conventions : You must name Composable screen files after the screen (for example, name BrowseScreen as BrowseScreen.kt, PlaybackScreen as PlaybackScreen.kt, and AuthenticationScreen as AuthenticationScreen.kt). Don't use generic prefixes like Main.
• Overscan and bezels : You must apply horizontal padding (for example, horizontal = 48.dp or 32.dp, vertical = 24.dp) to root containers, carousels, and top bars to prevent clipping.
• Reading width constrainment : You must constrain reading width using Modifier.widthIn(max = 600.dp) on text columns for long-form text.
• Media3 Compose dependencies : Include androidx.media3:media3-ui-compose in app/build.gradle when modernizing media playback screens.
• Prohibition of legacy AndroidView wrappers : Don't use legacy AndroidView wrappers to embed View-based components into Jetpack Compose screens. All migrated screens must use Compose components or Media3 Compose surfaces (PlayerSurface).