Let’s not kid ourselves - TVs play a huge part in our lives, with living areas in our homes often centred around them. Immersive experiences in the form of video, music and games provide a way for us to relax and bond with those around us and now with Jetpack Compose, we can build modernised apps for the TV platform. In this talk, we’ll cover the different concepts of building apps for Android TV. You’ll learn how to build your own apps using the TV APIs available for Jetpack Compose, allowing you to build your own immersive experiences for Android TV.

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