Update Wear Material3 implementation to use modern constructs like ScreenScaffold.

ChatApp/gradle/libs.versions.toml

@@ -23,6 +23,7 @@ navigation3 = "1.1.4"
 kotlinxSerialization = "1.11.0"
 #noinspection UnusedVersionCatalogEntry - Accessed dynamically
 ktlint = "1.2.1"
+composeNavigation3 = "1.6.2"
 
 [libraries]
 androidx-appfunctions = { module = "androidx.appfunctions:appfunctions", version.ref = "appfunctions" }
@@ -58,6 +59,7 @@ androidx-navigation3-runtime = { group = "androidx.navigation3", name = "navigat
 androidx-navigation3-ui = { group = "androidx.navigation3", name = "navigation3-ui", version.ref = "navigation3" }
 androidx-lifecycle-viewmodel-navigation3 = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-navigation3", version.ref = "lifecycleRuntimeKtx" }
 kotlinx-serialization-json = { group = "org.jetbrains.kotlinx", name = "kotlinx-serialization-json", version.ref = "kotlinxSerialization" }
+androidx-compose-navigation3 = { group = "androidx.wear.compose", name = "compose-navigation3", version.ref = "composeNavigation3" }
 
 [plugins]
 android-application = { id = "com.android.application", version.ref = "agp" }

ChatApp/wear/build.gradle.kts

@@ -60,6 +60,7 @@ android {
 
 dependencies {
     implementation(project(":shared"))
+    implementation(libs.androidx.compose.navigation3)
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)

ChatApp/wear/src/main/kotlin/com/example/chatapp/wear/MainActivity.kt

@@ -19,14 +19,15 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateListOf
-import androidx.compose.runtime.remember
 import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
 import androidx.navigation3.runtime.NavKey
 import androidx.navigation3.runtime.entryProvider
+import androidx.navigation3.runtime.rememberNavBackStack
 import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator
 import androidx.navigation3.ui.NavDisplay
+import androidx.wear.compose.material3.AppScaffold
 import androidx.wear.compose.material3.MaterialTheme
+import androidx.wear.compose.navigation3.rememberSwipeDismissableSceneStrategy
 import com.example.chatapp.wear.uicomponents.WearAppFunctionsScreen
 import com.example.chatapp.wear.uicomponents.WearCallScreen
 import com.example.chatapp.wear.uicomponents.WearChatScreen
@@ -36,13 +37,17 @@ import kotlinx.serialization.Serializable
 
 @Serializable
 sealed interface Screen : NavKey {
-    @Serializable data object Recipients : Screen
+    @Serializable
+    data object Recipients : Screen
 
-    @Serializable data object Settings : Screen
+    @Serializable
+    data object Settings : Screen
 
-    @Serializable data class Chat(val recipientId: String) : Screen
+    @Serializable
+    data class Chat(val recipientId: String) : Screen
 
-    @Serializable data class Call(val recipientId: String) : Screen
+    @Serializable
+    data class Call(val recipientId: String) : Screen
 }
 
 @AndroidEntryPoint
@@ -57,45 +62,50 @@ class MainActivity : ComponentActivity() {
 
 @Composable
 fun WearApp() {
-    val backStack = remember { mutableStateListOf<Screen>(Screen.Recipients) }
+    val backStack = rememberNavBackStack(Screen.Recipients)
 
     MaterialTheme {
-        NavDisplay(
-            backStack = backStack,
-            onBack = {
-                if (backStack.size > 1) {
-                    backStack.removeAt(backStack.size - 1)
-                }
-            },
-            entryDecorators =
-                listOf(
-                    rememberSaveableStateHolderNavEntryDecorator(),
-                    rememberViewModelStoreNavEntryDecorator(),
-                ),
-            entryProvider =
-                entryProvider {
-                    entry<Screen.Recipients> {
-                        WearRecipientsScreen(
-                            onRecipientClick = { id -> backStack.add(Screen.Chat(id)) },
-                            onSettingsClick = { backStack.add(Screen.Settings) },
-                        )
-                    }
-                    entry<Screen.Settings> {
-                        WearAppFunctionsScreen()
-                    }
-                    entry<Screen.Chat> { key ->
-                        WearChatScreen(
-                            recipientId = key.recipientId,
-                            onCallClick = { backStack.add(Screen.Call(key.recipientId)) },
-                        )
-                    }
-                    entry<Screen.Call> { key ->
-                        WearCallScreen(
-                            recipientId = key.recipientId,
-                            onEndCall = { backStack.removeAt(backStack.size - 1) },
-                        )
+        AppScaffold {
+            val swipeDismissableSceneStrategy = rememberSwipeDismissableSceneStrategy<NavKey>()
+
+            NavDisplay(
+                backStack = backStack,
+                onBack = {
+                    if (backStack.size > 1) {
+                        backStack.removeAt(backStack.size - 1)
                     }
                 },
-        )
+                entryDecorators =
+                    listOf(
+                        rememberSaveableStateHolderNavEntryDecorator(),
+                        rememberViewModelStoreNavEntryDecorator(),
+                    ),
+                entryProvider =
+                    entryProvider<NavKey> {
+                        entry<Screen.Recipients> {
+                            WearRecipientsScreen(
+                                onRecipientClick = { id -> backStack.add(Screen.Chat(id)) },
+                                onSettingsClick = { backStack.add(Screen.Settings) },
+                            )
+                        }
+                        entry<Screen.Settings> {
+                            WearAppFunctionsScreen()
+                        }
+                        entry<Screen.Chat> { key ->
+                            WearChatScreen(
+                                recipientId = key.recipientId,
+                                onCallClick = { backStack.add(Screen.Call(key.recipientId)) },
+                            )
+                        }
+                        entry<Screen.Call> { key ->
+                            WearCallScreen(
+                                recipientId = key.recipientId,
+                                onEndCall = { backStack.removeAt(backStack.size - 1) },
+                            )
+                        }
+                    },
+                sceneStrategies = listOf(swipeDismissableSceneStrategy),
+            )
+        }
     }
 }

ChatApp/wear/src/main/kotlin/com/example/chatapp/wear/uicomponents/WearAppFunctionsScreen.kt

@@ -15,57 +15,72 @@
  */
 package com.example.chatapp.wear.uicomponents
 
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
-import androidx.wear.compose.foundation.lazy.ScalingLazyColumn
+import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
 import androidx.wear.compose.foundation.lazy.items
+import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
 import androidx.wear.compose.material3.ListHeader
 import androidx.wear.compose.material3.MaterialTheme
+import androidx.wear.compose.material3.ScreenScaffold
+import androidx.wear.compose.material3.SurfaceTransformation
 import androidx.wear.compose.material3.SwitchButton
 import androidx.wear.compose.material3.Text
+import androidx.wear.compose.material3.lazy.rememberTransformationSpec
+import androidx.wear.compose.material3.lazy.transformedHeight
 import com.example.chatapp.AppFunctionsViewModel
 
 @Composable
 fun WearAppFunctionsScreen(viewModel: AppFunctionsViewModel = hiltViewModel()) {
+    val transformationSpec = rememberTransformationSpec()
+    val scrollState = rememberTransformingLazyColumnState()
     val uiState by viewModel.uiState.collectAsStateWithLifecycle()
 
-    ScalingLazyColumn(
-        modifier = Modifier.fillMaxSize(),
-    ) {
-        item {
-            ListHeader {
-                Text("App Functions")
-            }
-        }
-
-        if (uiState.functions.isEmpty()) {
+    ScreenScaffold(
+        scrollState = scrollState,
+    ) { contentPadding ->
+        TransformingLazyColumn(
+            state = scrollState,
+            contentPadding = contentPadding,
+        ) {
             item {
-                Text(
-                    text = "No functions found.",
-                    style = MaterialTheme.typography.bodyMedium,
-                )
+                ListHeader(
+                    modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
+                    transformation = SurfaceTransformation(transformationSpec),
+                ) {
+                    Text("App Functions")
+                }
             }
-        } else {
-            items(uiState.functions) { function ->
-                SwitchButton(
-                    modifier = Modifier.fillMaxWidth(),
-                    checked = function.isEnabled,
-                    onCheckedChange = { enabled ->
-                        viewModel.toggleFunction(function.id, enabled)
-                    },
-                    label = {
-                        val shortName = function.id.substringAfterLast("#").substringAfterLast(".")
-                        Text(text = shortName)
-                    },
-                    secondaryLabel = {
-                        Text(text = function.description ?: function.id)
-                    },
-                )
+
+            if (uiState.functions.isEmpty()) {
+                item {
+                    Text(
+                        text = "No functions found.",
+                        style = MaterialTheme.typography.bodyMedium,
+                    )
+                }
+            } else {
+                items(uiState.functions) { function ->
+                    SwitchButton(
+                        transformation = SurfaceTransformation(transformationSpec),
+                        modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
+                        checked = function.isEnabled,
+                        onCheckedChange = { enabled ->
+                            viewModel.toggleFunction(function.id, enabled)
+                        },
+                        label = {
+                            val shortName = function.id.substringAfterLast("#").substringAfterLast(".")
+                            Text(text = shortName)
+                        },
+                        secondaryLabel = {
+                            Text(text = function.description ?: function.id)
+                        },
+                    )
+                }
             }
         }
     }

ChatApp/wear/src/main/kotlin/com/example/chatapp/wear/uicomponents/WearCallScreen.kt

@@ -31,6 +31,7 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.wear.compose.material3.Button
 import androidx.wear.compose.material3.ButtonDefaults
+import androidx.wear.compose.material3.ScreenScaffold
 import androidx.wear.compose.material3.Text
 import com.example.chatapp.ChatViewModel
 
@@ -52,23 +53,25 @@ fun WearCallScreen(
         viewModel.startCall()
     }
 
-    Column(
-        modifier = Modifier.fillMaxSize(),
-        horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center,
-    ) {
-        Text(text = "Calling...")
-        Spacer(modifier = Modifier.height(8.dp))
-        Text(text = activeCall?.name ?: viewModel.recipient.name)
-        Spacer(modifier = Modifier.height(16.dp))
-        Button(
-            onClick = {
-                viewModel.endCall()
-                onEndCall()
-            },
-            colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
+    ScreenScaffold {
+        Column(
+            modifier = Modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center,
         ) {
-            Text("End")
+            Text(text = "Calling...")
+            Spacer(modifier = Modifier.height(8.dp))
+            Text(text = activeCall?.name ?: viewModel.recipient.name)
+            Spacer(modifier = Modifier.height(16.dp))
+            Button(
+                onClick = {
+                    viewModel.endCall()
+                    onEndCall()
+                },
+                colors = ButtonDefaults.buttonColors(containerColor = Color.Red),
+            ) {
+                Text("End")
+            }
         }
     }
 }