Android TV Compose: Building TV-Optimized UIs with Focus Management

#android #kotlin #compose #tutorial

Android TV development requires a different approach to UI than phones. Compose provides excellent tools for creating TV-optimized interfaces.

TvLazyRow for Horizontal Scrolling

The TvLazyRow composable is perfect for TV screens where horizontal scrolling is the primary navigation pattern:

@Composable
fun TVShowGrid() {
    TvLazyRow(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        items(20) { index ->
            TvCard(
                modifier = Modifier
                    .width(200.dp)
                    .height(300.dp)
                    .padding(8.dp),
                onClick = { /* Navigate */ }
            ) {
                Text("Show ${index + 1}")
            }
        }
    }
}

Focus Management with D-pad Navigation

Proper focus handling is critical for TV remotes:

val focusRequester = remember { FocusRequester() }
Button(
    modifier = Modifier
        .focusRequester(focusRequester)
        .focusable()
        .onKeyEvent { event ->
            when (event.key) {
                Key.DirectionRight -> { /* Navigate right */ }
                Key.DirectionLeft -> { /* Navigate left */ }
                Key.Enter -> { /* Select */ }
            }
            false
        }
) {
    Text("Select")
}

LaunchedEffect(Unit) {
    focusRequester.requestFocus()
}

Custom Focus Navigation

For advanced TV UX, implement custom focus navigation between screens and content:

@Composable
fun TVMenuScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .navmodeExclusive()
    ) {
        TvLazyRow {
            items(categories.size) { idx ->
                CategoryCard(categories[idx])
            }
        }
    }
}