The document provides a comprehensive overview of developing for Android TV using Jetpack Compose, covering layout composables, material composables, and navigation patterns. It discusses essential UI components such as lazy rows, columns, grids, and carousels, emphasizing their usage and best practices for creating a user-friendly experience. It also highlights the importance of immersive lists and navigation drawers in organizing content effectively on the platform.

1. Kicking Back with Compose
for Android TV

2. Joe Birch @HiThereJoe
Android @ Bu
ff
er
Running @ Droid.Academy
👋

3. What we’ll learn
📺 Foundations of Android TV
📺 Layout Composables for Android TV
📺 Material Composables for Android TV
📺 Sharing composables across TV and Mobile

4. 150 million
monthly active devices
running Android TV
(smart TVs and chromecast devices)

5. Android TV

6. Navigation

10. Focus

15. Immersive

21. Compose, as you know it
implementation 'androidx.tv:tv-foundation:1.0.0-alpha07'
implementation ‘androidx.tv:tv-material:1.0.0-alpha07'

23. Lazy Layouts

24. TV Lazy Row

26. @Composable
fun TvLazyRow(
modifier: Modifier = Modifier,
state: TvLazyListState = rememberTvLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
horizontalArrangement: Arrangement.Horizontal =
if (!reverseLayout) Arrangement.Start else Arrangement.End,
verticalAlignment: Alignment.Vertical = Alignment.Top,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyListScope.() -> Unit
)

27. TvLazyRow(
contentPadding = PaddingValues(16.dp),
horizontalArrangement = Arrangement.spacedBy(18.dp)
) {
items(data) { cardItem ->
...
}
}

28. 📺 Display horizontally scrolling content
📺 Use to display content in feeds
📺 In most cases, prioritise Row over Column for
content browsing
TV Lazy Row

29. 📺 Display horizontally scrolling content
📺 Use to display content in feeds
📺 In most cases, prioritise Row over Column for
content browsing
TV Lazy Row

30. 📺 Display horizontally scrolling content
📺 Use to display content in feeds
📺 In most cases, prioritise Row over Column for
content browsing
TV Lazy Row

31. TV Lazy Column

33. @Composable
fun TvLazyColumn(
modifier: Modifier = Modifier,
state: TvLazyListState = rememberTvLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyListScope.() -> Unit
)

34. TvLazyColumn(
contentPadding = PaddingValues(16.dp),
verticalArrangement = Arrangement.spacedBy(18.dp)
) {
items(data) { cardItem ->
...
}
}

35. TV Lazy or Lazy 🤔

36. @Composable
fun TvLazyColumn(
modifier: Modifier = Modifier,
state: TvLazyListState = rememberTvLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyListScope.() -> Unit
)
@Composable
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyListScope.() -> Unit
)

37. @Composable
fun TvLazyColumn(
modifier: Modifier = Modifier,
state: TvLazyListState = rememberTvLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyListScope.() -> Unit
)
@Composable
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyListScope.() -> Unit
)

38. @Composable
fun TvLazyColumn(
modifier: Modifier = Modifier,
state: TvLazyListState = rememberTvLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyListScope.() -> Unit
)
@Composable
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical = …,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
userScrollEnabled: Boolean = true,
content: LazyListScope.() -> Unit
)

39. Lazy Row
TV Lazy Row

40. Lazy Row
TV Lazy Row

41. 📺 Use TV Lazy over Lazy layouts to ensure TV specific
behaviours are automatically applied
📺 Familiar API for composing child items
📺 Enforce TV composable properties and scope
TV Lazy Layouts

42. 📺 Use TV Lazy over Lazy layouts to ensure TV specific
behaviours are automatically applied
📺 Familiar API for composing child items
📺 Enforce TV composable properties and scope
TV Lazy Layouts

43. 📺 Use TV Lazy over Lazy layouts to ensure TV specific
behaviours are automatically applied
📺 Familiar API for composing child items
📺 Enforce TV composable properties and scope
TV Lazy Layouts

44. Lazy Grids

45. @Composable
fun TvLazyVerticalGrid(
columns: TvGridCells,
modifier: Modifier = Modifier,
state: TvLazyGridState = rememberTvLazyGridState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
reverseLayout: Boolean = false,
verticalArrangement: Arrangement.Vertical =
if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
userScrollEnabled: Boolean = true,
pivotOffsets: PivotOffsets = PivotOffsets(),
content: TvLazyGridScope.() -> Unit
)

46. TvLazyVerticalGrid(
columns = TvGridCells.Fixed(6),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(16.dp)
) {
items(items) {
…
}
}

48. TvLazyVerticalGrid(
columns = TvGridCells.Fixed(6),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(16.dp)
)

50. TvLazyVerticalGrid(
columns = TvGridCells.Adaptive(120.dp),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(16.dp)
)

52. TvLazyHorizontalGrid(
Rows = TvGridCells.Fixed(3),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(16.dp)
) {
…
}

