Forem

Olivia Sung for Amazon Appstore Developers

Posted on • Edited on

3 1 1 1 1

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
    )
}
Enter fullscreen mode Exit fullscreen mode

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
            )
        )
    )
Enter fullscreen mode Exit fullscreen mode

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
                ),
            )
Enter fullscreen mode Exit fullscreen mode

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

Image description

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.

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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Billboard image

📊 A side-by-side product comparison between Sentry and Crashlytics

A free guide pointing out the differences between Sentry and Crashlytics, that’s it. See which is best for your mobile crash reporting needs.

See Comparison

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay