Leanback To Compose Tv Migration
Provides instructions and architectural patterns for migrating Android TV applications...
Install
npx skills add android/skills --skill leanback-to-compose-tv-migration -g -a claude-code -y- Repository
- android/skills10.2k
- Category
- Design
- Updated
- 6d ago
- License
- Complete terms in LICENSE.txt
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Provides instructions and architectural patterns for migrating Android TV applications from legacy Leanback UI Toolkit, Android Views, or Support Fragments to Jetpack Compose for TV (androidx.tv). Use this skill for Leanback to Compose migrations, including browse screen, settings screen, authentication screen, login screen, or video playback screen migrations, or when replacing BrowseSupportFragment, LeanbackSettingsFragment, PreferenceFragment, BaseLeanbackPreferenceFragmentCompat, VideoSupportFragment, GuidedStepSupportFragment, SearchSupportFragment, VerticalGridSupportFragment, Presenter, ArrayObjectAdapter, or CursorMapper with modern Compose equivalents, implementing immersive carousels with focus memory, Media3 video playback with PlayerSurface, or custom 10-foot hero layouts.
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:
