Upgrade Navigation Compose to 2.8.9 and adopt type-safe navigation

README.md

@@ -18,8 +18,8 @@
 <a href="https://github.com/Gurupreet/ComposeCookBook/releases/download/latest-master/app-debug.apk" >
       <img src = "https://img.shields.io/badge/Master-Master?color=7885FF&label=Sample%20App&logo=android&style=for-the-badge" />
     </a>
-    <a href = "https://developer.android.com/jetpack/androidx/versions/all-channel#december_16_2020">
-      <img src = "https://img.shields.io/badge/Jetpack%20Compose-1.0.1-brightgreen" />
+    <a href = "https://developer.android.com/develop/ui/compose/bom/bom-mapping">
+      <img src = "https://img.shields.io/badge/Jetpack%20Compose-BOM%202024.12.01-brightgreen" />
     </a>
   <a href = "https://github.com/Gurupreet/ComposeCookBook/actions/workflows/android.yml">
       <img src = "https://github.com/Gurupreet/ComposeCookBook/actions/workflows/android.yml/badge.svg" />

app/src/main/java/com/guru/composecookbook/ui/animation/AnimationScreen.kt

@@ -10,8 +10,8 @@ import androidx.compose.material3.Divider
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -39,7 +39,7 @@ fun AnimationScreen() {
   Scaffold(
     modifier = Modifier.testTag(TestTags.ANIM_SCREEN_ROOT),
     topBar = {
-      SmallTopAppBar(
+      TopAppBar(
         title = { Text(text = "Animations") },
         navigationIcon = {
           IconButton(onClick = { animateIcon = !animateIcon }) {

app/src/main/java/com/guru/composecookbook/ui/home/advancelists/AdvanceListsActivity.kt

@@ -16,8 +16,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -49,7 +49,7 @@ class AdvanceListsActivity : ComponentActivity() {
         // A surface container using the 'background' color from the theme
         Scaffold(
           topBar = {
-            SmallTopAppBar(
+            TopAppBar(
               title = { Text(text = "Advance Lists(In Progress)") },
               navigationIcon = {
                 IconButton(onClick = { onBackPressed() }) {

app/src/main/java/com/guru/composecookbook/ui/home/customfling/FlingListActivity.kt

@@ -18,8 +18,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.State
 import androidx.compose.runtime.livedata.observeAsState
@@ -139,7 +139,7 @@ fun ListViewContent(
    */
   Scaffold(
     topBar = {
-      SmallTopAppBar(
+      TopAppBar(
         title = {
           Column(modifier = Modifier.padding(4.dp)) {
             /*

app/src/main/java/com/guru/composecookbook/ui/home/dialogs/DialogsActivity.kt

@@ -24,9 +24,9 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -77,7 +77,7 @@ class DialogsActivity : AppCompatActivity() {
 fun DialogScreen(onBack: () -> Unit) {
   Scaffold(
     topBar = {
-      SmallTopAppBar(
+      TopAppBar(
         title = { Text(text = "Dialogs") },
         navigationIcon = {
           IconButton(onClick = onBack) {

app/src/main/java/com/guru/composecookbook/ui/home/dynamic/DynamicUIActivity.kt

@@ -13,8 +13,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -64,7 +64,7 @@ class DynamicUIActivity : ComponentActivity() {
 fun DynamicUiWrapper(uiType: String, onback: () -> Unit) {
   Scaffold(
     topBar = {
-      SmallTopAppBar(
+      TopAppBar(
         title = { Text(text = uiType) },
         navigationIcon = {
           IconButton(onClick = onback) {

app/src/main/java/com/guru/composecookbook/ui/home/lists/ListViewActivity.kt

@@ -21,8 +21,8 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
@@ -73,7 +73,7 @@ fun BaseView(isDarkTheme: Boolean, content: @Composable () -> Unit) {
 fun ListViewContent(listType: String, onBack: () -> Unit) {
   Scaffold(
     topBar = {
-      SmallTopAppBar(
+      TopAppBar(
         title = {
           Column(modifier = Modifier.padding(4.dp)) {
             Text(text = "ListView")

app/src/main/java/com/guru/composecookbook/ui/learnwidgets/AppBars.kt

@@ -25,8 +25,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar as Material3TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -57,7 +57,7 @@ fun AppBars() {
 fun TopAppBarsDemo() {
   SubtitleText(subtitle = "Top App bar")
 
-  SmallTopAppBar(
+  Material3TopAppBar(
     title = { Text(text = "Home") },
     navigationIcon = {
       IconButton(onClick = {}) {

buildSrc/build.gradle.kts

@@ -39,7 +39,10 @@ dependencies {
     // in order to be able to apply "org.jetbrains.kotlin.plugin.compose" in the common scripts
     implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:2.1.20")
 
-    // in order to be able to apply "com.google.devtools.ksp" in the common scripts
+    // in order to be able to apply "org.jetbrains.kotlin.plugin.serialization" in module scripts
+  implementation("org.jetbrains.kotlin:kotlin-serialization:2.1.20")
+
+  // in order to be able to apply "com.google.devtools.ksp" in the common scripts
     // (KSP version must match the Kotlin version above)
     implementation("com.google.devtools.ksp:symbol-processing-gradle-plugin:2.1.20-1.0.31")
 

buildSrc/src/main/kotlin/com/guru/composecookbook/build/dependencies/Dependencies.kt

@@ -17,19 +17,19 @@ object Dependencies {
     // Removed googleMaps = "com.google.android.libraries.maps:maps" as it's not publicly available
     const val playServicesMaps =
         "com.google.android.gms:play-services-maps:${Versions.playServicesMaps}"
-    const val composeUi = "androidx.compose.ui:ui:${Versions.compose}"
-    const val composeUiTooling = "androidx.compose.ui:ui-tooling:${Versions.compose}"
+    // Compose BOM keeps all androidx.compose artifacts below at compatible versions
+    const val composeBom = "androidx.compose:compose-bom:${Versions.composeBom}"
+    const val composeUi = "androidx.compose.ui:ui"
+    const val composeUiTooling = "androidx.compose.ui:ui-tooling"
     // Material Design 1 and 3 dependencies
-    const val composeMaterial = "androidx.compose.material:material:${Versions.compose}"
-    const val composeMaterial3 = "androidx.compose.material3:material3:${Versions.material3}"
-    const val composeMaterial3WindowSizeClass = "androidx.compose.material3:material3-window-size-class:${Versions.material3}"
-    const val composeMaterialIconsExtended =
-        "androidx.compose.material:material-icons-extended:${Versions.compose}"
-
+    const val composeMaterial = "androidx.compose.material:material"
+    const val composeMaterial3 = "androidx.compose.material3:material3"
+    const val composeMaterial3WindowSizeClass = "androidx.compose.material3:material3-window-size-class"
+    const val composeMaterialIconsExtended = "androidx.compose.material:material-icons-extended"
+
     // Runtime and State Management
-    const val composeRuntime = "androidx.compose.runtime:runtime:${Versions.compose}"
-    const val composeRuntimeLivedata =
-        "androidx.compose.runtime:runtime-livedata:${Versions.compose}"
+    const val composeRuntime = "androidx.compose.runtime:runtime"
+    const val composeRuntimeLivedata = "androidx.compose.runtime:runtime-livedata"
 
     // Layout and Navigation
     const val composeConstraintLayout =
@@ -41,8 +41,8 @@ object Dependencies {
     const val composeLottie = "com.airbnb.android:lottie-compose:${Versions.lottie}"
     const val composeNavigation = "androidx.navigation:navigation-compose:${Versions.navCompose}"
 
-    const val composeUiTestJunit4 = "androidx.compose.ui:ui-test-junit4:${Versions.compose}"
-    const val composeUiTestManifest = "androidx.compose.ui:ui-test-manifest:${Versions.compose}"
+    const val composeUiTestJunit4 = "androidx.compose.ui:ui-test-junit4"
+    const val composeUiTestManifest = "androidx.compose.ui:ui-test-manifest"
 
     /**
      * Custom fling behaviour
@@ -67,6 +67,8 @@ object Dependencies {
         "org.jetbrains.kotlinx:kotlinx-coroutines-core:${Versions.coroutines}"
     const val coroutinesAndroid =
         "org.jetbrains.kotlinx:kotlinx-coroutines-android:${Versions.coroutines}"
+    const val kotlinxSerializationJson =
+        "org.jetbrains.kotlinx:kotlinx-serialization-json:${Versions.kotlinxSerializationJson}"
     const val viewModelKtx =
         "androidx.lifecycle:lifecycle-viewmodel-ktx:${Versions.androidLifecycleGrouped}"
     const val liveDataKtx =

buildSrc/src/main/kotlin/com/guru/composecookbook/build/dependencies/DependencyHandlerExtensions.kt

@@ -2,7 +2,13 @@ package com.guru.composecookbook.build.dependencies
 
 import org.gradle.api.artifacts.dsl.DependencyHandler
 
+/** Imports the Compose BOM so the unversioned Compose artifacts resolve consistently. */
+private fun DependencyHandler.addComposeBom(configurationName: String) {
+    add(configurationName, platform(Dependencies.composeBom))
+}
+
 fun DependencyHandler.addComposeOfficialDependencies() {
+    addComposeBom("implementation")
     composeOfficialDependencies.forEach {
         add("implementation", it)
     }
@@ -15,6 +21,7 @@ fun DependencyHandler.addComposeThirdPartyDependencies() {
 }
 
 fun DependencyHandler.addComposeDebugDependencies() {
+    addComposeBom("debugImplementation")
     composeDebugDependencies.forEach {
         add("debugImplementation", it)
     }
@@ -33,6 +40,7 @@ fun DependencyHandler.addKotlinTestDependencies() {
 }
 
 fun DependencyHandler.addDataDependencies() {
+    addComposeBom("implementation")
     add("ksp", Dependencies.roomCompiler)
     dataDependencies.forEach {
         add("implementation", it)
@@ -76,6 +84,7 @@ fun DependencyHandler.addThirdPartyUnitTestsDependencies() {
 }
 
 fun DependencyHandler.addAndroidInstrumentationTestsDependencies() {
+    addComposeBom("androidTestImplementation")
     androidInstrumentationTestsDependencies.forEach {
         add("androidTestImplementation", it)
     }

buildSrc/src/main/kotlin/com/guru/composecookbook/build/dependencies/GroupedDependencies.kt

@@ -30,7 +30,8 @@ internal val composeDebugDependencies = listOf(
 internal val kotlinDependencies = listOf(
     Dependencies.kotlinStandardLibraryJdk8,
     Dependencies.coroutinesCore,
-    Dependencies.coroutinesAndroid
+    Dependencies.coroutinesAndroid,
+    Dependencies.kotlinxSerializationJson
 )
 
 internal val kotlinTestDependencies = listOf(

buildSrc/src/main/kotlin/com/guru/composecookbook/build/dependencies/Versions.kt

@@ -1,16 +1,17 @@
 package com.guru.composecookbook.build.dependencies
 
 internal object Versions {
-    const val compose = "1.6.1"  // Latest stable Compose UI version
+    const val composeBom = "2024.12.01"  // Compose BOM maps ui/material/runtime etc. versions
     const val activityCompose = "1.8.2"  // Latest stable
     const val pagingCompose = "3.2.1"  // Latest stable
-    const val navCompose = "2.7.7"  // Latest stable navigation
+    const val navCompose = "2.8.9"  // Stable navigation with type-safe routes
     const val constraintLayoutCompose = "1.1.0"  // Latest stable
     const val fontAwesomeCompose = "1.1.0"  // Keeping as is since it's a third-party lib
     const val coilCompose = "2.5.0"  // Latest stable
     const val kotlin = "2.1.20"  // Kotlin 2.x with the K2 compiler
     const val coroutines = "1.7.3"  // Latest stable
-    const val androidLifecycleGrouped = "2.7.0"  // Latest stable
+    const val kotlinxSerializationJson = "1.8.0"  // For type-safe navigation routes
+    const val androidLifecycleGrouped = "2.8.7"  // Latest stable 2.8.x
     const val flinger = "1.0.5"  // Keeping as is since it's a third-party lib
     const val paging = "3.2.1"  // Latest stable
     const val lottie = "6.3.0"  // Latest stable
@@ -19,7 +20,6 @@ internal object Versions {
     const val appcompat = "1.6.1"  // Latest stable
     const val paletteKtx = "1.0.0"  // Latest stable
     const val material = "1.11.0"  // Latest stable Material Design 1
-    const val material3 = "1.2.1"  // Latest stable Material 3
     const val playServicesAds = "22.5.0"  // Latest stable
     const val googleMaps = "2.0.1"  // Latest Google Maps version
     const val playServicesMaps = "18.2.0"  // Latest stable

data/build.gradle.kts

@@ -6,5 +6,6 @@ plugins {
 android { namespace = "com.guru.composecookbook.data" }
 
 dependencies {
+  implementation(platform(com.guru.composecookbook.build.dependencies.Dependencies.composeBom))
   implementation(com.guru.composecookbook.build.dependencies.Dependencies.composeRuntime)
 }

demos/datingapp/src/main/java/com/guru/composecookbook/datingapp/DatingHomeActivity.kt

@@ -21,8 +21,8 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.Scaffold
-import androidx.compose.material3.SmallTopAppBar
 import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.MutableState
@@ -115,7 +115,7 @@ fun DatingHomeAppbar(navType: MutableState<DatingNavType>) {
       DatingNavType.CHATS -> "Chats"
       DatingNavType.PROFILE -> "My Profile"
     }
-  SmallTopAppBar(
+  TopAppBar(
     title = { Text(title, style = typography.h6) },
     actions = { IconButton(onClick = {}) { Icons.Default.MyLocation } },
   )

demos/gmail/build.gradle.kts

@@ -1,9 +1,11 @@
 import com.guru.composecookbook.build.dependencies.addComposeOfficialDependencies
 import com.guru.composecookbook.build.dependencies.addCoreAndroidUiDependencies
+import com.guru.composecookbook.build.dependencies.addKotlinDependencies
 
 plugins {
   /** See [common-compose-module-configs-script-plugin.gradle.kts] file */
   id("common-compose-module-configs-script-plugin")
+  id("org.jetbrains.kotlin.plugin.serialization")
 }
 
 android { namespace = "com.guru.composecookbook.gmail" }
@@ -13,6 +15,7 @@ dependencies {
   implementation(project(":data"))
   implementation(project(":theme"))
 
+  addKotlinDependencies()
   addComposeOfficialDependencies()
   addCoreAndroidUiDependencies()
 }

demos/gmail/src/main/java/com/guru/composecookbook/gmail/ui/home/GmailHome.kt

@@ -68,16 +68,24 @@ import com.guru.composecookbook.gmail.ui.details.MessageDetailScreen
 import com.guru.composecookbook.theme.graySurface
 import com.guru.composecookbook.theme.green500
 import kotlin.math.absoluteValue
+import kotlinx.serialization.Serializable
+
+/** Type-safe navigation routes for the Gmail demo. */
+@Serializable object GmailHomeRoute
+
+@Serializable object GmailDetailRoute
+
+@Serializable object GmailCreateRoute
 
 @Composable
 fun GmailScreen() {
   val navController = rememberNavController()
-  NavHost(navController = navController, startDestination = "home") {
-    composable("home") { GmailHome(navController = navController) }
+  NavHost(navController = navController, startDestination = GmailHomeRoute) {
+    composable<GmailHomeRoute> { GmailHome(navController = navController) }
 
-    composable("detail") { MessageDetailScreen(navController = navController) }
+    composable<GmailDetailRoute> { MessageDetailScreen(navController = navController) }
 
-    composable("create") { CreateMessageScreen(navController = navController) }
+    composable<GmailCreateRoute> { CreateMessageScreen(navController = navController) }
   }
 }
 
@@ -157,7 +165,7 @@ fun IconWithBadge(badge: Int, icon: ImageVector, modifier: Modifier = Modifier)
 fun GmailFloatingActionButton(navController: NavHostController, expandState: Boolean) {
 
   FloatingActionButton(
-    onClick = { navController.navigate("create") },
+    onClick = { navController.navigate(GmailCreateRoute) },
     modifier = Modifier.padding(16.dp).height(48.dp).widthIn(min = 48.dp),
     backgroundColor = MaterialTheme.colors.surface,
     contentColor = MaterialTheme.colors.primary,
@@ -241,14 +249,14 @@ fun GmailContent(
         AnimatedVisibility(visible = visible.value) {
           Box(modifier = Modifier.background(green500)) {
             GmailListActionItems(modifier = Modifier.align(Alignment.CenterEnd))
-            GmailListItem(it) { navController.navigate("detail") }
+            GmailListItem(it) { navController.navigate(GmailDetailRoute) }
           }
         }
       }
     }
 
     SearchLayout(searchOffsetY.value, scaffoldState.drawerState, showUserDialog) {
-      navController.navigate("create")
+      navController.navigate(GmailCreateRoute)
     }
   }
 }