Droidcon Singapore - From XML To Compose - Ahmed Tikiwa

My journey of migrating my large Android app to Jetpack Compose has been ongoing over the past year, gradually adding various Compose-related features over time. This talk is a continuation of that journey primarily focusing on the addition of Jetpack Compose Navigation using Compose Destinations and the addition of Material Design 3.

Transcript

1. Ahmed Tikiwa GDE Android @ahmed_tikiwa My journey of transforming an existing large app to Jetpack Compose From xml to compose
2. Agenda What this talk will cover • What is Jetpack Compose • How I learned it • The migration approach • About the app • Adding Compose Navigation • Adding Material Design 3 • Before and after’s
3. What is Jetpack Compose
4. “Our theming layer is vastly more intuitive and legible. We’ve been able to accomplish within a single Kotlin file what otherwise extended across multiple XML files that were responsible for attribute definitions and assignments via multiple layered theme overlays.” Twitter
5. “It’s much easier to trace through code when it’s all written in the same language [Kotlin] and often the same file, rather than jumping back and forth between Kotlin and XML” Monzo
6. How I learned it
7. Jetpack Compose Learning Pathway https://developer.android.com/courses/jetpack-compose/course
8. Jetpack Compose on Udemy https://www.udemy.com
9. Jetpack Compose Camp https://developer.android.com/compose-camp
10. The migration approach
11. • Bottom-up approach ◦ Smaller UI elements e.g Button or TextView • Top-down approach ◦ Fragments or view containers The migration approach
12. About the app
13. About the app Upnext: TV Series Manager
14. • All screens are Compose ◦ Use of ComposeView inside Fragments (inter-op) • Bottom navigation and Toolbar navigation view-based ◦ Jetpack Navigation used • Material 2 The Compose journey so far What has been migrated to Jetpack Compose to date
15. Adding Compose Navigation
16. by Rafael Costa (@raamcosta) Compose Destinations • KSP library • Processes annotations • Generates navigation-related code https://github.com/raamcosta/compose-destinations
17. by Rafael Costa (@raamcosta) Compose Destinations • Typesafe navigation arguments • Simple but configurable navigation graphs setup • Navigating back with a result in a simple and type-safe way • Navigation animations through integration with Accompanist Navigation-Animation
18. plugins { . . . id "com.google.devtools.ksp" version "$kotlin_version-1.0.6" } android { applicationVariants.all { variant -> kotlin.sourceSets { getByName(variant.name) { kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin") } } } } Setting up app/build.gradle
19. plugins { . . . id "com.google.devtools.ksp" version "$kotlin_version-1.0.6" } android { // Relates to https://github.com/google/ksp/issues/37 applicationVariants.all { variant -> kotlin.sourceSets { getByName(variant.name) { kotlin.srcDir("build/generated/ksp/${variant.name}/kotlin") } } } } Setting up app/build.gradle
20. dependencies { . . . // Jetpack Compose Destinations implementation "io.github.raamcosta.compose-destinations:core:$compose_destinations_version” implementation "io.github.raamcosta.compose-destinations:ksp:$compose_destinations_version” // Accompanist navigation animation implementation "com.google.accompanist:accompanist-navigation-animation:$accompanist_version” } Setting up app/build.gradle
21. Setting up the screens for navigation
22. @RootNavGraph(start = true) @Destination @Composable fun DashboardScreen( viewModel: DashboardViewModel = hiltViewModel(), navigator: DestinationsNavigator ) { ... Surface(modifier = Modifier.fillMaxSize()) {. . . } } The Main Screens app/ui/dashboard/DashboardScreen.kt
23. @RootNavGraph(start = true) @Destination @Composable fun DashboardScreen( viewModel: DashboardViewModel = hiltViewModel(), navigator: DestinationsNavigator ) { ... Surface(modifier = Modifier.fillMaxSize()) {. . . } } The Main Screens app/ui/dashboard/DashboardScreen.kt
24. @RootNavGraph(start = true) @Destination @Composable fun DashboardScreen( viewModel: DashboardViewModel = hiltViewModel(), navigator: DestinationsNavigator ) { ... Surface(modifier = Modifier.fillMaxSize()) {. . . } } The Main Screens app/ui/dashboard/DashboardScreen.kt
25. @Destination(navArgsDelegate = ShowDetailArg::class) @Composable fun ShowDetailScreen( viewModel: ShowDetailViewModel = hiltViewModel(), showDetailArgs: ShowDetailArg?, navigator: DestinationsNavigator ) { Surface( modifier = Modifier .fillMaxSize() ) {. . . } } The Parameter-based Screens app/ui/detail/ShowDetailScreen.kt
26. @Destination(navArgsDelegate = ShowDetailArg::class) @Composable fun ShowDetailScreen( viewModel: ShowDetailViewModel = hiltViewModel(), showDetailArgs: ShowDetailArg?, navigator: DestinationsNavigator ) { Surface( modifier = Modifier .fillMaxSize() ) {. . . } } The Parameter-based Screens app/ui/detail/ShowDetailScreen.kt package com.theupnextapp.domain data class ShowDetailArg( val source: String? = null, val showId: String?, val showTitle: String?, val showImageUrl: String?, val showBackgroundUrl: String?, val imdbID: String? = null, val isAuthorizedOnTrakt: Boolean? = false )
27. @Destination(navArgsDelegate = ShowDetailArg::class) @Composable fun ShowDetailScreen( viewModel: ShowDetailViewModel = hiltViewModel(), showDetailArgs: ShowDetailArg?, navigator: DestinationsNavigator ) { Surface( modifier = Modifier .fillMaxSize() ) {. . . } } The Parameter-based Screens app/ui/detail/ShowDetailScreen.kt package com.theupnextapp.domain data class ShowDetailArg( val source: String? = null, val showId: String?, val showTitle: String?, val showImageUrl: String?, val showBackgroundUrl: String?, val imdbID: String? = null, val isAuthorizedOnTrakt: Boolean? = false )
28. The NavHost
29. @Composable fun AppNavigation( navHostController: NavHostController, contentPadding: PaddingValues ) { val navHostEngine = rememberNavHostEngine() DestinationsNavHost( engine = navHostEngine, navGraph = NavGraphs.root, navController = navHostController, modifier = Modifier.padding(contentPadding) ) } The NavHost app/ui/navigation/AppNavigation.kt
30. Setting up the Scaffold
31. @ExperimentalMaterial3Api @Composable fun TopBar( navBackStackEntry: NavBackStackEntry?, onArrowClick: () -> Unit ) { val appBarIconState = rememberSaveable { mutableStateOf(true) } appBarIconState.value = isChildScreen(navBackStackEntry = navBackStackEntry) TopAppBar(. . .) } The TopBar app/ui/main/Topbar.kt
32. @ExperimentalMaterial3Api @Composable fun TopBar( navBackStackEntry: NavBackStackEntry?, onArrowClick: () -> Unit ) { val appBarIconState = rememberSaveable { mutableStateOf(true) } appBarIconState.value = isChildScreen(navBackStackEntry = navBackStackEntry) TopAppBar(. . .) } The TopBar app/ui/main/Topbar.kt
33. @ExperimentalMaterial3Api @Composable fun TopBar( navBackStackEntry: NavBackStackEntry?, onArrowClick: () -> Unit ) { val appBarIconState = rememberSaveable { mutableStateOf(true) } appBarIconState.value = isChildScreen(navBackStackEntry = navBackStackEntry) TopAppBar(. . .) } The TopBar app/ui/main/Topbar.kt
34. @ExperimentalMaterial3Api @Composable fun TopBar( navBackStackEntry: NavBackStackEntry?, onArrowClick: () -> Unit ) { val appBarIconState = rememberSaveable { mutableStateOf(true) } appBarIconState.value = isChildScreen(navBackStackEntry = navBackStackEntry) TopAppBar(. . .) } The TopBar app/ui/main/Topbar.kt
35. . . . TopAppBar( title = { AnimatedVisibility(visible = !appBarIconState.value) { Text( text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.headlineSmall ) } }, navigationIcon = { NavigationIcon(appBarIconState = appBarIconState) { onArrowClick() } } ) The TopBar app/ui/main/Topbar.kt
36. . . . TopAppBar( title = { AnimatedVisibility(visible = !appBarIconState.value) { Text( text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.headlineSmall ) } }, navigationIcon = { NavigationIcon(appBarIconState = appBarIconState) { onArrowClick() } } ) The TopBar app/ui/main/Topbar.kt
37. . . . TopAppBar( title = { AnimatedVisibility(visible = !appBarIconState.value) { Text( text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.headlineSmall ) } }, navigationIcon = { NavigationIcon(appBarIconState = appBarIconState) { onArrowClick() } } ) The TopBar app/ui/main/Topbar.kt
38. @Composable fun NavigationIcon( appBarIconState: State<Boolean>, onArrowClick: () -> Unit ) { AnimatedVisibility(visible = appBarIconState.value) { IconButton(onClick = { onArrowClick() }) { Icon(Icons.Filled.ArrowBack, contentDescription = "Back arrow") } } } The TopBar app/ui/main/Topbar.kt
39. @Composable fun NavigationIcon( appBarIconState: State<Boolean>, onArrowClick: () -> Unit ) { AnimatedVisibility(visible = appBarIconState.value) { IconButton(onClick = { onArrowClick() }) { Icon(Icons.Filled.ArrowBack, contentDescription = "Back arrow") } } } The TopBar app/ui/main/Topbar.kt
40. @Composable fun NavigationIcon( appBarIconState: State<Boolean>, onArrowClick: () -> Unit ) { AnimatedVisibility(visible = appBarIconState.value) { IconButton(onClick = { onArrowClick() }) { Icon(Icons.Filled.ArrowBack, contentDescription = "Back arrow") } } } The TopBar app/ui/main/Topbar.kt
41. import com.ramcosta.composedestinations.spec.Direction import com.theupnextapp.ui.destinations... enum class BottomBarDestination( val direction: Direction, val icon: ImageVector, @StringRes val label: Int ) { SearchScreen(SearchScreenDestination, Icons.Default.Search, R.string.bottom_nav_title_search), Dashboard(DashboardScreenDestination, Icons.Default.Home, R.string.bottom_nav_title_dashboard), Explore(ExploreScreenDestination, Icons.Filled.Explore, R.string.bottom_nav_title_explore), TraktAccount(TraktAccountScreenDestination(),Icons.Filled.AccountBox, R.string.bottom_nav_title_account ) } The BottomBar app/ui/main/Bottombar.kt
42. import com.ramcosta.composedestinations.spec.Direction import com.theupnextapp.ui.destinations... enum class BottomBarDestination( val direction: Direction, val icon: ImageVector, @StringRes val label: Int ) { SearchScreen(SearchScreenDestination, Icons.Default.Search, R.string.bottom_nav_title_search), Dashboard(DashboardScreenDestination, Icons.Default.Home, R.string.bottom_nav_title_dashboard), Explore(ExploreScreenDestination, Icons.Filled.Explore, R.string.bottom_nav_title_explore), TraktAccount(TraktAccountScreenDestination(),Icons.Filled.AccountBox, R.string.bottom_nav_title_account ) } The BottomBar app/ui/main/Bottombar.kt
43. import com.ramcosta.composedestinations.spec.Direction import com.theupnextapp.ui.destinations... enum class BottomBarDestination( val direction: Direction, val icon: ImageVector, @StringRes val label: Int ) { SearchScreen(SearchScreenDestination, Icons.Default.Search, R.string.bottom_nav_title_search), Dashboard(DashboardScreenDestination, Icons.Default.Home, R.string.bottom_nav_title_dashboard), Explore(ExploreScreenDestination, Icons.Filled.Explore, R.string.bottom_nav_title_explore), TraktAccount(TraktAccountScreenDestination(),Icons.Filled.AccountBox, R.string.bottom_nav_title_account ) } The BottomBar app/ui/main/Bottombar.kt
44. @Composable fun BottomBar( currentDestination: Destination, onBottomBarItemClick: (Direction) -> Unit ) { val bottomBarState = rememberSaveable { mutableStateOf(true) } bottomBarState.value = isMainScreen(destination = currentDestination) AnimatedVisibility( visible = bottomBarState.value, enter = slideInVertically(initialOffsetY = { it }), exit = slideOutVertically(targetOffsetY = { it }), content = {. . .} ) } The BottomBar app/ui/main/Bottombar.kt
45. @Composable fun BottomBar( currentDestination: Destination, onBottomBarItemClick: (Direction) -> Unit ) { val bottomBarState = rememberSaveable { mutableStateOf(true) } bottomBarState.value = isMainScreen(destination = currentDestination) AnimatedVisibility( visible = bottomBarState.value, enter = slideInVertically(initialOffsetY = { it }), exit = slideOutVertically(targetOffsetY = { it }), content = {. . .} ) } The BottomBar app/ui/main/Bottombar.kt
46. @Composable fun BottomBar( currentDestination: Destination, onBottomBarItemClick: (Direction) -> Unit ) { val bottomBarState = rememberSaveable { mutableStateOf(true) } bottomBarState.value = isMainScreen(destination = currentDestination) AnimatedVisibility( visible = bottomBarState.value, enter = slideInVertically(initialOffsetY = { it }), exit = slideOutVertically(targetOffsetY = { it }), content = {. . .} ) } The BottomBar app/ui/main/Bottombar.kt
47. @Composable fun BottomBar( currentDestination: Destination, onBottomBarItemClick: (Direction) -> Unit ) { val bottomBarState = rememberSaveable { mutableStateOf(true) } bottomBarState.value = isMainScreen(destination = currentDestination) AnimatedVisibility( visible = bottomBarState.value, enter = slideInVertically(initialOffsetY = { it }), exit = slideOutVertically(targetOffsetY = { it }), content = {. . .} ) } The BottomBar app/ui/main/Bottombar.kt
48. @Composable fun BottomBar( currentDestination: Destination, onBottomBarItemClick: (Direction) -> Unit ) { val bottomBarState = rememberSaveable { mutableStateOf(true) } bottomBarState.value = isMainScreen(destination = currentDestination) AnimatedVisibility( visible = bottomBarState.value, enter = slideInVertically(initialOffsetY = { it }), exit = slideOutVertically(targetOffsetY = { it }), content = {. . .} ) } The BottomBar app/ui/main/Bottombar.kt
49. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
50. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
51. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
52. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
53. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
54. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
55. @Composable fun BottomBar(. . .) { ... AnimatedVisibility( ... content = { BottomAppBar { BottomBarDestination.values().forEach { destination -> NavigationBarItem( icon = { Icon(imageVector = destination.icon, contentDescription = stringResource(id = destination.label)) }, label = { Text(stringResource(id = destination.label)) }, selected = destination.direction.route.startsWith(currentDestination.baseRoute), onClick = { onBottomBarItemClick(destination.direction) } ... The BottomBar app/ui/main/Bottombar.kt
56. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
57. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
58. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
59. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
60. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
61. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
62. @Composable fun MainScaffold( navHostController: NavHostController, topBar: @Composable (NavBackStackEntry?) -> Unit, bottomBar: @Composable (Destination) -> Unit, content: @Composable (PaddingValues) -> Unit ) { val currentBackStackEntryAsState by navHostController.currentBackStackEntryAsState() val destination = currentBackStackEntryAsState?.appDestination() ?: NavGraphs.root.startRoute.startAppDestination Scaffold( topBar = { topBar(currentBackStackEntryAsState) }, bottomBar = { bottomBar(destination) }, content = content ) } The Scaffold app/ui/main/MainScaffold.kt
63. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
64. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
65. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
66. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
67. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
68. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
69. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
70. @Composable fun MainScreen( traktCodeState: MutableState<String?>, ) { val navController = rememberAnimatedNavController() ... MainScaffold( navHostController = navController, topBar = { navBackStackEntry -> TopBar(...) { navController.navigateUp() } }, bottomBar = { destination -> BottomBar(currentDestination = destination, onBottomBarItemClick = { navController.navigateTo(it) { launchSingleTop = true } } ) } ) { AppNavigation(navHostController = navController, contentPadding = it) } The MainScreen app/ui/main/MainScreen.kt
71. The MainActivity setup
72. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val dataString: MutableState<String?> = rememberSaveable { mutableStateOf("") } DisposableEffect(Unit) { val listener = Consumer<Intent> { intent -> val code = intent.data?.getQueryParameter("code") dataString.value = code } addOnNewIntentListener(listener) onDispose { removeOnNewIntentListener(listener) } } UpnextTheme { MainScreen(dataString) } } The MainActivity app/MainActivity.kt
73. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val dataString: MutableState<String?> = rememberSaveable { mutableStateOf("") } DisposableEffect(Unit) { val listener = Consumer<Intent> { intent -> val code = intent.data?.getQueryParameter("code") dataString.value = code } addOnNewIntentListener(listener) onDispose { removeOnNewIntentListener(listener) } } UpnextTheme { MainScreen(dataString) } } The MainScreen app/MainActivity.kt
74. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val dataString: MutableState<String?> = rememberSaveable { mutableStateOf("") } DisposableEffect(Unit) { val listener = Consumer<Intent> { intent -> val code = intent.data?.getQueryParameter("code") dataString.value = code } addOnNewIntentListener(listener) onDispose { removeOnNewIntentListener(listener) } } UpnextTheme { MainScreen(dataString) } } The MainScreen app/MainActivity.kt
75. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val dataString: MutableState<String?> = rememberSaveable { mutableStateOf("") } DisposableEffect(Unit) { val listener = Consumer<Intent> { intent -> val code = intent.data?.getQueryParameter("code") dataString.value = code } addOnNewIntentListener(listener) onDispose { removeOnNewIntentListener(listener) } } UpnextTheme { MainScreen(dataString) } } The MainScreen app/MainActivity.kt
76. override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val dataString: MutableState<String?> = rememberSaveable { mutableStateOf("") } DisposableEffect(Unit) { val listener = Consumer<Intent> { intent -> val code = intent.data?.getQueryParameter("code") dataString.value = code } addOnNewIntentListener(listener) onDispose { removeOnNewIntentListener(listener) } } UpnextTheme { MainScreen(dataString) } } The MainScreen app/MainActivity.kt
77. Adding Material Design 3
78. dependencies { . . . // Compose Material Design implementation "androidx.compose.material3:material3:$compose_material_version” implementation "androidx.compose.material3:material3-window-size-class:$compose_material_version” implementation "com.google.android.material:compose-theme-adapter:$compose_theme_adapter_version” } Setting up app/build.gradle
79. package com.theupnextapp.ui.theme import androidx.compose.ui.graphics.Color val Teal500 = Color(0xFF009688) val Purple500 = Color(0xFF6200EE) val Teal600 = Color(0xFF00897B) val Teal200 = Color(0xFF80CBC4) val Purple200 = Color(0xFFBB86FC) val Teal700 = Color(0xFF00796B) Defining the colors for the theme app/ui/theme/color/Color.kt
80. package com.theupnextapp.ui.theme import androidx.compose.ui.graphics.Color import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp val Typography = Typography( bodyLarge = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.5.sp ) ) Defining the typography for the theme app/ui/theme/color/Type.kt
81. Recap: the before Upnext: TV Series Manager
82. The after Upnext: TV Series Manager
83. An overview of the screens Upnext: TV Series Manager Compose AppBar Compose BottomBar @Composable ShowsRow() & uses LazyRow()
84. An overview of the screens Upnext: TV Series Manager Compose AppBar Compose BottomBar @Composable TrendingShowsRow() & uses LazyRow() @Composable PopularShowsRow() & uses LazyRow()
85. An overview of the screens Upnext: TV Series Manager Compose AppBar @Composable ShowCastList() @Composable BackdropAndTitle() @Composable PosterAndMetadata()
86. An overview of the screens Upnext: TV Series Manager Compose AppBar @Composable ShowDetailButtons() @Composable ShowCastList() @Composable NextEpisode() @Composable PreviousEpisode()
87. An overview of the screens Upnext: TV Series Manager Compose AppBar @Composable TraktRatingSummary() @Composable NextEpisode() @Composable PreviousEpisode()
88. An overview of the screens Upnext: TV Series Manager Compose AppBar @Composable SectionHeadingText() @Composable ShowSeasonsCard() @Composable ShowSeasons() uses LazyColumn()
89. An overview of the screens Upnext: TV Series Manager Compose AppBar @Composable ShowSeasonEpisodes() uses LazyColumn() @Composable ShowSeasonEpisodeCard() @Composable SectionHeadingText()
90. An overview of the screens Upnext: TV Series Manager Compose AppBar Composable BottomBar @Composable FavoritesList() uses LazyVerticalGrid() @Composable ListPosterCard() @Composable SectionHeadingText()
91. Compose Navigation in action
92. Resources
93. • Official Compose Documentation https://developer.android.com/jetpack/compose • Official Compose course https://developer.android.com/courses/pathways/compose • Android on YouTube https://www.youtube.com/c/AndroidDevelopers • State Hoisting https://developer.android.com/jetpack/compose/state#state-hoisting Resources
94. • UpNext TV Series Manager code is available as an open-source project and part of the Google Developers Dev Library https://devlibrary.withgoogle.com/products/android/repos/akitikkx-upnext Click on the “View on Github” to see the code. Contributions welcome from the community! Please read my Readme and contribution Guidelines for more information Resources
95. Thank You! Ahmed Tikiwa GDE Android @ahmed_tikiwa