54. 📺 Display large collections of related content
📺 Use tabs to offer content filtering
📺 Use adaptive cell sizing to scale based on available
space
TV Grids

55. 📺 Display large collections of related content
📺 Use tabs to offer content filtering
📺 Use adaptive cell sizing to scale based on available
space
TV Grids

56. 📺 Display large collections of related content
📺 Use tabs to offer content filtering
📺 Use adaptive cell sizing to scale based on available
space
TV Grids

57. Carousels

59. @Composable
fun Carousel(
itemCount: Int,
modifier: Modifier = Modifier,
carouselState: CarouselState = remember { CarouselState() },
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
carouselIndicator:
@Composable BoxScope.() -> Unit = {
…
},
content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

60. @Composable
fun Carousel(
itemCount: Int,
modifier: Modifier = Modifier,
carouselState: CarouselState = remember { CarouselState() },
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
carouselIndicator:
@Composable BoxScope.() -> Unit = {
CarouselDefaults.IndicatorRow(
itemCount = itemCount,
activeItemIndex = carouselState.activeItemIndex,
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
)
},
content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

61. @Composable
fun Carousel(
itemCount: Int,
modifier: Modifier = Modifier,
carouselState: CarouselState = remember { CarouselState() },
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
carouselIndicator:
@Composable BoxScope.() -> Unit = {
CarouselDefaults.IndicatorRow(
itemCount = itemCount,
activeItemIndex = carouselState.activeItemIndex,
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
)
},
content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

62. @Composable
fun Carousel(
itemCount: Int,
modifier: Modifier = Modifier,
carouselState: CarouselState = remember { CarouselState() },
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
carouselIndicator:
@Composable BoxScope.() -> Unit = {
CarouselDefaults.IndicatorRow(
itemCount = itemCount,
activeItemIndex = carouselState.activeItemIndex,
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
)
},
content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

63. @Composable
fun Carousel(
itemCount: Int,
modifier: Modifier = Modifier,
carouselState: CarouselState = remember { CarouselState() },
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
carouselIndicator:
@Composable BoxScope.() -> Unit = {
CarouselDefaults.IndicatorRow(
itemCount = itemCount,
activeItemIndex = carouselState.activeItemIndex,
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(16.dp),
)
},
content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

64. Carousel(
itemCount = backgrounds.size,
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 100.dp, vertical = 80.dp)
.height(280.dp)
.border(1.dp, Color.LightGray, RoundedCornerShape(16.dp))
) { itemIndex ->
…
}

65. 📺 Highlight featured content
📺 Always provide a way to access the content
📺 Not a replacement for content feeds
Carousel

66. 📺 Highlight featured content
📺 Always provide a way to access the content
📺 Not a replacement for content feeds
Carousel

67. 📺 Highlight featured content
📺 Always provide a way to access the content
📺 Not a replacement for content feeds
Carousel

68. Immersive Lists

70. @Composable
fun ImmersiveList(
background:
@Composable ImmersiveListBackgroundScope.(index: Int, listHasFocus: Boolean) -> Unit,
modifier: Modifier = Modifier,
listAlignment: Alignment = Alignment.BottomEnd,
list: @Composable ImmersiveListScope.() -> Unit,
)

71. ImmersiveList(
modifier = Modifier
.height(immersiveListHeight + cardHeight / 2)
.fillMaxWidth(),
background = { index, _ ->
…
}
) {
}

72. ImmersiveList(
modifier = Modifier
.height(immersiveListHeight + cardHeight / 2)
.fillMaxWidth(),
background = { index, _ ->
…
}
) {
TvLazyRow {
backgrounds.forEachIndexed { index, backgroundColor ->
item {
Box(
modifier = Modifier
…
.immersiveListItem(index)
)
}
}
}
}

73. ImmersiveList(
modifier = Modifier
.height(immersiveListHeight + cardHeight / 2)
.fillMaxWidth(),
background = { index, _ ->
…
}
) {
TvLazyRow {
backgrounds.forEachIndexed { index, backgroundColor ->
item {
Box(
modifier = Modifier
…
.immersiveListItem(index)
)
}
}
}
}

74. 📺 Give immersive focus to a selected item
📺 Show more information for content
📺 Greater efficiency for the user
Immersive List

75. 📺 Give immersive focus to a selected item
📺 Show more information for content
📺 Greater efficiency for the user
Immersive List

76. 📺 Give immersive focus to a selected item
📺 Show more information for content
📺 Greater efficiency for the user
Immersive List

77. Navigation

78. Navigation Drawer

79. @Composable
fun NavigationDrawer(
drawerContent: @Composable (DrawerValue) -> Unit,
modifier: Modifier = Modifier,
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
content: @Composable () -> Unit
)

81. Modal Navigation Drawer

82. @Composable
fun ModalNavigationDrawer(
drawerContent: @Composable (DrawerValue) -> Unit,
modifier: Modifier = Modifier,
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
scrimColor: Color = LocalColorScheme.current.scrim.copy(alpha = 0.5f),
content: @Composable () -> Unit
)

84. Tabs

85. @Composable
fun TabRow(
selectedTabIndex: Int,
modifier: Modifier = Modifier,
containerColor: Color = TabRowDefaults.ContainerColor,
contentColor: Color = TabRowDefaults.contentColor(),
separator: @Composable () -> Unit = { TabRowDefaults.TabSeparator() },
indicator: @Composable …,
tabs: @Composable () -> Unit
)
@Composable
fun Tab(
selected: Boolean,
onFocus: () -> Unit,
modifier: Modifier = Modifier,
onClick: () -> Unit = { },
enabled: Boolean = true,
colors: TabColors = TabDefaults.pillIndicatorTabColors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable RowScope.() -> Unit
)

86. val tabs = listOf("View All", "Action", "Sci-Fi", "Drama", "Thriller")
var selectedTabIndex by remember { mutableIntStateOf(0) }
TabRow(
selectedTabIndex = selectedTabIndex
) {
tabs.forEachIndexed { index, tab ->
Tab(
selected = selectedTabIndex == index,
onFocus = {
selectedTabIndex = index
},
) {
Text(…)
}
}
}

88. Material Components

89. Card

90. @Composable
fun WideCardLayout(
imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
subtitle: @Composable () -> Unit = {},
description: @Composable () -> Unit = {},
contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

91. @Composable
fun StandardCardLayout(
imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
subtitle: @Composable () -> Unit = {},
description: @Composable () -> Unit = {},
contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

92. @Composable
fun ClassicCard(
onClick: () -> Unit,
image: @Composable BoxScope.() -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
onLongClick: (() -> Unit)? = null,
subtitle: @Composable () -> Unit = {},
description: @Composable () -> Unit = {},
shape: CardShape = CardDefaults.shape(),
colors: CardColors = CardDefaults.colors(),
scale: CardScale = CardDefaults.scale(),
border: CardBorder = CardDefaults.border(),
glow: CardGlow = CardDefaults.glow(),
contentPadding: PaddingValues = PaddingValues(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

93. @Composable
fun WideClassicCard(
onClick: () -> Unit,
image: @Composable BoxScope.() -> Unit,
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
onLongClick: (() -> Unit)? = null,
subtitle: @Composable () -> Unit = {},
description: @Composable () -> Unit = {},
shape: CardShape = CardDefaults.shape(),
colors: CardColors = CardDefaults.colors(),
scale: CardScale = CardDefaults.scale(),
border: CardBorder = CardDefaults.border(),
glow: CardGlow = CardDefaults.glow(),
contentPadding: PaddingValues = PaddingValues(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

94. Surface

96. @Composable
fun Surface(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onLongClick: (() -> Unit)? = null,
tonalElevation: Dp = Elevation.Level0,
shape: ToggleableSurfaceShape = ToggleableSurfaceDefaults.shape(),
colors: ToggleableSurfaceColors = ToggleableSurfaceDefaults.colors(),
scale: ToggleableSurfaceScale = ToggleableSurfaceDefaults.scale(),
border: ToggleableSurfaceBorder = ToggleableSurfaceDefaults.border(),
glow: ToggleableSurfaceGlow = ToggleableSurfaceDefaults.glow(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable (BoxScope.() -> Unit)
)

97. @Composable
fun Surface(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
onLongClick: (() -> Unit)? = null,
tonalElevation: Dp = Elevation.Level0,
shape: ToggleableSurfaceShape = ToggleableSurfaceDefaults.shape(),
colors: ToggleableSurfaceColors = ToggleableSurfaceDefaults.colors(),
scale: ToggleableSurfaceScale = ToggleableSurfaceDefaults.scale(),
border: ToggleableSurfaceBorder = ToggleableSurfaceDefaults.border(),
glow: ToggleableSurfaceGlow = ToggleableSurfaceDefaults.glow(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable (BoxScope.() -> Unit)
)

99. Switch

101. @Composable
fun Switch(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
thumbContent: (@Composable () -> Unit)? = null,
enabled: Boolean = true,
colors: SwitchColors = SwitchDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

103. 📺 Button
📺 Checkbox
📺 Radio Button
📺 Wide Button
Material Components

104. Reusing Composables

105. Mobile App
Component
Library
Material Card

106. Mobile App
Component
Library
Material Card
TV App
Material TV Card

107. TV App
Material TV Card
Mobile App
Material Card
Component
Library
Card Content

108. TV App
Material TV Card
Mobile App
Material Card
Component
Library
Card Content

109. @Composable
fun TvMovieCard() {
Card(...) {
MySharedContent()
}
}
@Composable
fun MovieCard() {
Card(...) {
MySharedContent()
}
}
@Composable
fun MySharedContent() {
...
}

110. That’s all

111. Practical Jetpack Compose
Build 12 independent projects, interacting
with a vast range of essential Compose
APIs.
ComposeBook.com
25% o
ff
using code DROIDCON