But migrating a production TV app isn\u2019t as simple as replacing a BrowseSupportFragment. You need a strategy.<\/p>\n
This post is a real-world migration guide \u2014 not just code snippets.<\/p>\n
\ud83d\ude80 Migration Philosophy<\/strong><\/h1>\nInstead of rewriting everything at once, think bottom-up + modular:<\/p>\n
\n- Extract a design system \u2192 one source of truth for colors, typography, dimensions.<\/li>\n
- Replace leaf components first \u2192 cards, buttons, headers.<\/li>\n
- Introduce Compose inside Leanback (hybrid approach).<\/li>\n
- Migrate screens one by one \u2192 Browse \u2192 Details \u2192 Search \u2192 Player.<\/li>\n
- Switch navigation layer last \u2192 Fragments \u2192 Navigation-Compose.<\/li>\n<\/ul>\n
\ud83c\udfa8 Theming \u2013 From XML to Composable<\/h1>\n
Leanback theming is XML-driven:<\/p>\n
@style\/BrowseTitleView
\n@style\/RowHeader
\n“> ” width=”300″ height=”78″ data-mce-src=”https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/Screenshot-from-2025-09-09-16-34-58-300×78.png”>xml themeThis worked, but it was rigid.<\/p>\n
In Compose-TV, theming is Kotlin-driven:<\/p>\n
![\"@Composablefun](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/Screenshot-from-2025-09-09-16-41-41-300x289.png\")
compose theme<\/p><\/div>\n
\u2705 You now control theme per screen or per component, not just app-wide.
\n\u2705 Easy to experiment with focus states and high-contrast accessibility themes.<\/p>\n
\ud83e\udde9 Modular Migration Strategy<\/strong><\/h1>\nLet\u2019s say your current structure looks like this:<\/p>\n
:app<\/strong>
\n\u251c\u2500\u2500 ui (Leanback fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 data<\/strong>
\n\u251c\u2500\u2500 domain<\/strong><\/p>\nYou want to evolve into:<\/p>\n
:app<\/strong>
\n\u251c\u2500\u2500 ui-leanback (legacy fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 ui-compose (new Compose screens)<\/strong>
\n\u251c\u2500\u2500 design-system (colors, typography, dimensions)<\/strong>
\n\u251c\u2500\u2500 domain<\/strong>
\n\u2514\u2500\u2500 data<\/strong><\/p>\n\n- design-system \u2192 A pure Kotlin module containing ColorPalette, Typography, spacing constants. Both XML and Compose can consume this.<\/li>\n
- ui-compose \u2192 All new TV screens in Compose.<\/li>\n
- ui-leanback \u2192 Old Leanback screens until migration is done.<\/li>\n<\/ul>\n
This way, you can:<\/p>\n
\n- Ship hybrid builds (Compose + Leanback) in production.<\/li>\n
- Roll out Compose screens gradually (safe migration).<\/li>\n<\/ol>\n
\ud83c\udfac Screen Migration Example<\/strong><\/h1>\nLeanback BrowseSupportFragment<\/p>\n
![\"class](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/Screenshot-from-2025-09-09-16-46-22-300x150.png\" "\"Movies\"")
Leanback BrowseSupportFragment<\/p><\/div>\n
Compose Equivalent<\/p>\n
![\"@Composablefun](\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/Screenshot-from-2025-09-09-16-47-56-212x300.png\")
compose example<\/p><\/div>\n
\ud83c\udfaf Difference:<\/h3>\n\n- No presenters.<\/li>\n
- No fragment boilerplate.<\/li>\n
- Full control over focus UI.<\/li>\n<\/ol>\n
\ud83c\udfae Focus and Remote Navigation<\/strong><\/h1>\nLeanback managed focus magically, but often in a rigid way.<\/p>\n
In Compose-TV:<\/p>\n
\n- Use Modifier.focusable() for all interactive elements.<\/li>\n
- Group elements with FocusGroup for better navigation.<\/li>\n
- Use onPreviewKeyEvent for custom DPAD overrides (e.g., skip sections).<\/li>\n<\/ul>\n
Modifier.onPreviewKeyEvent { keyEvent -><\/strong><\/em>
\n\u00a0 \u00a0 if (keyEvent.key == Key.DirectionDown) {<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Handle custom navigation<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 true<\/strong><\/em>
\n\u00a0 \u00a0 } else false<\/strong><\/em>
\n}<\/strong><\/em><\/p>\n\ud83d\udcca Performance Considerations<\/h1>\n
Leanback was optimized for large rows. In Compose:<\/p>\n
Use LazyRow \/ LazyColumn for virtualization.
\nCombine with Paging 3 for infinite scrolling:<\/p>\n
val movies = pager.collectAsLazyPagingItems()<\/strong><\/em><\/p>\nLazyRow {<\/strong><\/em>
\n\u00a0 \u00a0 items(movies.itemCount) { index -><\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 movies[index]?.let { MovieCard(it) }<\/strong><\/em>
\n\u00a0 \u00a0 }<\/strong><\/em>
\n}<\/strong><\/em><\/p>\nTest on real devices: Emulator doesn\u2019t always reflect true DPAD latency.<\/p>\n
\ud83e\uddea Pitfalls & Lessons Learned<\/strong><\/h1>\n\n- Theme clashes: If Leanback fragments still use XML themes, ensure Compose surfaces are wrapped in TvAppTheme.<\/li>\n
- Focus loops: Compose focus isn\u2019t 1:1 with Leanback; test \u201cedge cases\u201d like end-of-row navigation.<\/li>\n
- Hybrid apps: Don\u2019t try to rewrite everything at once. A ComposeView inside Leanback is your friend during transition.<\/li>\n<\/ul>\n
\u2705 Migration Checklist<\/strong><\/h1>\n\n- Extract theme + design system into shared module.<\/li>\n
- Migrate leaf components (cards, buttons).<\/li>\n
- Start hybrid: Use ComposeView inside Leanback.<\/li>\n
- Replace rows\/fragments screen by screen.<\/li>\n
- Switch navigation to Compose last.<\/li>\n
- Remove Leanback dependency.<\/li>\n<\/ul>\n
Conclusion<\/strong><\/h1>\nMigrating an Android TV app from Leanback to Jetpack Compose is not just a UI migration. It\u2019s a re-architecture:<\/p>\n
\n- From XML themes \u2192 to Composable theming.<\/li>\n
- From fragment-heavy code \u2192 to state-driven navigation.<\/li>\n
- From rigid templates \u2192 to flexible layouts.<\/li>\n
- Do it gradually, starting from lower modules and shared design system. By the end, you\u2019ll have a cleaner, modern, and scalable<\/li>\n
- TV app that\u2019s easier to maintain and future-proof.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
When Google introduced Leanback, it solved a hard problem: building focusable, remote-friendly UIs for Android TV. But Leanback was built on Fragments, Presenters, and XML themes \u2014 patterns that don\u2019t scale well in 2025. With Jetpack Compose for TV, we finally get: A declarative focus model. Composable theming instead of XML overrides. Reusable UI that […]<\/p>\n","protected":false},"author":2127,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":49},"categories":[518],"tags":[4845,5538,8139,8138,3115,1703],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2127"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=76164"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions"}],"predecessor-version":[{"id":76708,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions\/76708"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=76164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=76164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=76164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\ud83c\udfa8 Theming \u2013 From XML to Composable<\/h1>\n
Leanback theming is XML-driven:<\/p>\n
@style\/BrowseTitleView
\n@style\/RowHeader
\n“> ” width=”300″ height=”78″ data-mce-src=”https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2025\/09\/Screenshot-from-2025-09-09-16-34-58-300×78.png”>xml themeThis worked, but it was rigid.<\/p>\n
In Compose-TV, theming is Kotlin-driven:<\/p>\n
compose theme<\/p><\/div>\n
\u2705 You now control theme per screen or per component, not just app-wide.
\n\u2705 Easy to experiment with focus states and high-contrast accessibility themes.<\/p>\n
\ud83e\udde9 Modular Migration Strategy<\/strong><\/h1>\nLet\u2019s say your current structure looks like this:<\/p>\n
:app<\/strong>
\n\u251c\u2500\u2500 ui (Leanback fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 data<\/strong>
\n\u251c\u2500\u2500 domain<\/strong><\/p>\nYou want to evolve into:<\/p>\n
:app<\/strong>
\n\u251c\u2500\u2500 ui-leanback (legacy fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 ui-compose (new Compose screens)<\/strong>
\n\u251c\u2500\u2500 design-system (colors, typography, dimensions)<\/strong>
\n\u251c\u2500\u2500 domain<\/strong>
\n\u2514\u2500\u2500 data<\/strong><\/p>\n\n- design-system \u2192 A pure Kotlin module containing ColorPalette, Typography, spacing constants. Both XML and Compose can consume this.<\/li>\n
- ui-compose \u2192 All new TV screens in Compose.<\/li>\n
- ui-leanback \u2192 Old Leanback screens until migration is done.<\/li>\n<\/ul>\n
This way, you can:<\/p>\n
\n- Ship hybrid builds (Compose + Leanback) in production.<\/li>\n
- Roll out Compose screens gradually (safe migration).<\/li>\n<\/ol>\n
\ud83c\udfac Screen Migration Example<\/strong><\/h1>\nLeanback BrowseSupportFragment<\/p>\n
Leanback BrowseSupportFragment<\/p><\/div>\n
Compose Equivalent<\/p>\n
compose example<\/p><\/div>\n
\ud83c\udfaf Difference:<\/h3>\n\n- No presenters.<\/li>\n
- No fragment boilerplate.<\/li>\n
- Full control over focus UI.<\/li>\n<\/ol>\n
\ud83c\udfae Focus and Remote Navigation<\/strong><\/h1>\nLeanback managed focus magically, but often in a rigid way.<\/p>\n
In Compose-TV:<\/p>\n
\n- Use Modifier.focusable() for all interactive elements.<\/li>\n
- Group elements with FocusGroup for better navigation.<\/li>\n
- Use onPreviewKeyEvent for custom DPAD overrides (e.g., skip sections).<\/li>\n<\/ul>\n
Modifier.onPreviewKeyEvent { keyEvent -><\/strong><\/em>
\n\u00a0 \u00a0 if (keyEvent.key == Key.DirectionDown) {<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Handle custom navigation<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 true<\/strong><\/em>
\n\u00a0 \u00a0 } else false<\/strong><\/em>
\n}<\/strong><\/em><\/p>\n\ud83d\udcca Performance Considerations<\/h1>\n
Leanback was optimized for large rows. In Compose:<\/p>\n
Use LazyRow \/ LazyColumn for virtualization.
\nCombine with Paging 3 for infinite scrolling:<\/p>\n
val movies = pager.collectAsLazyPagingItems()<\/strong><\/em><\/p>\nLazyRow {<\/strong><\/em>
\n\u00a0 \u00a0 items(movies.itemCount) { index -><\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 movies[index]?.let { MovieCard(it) }<\/strong><\/em>
\n\u00a0 \u00a0 }<\/strong><\/em>
\n}<\/strong><\/em><\/p>\nTest on real devices: Emulator doesn\u2019t always reflect true DPAD latency.<\/p>\n
\ud83e\uddea Pitfalls & Lessons Learned<\/strong><\/h1>\n\n- Theme clashes: If Leanback fragments still use XML themes, ensure Compose surfaces are wrapped in TvAppTheme.<\/li>\n
- Focus loops: Compose focus isn\u2019t 1:1 with Leanback; test \u201cedge cases\u201d like end-of-row navigation.<\/li>\n
- Hybrid apps: Don\u2019t try to rewrite everything at once. A ComposeView inside Leanback is your friend during transition.<\/li>\n<\/ul>\n
\u2705 Migration Checklist<\/strong><\/h1>\n\n- Extract theme + design system into shared module.<\/li>\n
- Migrate leaf components (cards, buttons).<\/li>\n
- Start hybrid: Use ComposeView inside Leanback.<\/li>\n
- Replace rows\/fragments screen by screen.<\/li>\n
- Switch navigation to Compose last.<\/li>\n
- Remove Leanback dependency.<\/li>\n<\/ul>\n
Conclusion<\/strong><\/h1>\nMigrating an Android TV app from Leanback to Jetpack Compose is not just a UI migration. It\u2019s a re-architecture:<\/p>\n
\n- From XML themes \u2192 to Composable theming.<\/li>\n
- From fragment-heavy code \u2192 to state-driven navigation.<\/li>\n
- From rigid templates \u2192 to flexible layouts.<\/li>\n
- Do it gradually, starting from lower modules and shared design system. By the end, you\u2019ll have a cleaner, modern, and scalable<\/li>\n
- TV app that\u2019s easier to maintain and future-proof.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
When Google introduced Leanback, it solved a hard problem: building focusable, remote-friendly UIs for Android TV. But Leanback was built on Fragments, Presenters, and XML themes \u2014 patterns that don\u2019t scale well in 2025. With Jetpack Compose for TV, we finally get: A declarative focus model. Composable theming instead of XML overrides. Reusable UI that […]<\/p>\n","protected":false},"author":2127,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":49},"categories":[518],"tags":[4845,5538,8139,8138,3115,1703],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2127"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=76164"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions"}],"predecessor-version":[{"id":76708,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions\/76708"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=76164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=76164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=76164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u251c\u2500\u2500 ui (Leanback fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 data<\/strong>
\n\u251c\u2500\u2500 domain<\/strong><\/p>\n
You want to evolve into:<\/p>\n
:app<\/strong> This way, you can:<\/p>\n Leanback BrowseSupportFragment<\/p>\n Leanback BrowseSupportFragment<\/p><\/div>\n Compose Equivalent<\/p>\n compose example<\/p><\/div>\n Leanback managed focus magically, but often in a rigid way.<\/p>\n In Compose-TV:<\/p>\n Modifier.onPreviewKeyEvent { keyEvent -><\/strong><\/em> Leanback was optimized for large rows. In Compose:<\/p>\n Use LazyRow \/ LazyColumn for virtualization. val movies = pager.collectAsLazyPagingItems()<\/strong><\/em><\/p>\n LazyRow {<\/strong><\/em> Test on real devices: Emulator doesn\u2019t always reflect true DPAD latency.<\/p>\n Migrating an Android TV app from Leanback to Jetpack Compose is not just a UI migration. It\u2019s a re-architecture:<\/p>\n When Google introduced Leanback, it solved a hard problem: building focusable, remote-friendly UIs for Android TV. But Leanback was built on Fragments, Presenters, and XML themes \u2014 patterns that don\u2019t scale well in 2025. With Jetpack Compose for TV, we finally get: A declarative focus model. Composable theming instead of XML overrides. Reusable UI that […]<\/p>\n","protected":false},"author":2127,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":49},"categories":[518],"tags":[4845,5538,8139,8138,3115,1703],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/2127"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=76164"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions"}],"predecessor-version":[{"id":76708,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/76164\/revisions\/76708"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=76164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=76164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=76164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u251c\u2500\u2500 ui-leanback (legacy fragments, presenters)<\/strong>
\n\u251c\u2500\u2500 ui-compose (new Compose screens)<\/strong>
\n\u251c\u2500\u2500 design-system (colors, typography, dimensions)<\/strong>
\n\u251c\u2500\u2500 domain<\/strong>
\n\u2514\u2500\u2500 data<\/strong><\/p>\n\n
\n
\ud83c\udfac Screen Migration Example<\/strong><\/h1>\n
\ud83c\udfaf Difference:<\/h3>\n
\n
\ud83c\udfae Focus and Remote Navigation<\/strong><\/h1>\n
\n
\n\u00a0 \u00a0 if (keyEvent.key == Key.DirectionDown) {<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Handle custom navigation<\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 true<\/strong><\/em>
\n\u00a0 \u00a0 } else false<\/strong><\/em>
\n}<\/strong><\/em><\/p>\n\ud83d\udcca Performance Considerations<\/h1>\n
\nCombine with Paging 3 for infinite scrolling:<\/p>\n
\n\u00a0 \u00a0 items(movies.itemCount) { index -><\/strong><\/em>
\n\u00a0 \u00a0 \u00a0 \u00a0 movies[index]?.let { MovieCard(it) }<\/strong><\/em>
\n\u00a0 \u00a0 }<\/strong><\/em>
\n}<\/strong><\/em><\/p>\n\ud83e\uddea Pitfalls & Lessons Learned<\/strong><\/h1>\n
\n
\u2705 Migration Checklist<\/strong><\/h1>\n
\n
Conclusion<\/strong><\/h1>\n
\n