Migrate Leanback sample app to Jetpack Compose

[pflammertsma]

This PR introduces a complete reference implementation showing how to migrate the legacy Leanback TV application to Jetpack Compose for TV (androidx.tv:tv-material).

It provides a side-by-side comparison (Before vs. After) of common TV UI patterns and resolves key TV-specific interaction challenges.

Key Changes

• Project Rename: Renamed the migrated project directory to LeanbackToCompose.
• Compose for TV Implementation: Replaced the legacy Leanback UI (Java/XML) with a modern declarative Compose UI (Kotlin) covering:
  • Onboarding Sequence
  • Catalog Browsing (Horizontal List Rows)
  • Immersive Details View & Video Player (Media3)
  • Vertical Grid Layout
  • In-app Search
  • Guided Step Wizard
  • Preference Settings
• Interaction & Focus Fixes:
  • Focus Traps: Introduced a custom TvTextField that intercepts D-pad ENTER keys and chains focus properly, resolving focus traps on the Authentication and Search screens.
  • Initial Focus: Fixed startup focus in the VerticalGrid and Error screens to ensure a composable element gains focus immediately on launch, preventing the GTV launcher from taking over navigation.
• Documentation & Showcase: Updated the project README.md with a detailed migration guide and a side-by-side showcase using updated 1080p screenshots comparing the legacy Leanback UI and the new TV Compose UI.

[gemini-code-assist]

Code Review

This pull request migrates the Android TV application from the legacy Leanback UI Toolkit to Jetpack Compose for TV, replacing Java/XML files with Kotlin Compose screens and components. The review feedback highlights critical Android TV and Compose-specific improvements: offloading database queries from the main thread in VideoRepository, supporting physical remotes by handling Key.DirectionCenter in TvTextField, optimizing D-pad scroll performance in VideoDetailsScreen using dispatchRawDelta, managing player listener lifecycles in PlaybackScreen to prevent leaks, avoiding focus requests in onGloballyPositioned in BrowseScreen, and ensuring immediate focus is requested on key input fields and settings items upon screen launch to deliver a seamless D-pad navigation experience.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

On Android TV, the D-pad Center button on physical remotes typically sends KeyEvent.KEYCODE_DPAD_CENTER (which maps to Key.DirectionCenter in Compose), whereas Key.Enter is usually sent by emulator keyboards or external keyboards.\n\nTo ensure that pressing the D-pad Center button on a physical remote triggers the IME action or focus change, you should include Key.DirectionCenter in the key interception logic, just as you did in PlaybackScreen.kt.

Suggested change

	Key.Enter, Key.NumPadEnter -> {
	Key.Enter, Key.NumPadEnter, Key.DirectionCenter -> {

[gemini-code-assist]

When a user holds down the D-pad Up or Down button, the system generates repeated KeyDown events at a high frequency (typically every 50ms).\n\nIn your current implementation, each key event launches a new coroutine and starts a smooth animateScrollTo animation. Because the animation takes longer than the key repeat interval, the previous animation is constantly cancelled and restarted. This leads to extremely janky, stuttering, or unresponsive scrolling.\n\nTo resolve this and achieve smooth, highly responsive scrolling under key repeat, you should use the non-suspending dispatchRawDelta API. This applies the scroll delta instantly without launching or cancelling coroutines.

                                Key.DirectionDown -> {
                                    scrollState.dispatchRawDelta(250f)
                                    true
                                }
                                Key.DirectionUp -> {
                                    scrollState.dispatchRawDelta(-250f)
                                    true
                                }

[gemini-code-assist]

Every time the video parameter changes, LaunchedEffect(video) re-runs and adds a new Media3Player.Listener to the exoPlayer instance without removing the previous one. This causes listeners to accumulate over time if the video changes, which can lead to unexpected behavior or memory leaks.\n\nInstead, you should manage the listener's lifecycle using a DisposableEffect keyed on exoPlayer to ensure only one listener is active and it is cleaned up when disposed.

    DisposableEffect(exoPlayer) {
        val listener = object : Media3Player.Listener {
            override fun onPlaybackStateChanged(playbackState: Int) {
                if (playbackState == Media3Player.STATE_ENDED) {
                    onFinish()
                }
            }
        }
        exoPlayer.addListener(listener)
        onDispose {
            exoPlayer.removeListener(listener)
        }
    }

    LaunchedEffect(video) {
        focusRequester.requestFocus()
        scheduleAutoHide()

        video.videoUrl?.let { url ->
            val mediaItem = MediaItem.fromUri(url)
            exoPlayer.setMediaItem(mediaItem)
            exoPlayer.prepare()
            exoPlayer.playWhenReady = true
        }
    }

[gemini-code-assist]

Requesting focus inside onGloballyPositioned is discouraged in Jetpack Compose because it can trigger focus changes during the layout pass, potentially leading to infinite layout loops or crashes. Additionally, the call to focusRequester.requestFocus() is duplicated on lines 249 and 250.\n\nA safer and more idiomatic approach is to request focus inside a LaunchedEffect once the data is loaded, similar to how it is done in VerticalGridScreen.kt.\n\nYou can add this LaunchedEffect at the top of BrowseScreen:\nkotlin\nLaunchedEffect(allVideos) {\n if (!allVideos.isNullOrEmpty()) {\n try {\n focusRequester.requestFocus()\n } catch (e: Exception) {\n // Ignore focus request failures before layout settles\n }\n }\n}\n

                                                    if (catIndex == 0 && vidIndex == 0) {
                                                        Modifier.focusRequester(focusRequester)
                                                    } else {
                                                        Modifier
                                                    }

[gemini-code-assist]

When the Search screen is opened, no element gains focus initially. On Android TV, it is a best practice to immediately focus the search input field so the user can start typing or trigger voice search right away.\n\nYou should add a LaunchedEffect to request focus on the search text field when the screen is launched.

    LaunchedEffect(Unit) {
        allVideos = VideoRepository.getVideos(context)
        try {
            textFieldFocusRequester.requestFocus()
        } catch (e: Exception) {
            // Ignore focus request failures before layout settles
        }
    }

[gemini-code-assist]

When the Authentication screen is opened, no element gains focus initially. On Android TV, it is a best practice to immediately focus the first input field (the username field) so the user can start typing right away.\n\nYou should add a LaunchedEffect to request focus on the username text field when the screen is launched. Note that you will need to import androidx.compose.runtime.LaunchedEffect in this file.

    LaunchedEffect(Unit) {
        try {
            usernameFocusRequester.requestFocus()
        } catch (e: Exception) {
            // Ignore focus request failures before layout settles
        }
    }

    TvLeanbackTheme {

[gemini-code-assist]

To ensure a smooth user experience on Android TV, the first setting item should gain focus immediately when the Settings screen is opened. You can define a FocusRequester and request focus on it using a LaunchedEffect. Note that you will need to import androidx.compose.runtime.LaunchedEffect and androidx.compose.ui.focus.FocusRequester in this file.

    var recommendationsEnabled by remember {
        mutableStateOf(prefs.getBoolean(recKey, true))
    }
    val firstItemFocusRequester = remember { FocusRequester() }

    LaunchedEffect(Unit) {
        try {
            firstItemFocusRequester.requestFocus()
        } catch (e: Exception) {
            // Ignore focus request failures before layout settles
        }
    }

[gemini-code-assist]

Attach the firstItemFocusRequester to the first ListItem to ensure it receives initial focus. Note that you will need to import androidx.compose.ui.focus.focusRequester in this file.

                    modifier = Modifier
                        .fillMaxWidth()
                        .focusRequester(firstItemFocusRequester)