Hello World for Fire TV with Kotlin & Jetpack Compose

With the release of Jetpack Compose for TV that came out during summer of 2024, Compose for TV introduces TV material components that are designed for the living room, with clear focus indicators and remote-friendly input behavior. Now there is a specific dependency for TV androidx.tv:tv-material instead of using the mobile one such as androidx.compose.material3:material3.

In this tutorial, I will be following closely on a ‘📺 🔥 Hello World Fire TV App’ sample recently published on GitHub. I will be highlight some cool features that are used in this sample so that you don’t have to read through the code base! Once again for this tutorial, we will be using Google Jetpack Compose to design and implement tv navigation drawer.

Prerequisite

You can use an existing Fire TV or an Android TV virtual device.

Light/Dark Mode

Switching from light and dark mode depending on the device’s system theme is an industry standard nowadays.
We can use the isSystemInDarkTheme to check if the device system is in light or dark mode to help build responsive UIs that follow the system setting.

In Theme.kt, you can find below code snippet:

@Composable
fun HelloWorldTVTheme(
    isInDarkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    val colorScheme = if (isInDarkTheme) {
        darkColorScheme(
            primary = Purple80,
            secondary = PurpleGrey80,
            tertiary = Pink80
        )
    } else {
        lightColorScheme(
            primary = Purple40,
            secondary = PurpleGrey40,
            tertiary = Pink40
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Navigation Drawer

Navigation drawers are essential components in any TV app as they allow users to access different destinations and features. In our sample, we are using [ModalNavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) as they are good for infrequent, but more focused, switching to different destinations. In HomeDrawer.kt, we are defining navigation drawer although we have not set any specific destinations.

ModalNavigationDrawer(
        drawerState = drawerState, drawerContent = { drawer ->
            Column(
                Modifier
                    .background(MaterialTheme.colorScheme.surface)
                    .fillMaxHeight()
                    .padding(12.dp)
                    .selectableGroup(),
                horizontalAlignment = Alignment.Start,
                verticalArrangement = Arrangement.spacedBy(
                    8.dp, alignment = Alignment.CenterVertically
                ),
            ) {
                Spacer(modifier = Modifier.height(8.dp))

                menuItems.forEachIndexed { _, item ->
                    NavigationRow(item = item,
                        isSelected = selectedId == menuItems.indexOf(item),
                        onMenuSelected = {
                            drawerState.setValue(DrawerValue.Closed)
                            onMenuSelected?.invoke(item)
                        })
                }
                Spacer(modifier = Modifier.weight(1f))
            }
        }, scrimBrush = Brush.horizontalGradient(
            listOf(
                MaterialTheme.colorScheme.surface, Color.Transparent
            )
        )
    )

Scrollable grid of cards

As this sample on GitHub is showcasing a catalog, we need a grid of cards where each card can represent a media of some sort. If it’s a media streaming app, you can imagine what these cards will be filled with, TV shows, movies, etc you name it! We are using [LazyVerticalGrid](https://developer.android.com/develop/ui/compose/lists#lazy-grids) which will provide support for displaying items in a grid. As we want something scrollable with a remote, vertical grid will display items in vertically scrollable container so users can scroll up and down!
For this sample, we want 5 columns so we will declare GridCells.Fixed(5).

LazyVerticalGrid(
                columns = GridCells.Fixed(5),
                contentPadding = PaddingValues(
                    start = 24.dp,
                    top = 24.dp,
                    end = 24.dp,
                    bottom = 48.dp
                ),
            )

In the end, when you run the sample app, you will have a scrollable TV app with grid of cards!

Conclusion

Today we went over some quick pointers on the Hello World Fire TV sample on GitHub which includes features such as different light/dark mode, navigation drawer and scrollable vertical grid to look similar to an streaming app on TV.
If you have noticed that the pugs from previous article isn’t here, you are correct. But there will be back as there is a continuation on this sample thanks to the new launch of Jetpack Compose for TV! Stay tuned.

Stay connected

Stay up to date with Amazon Appstore developer updates on the following platforms:
📣 Follow @AmazonAppDev on Twitter
📺 Subscribe to our Youtube channel
📧 Sign up for the Developer Newsletter