Add Wear OS counter screen with Wearable sync

app/src/main/java/com/wearconnectivityexample/ui/WearApp.kt

@@ -9,6 +9,7 @@ import androidx.navigation.navArgument
 import com.example.mywearosapp.ui.screens.ChatDetailScreen
 import com.example.wearconnectivityexample.ui.screens.RecordVoiceScreen
 import com.wearconnectivityexample.ui.screens.ChatListScreen
+import com.wearconnectivityexample.ui.screens.CounterScreen
 
 @Composable
 fun WearApp() {
@@ -22,7 +23,8 @@ fun WearApp() {
             ChatListScreen(
                 onChatSelected = { phoneNumber ->
                     navController.navigate("chatDetail/$phoneNumber")
-                }
+                },
+                onCounterSelected = { navController.navigate("counter") }
             )
         }
         composable(
@@ -43,5 +45,8 @@ fun WearApp() {
                 }
             )
         }
+        composable("counter") {
+            CounterScreen()
+        }
     }
 }

app/src/main/java/com/wearconnectivityexample/ui/screens/ChatListScreen.kt

@@ -27,7 +27,8 @@ import androidx.wear.compose.material.ButtonDefaults
 
 @Composable
 fun ChatListScreen(
-    onChatSelected: (String) -> Unit
+    onChatSelected: (String) -> Unit,
+    onCounterSelected: () -> Unit
 ) {
     val listState = rememberScalingLazyListState()
 
@@ -42,6 +43,17 @@ fun ChatListScreen(
             minTransitionArea = 0.40f,
         )
     ) {
+        item {
+            Chip(
+                onClick = onCounterSelected,
+                label = { Text(text = "Counter") },
+                colors = ChipDefaults.primaryChipColors(
+                    backgroundColor = Color(0xFF3C3C3C),
+                    contentColor = Color.White
+                ),
+                modifier = Modifier.fillMaxWidth()
+            )
+        }
         items(chatList.size) { index ->
             when (val item = chatList[index]) {
                 "START_CHAT" -> {

app/src/main/java/com/wearconnectivityexample/ui/screens/CounterScreen.kt

@@ -0,0 +1,71 @@
+package com.wearconnectivityexample.ui.screens
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.unit.dp
+import androidx.wear.compose.material.Button
+import androidx.wear.compose.material.Text
+import com.google.android.gms.wearable.MessageClient
+import com.google.android.gms.wearable.Wearable
+import org.json.JSONObject
+
+@Composable
+fun CounterScreen() {
+    val context = LocalContext.current
+    var count by remember { mutableStateOf(0) }
+    val messageClient = remember { Wearable.getMessageClient(context) }
+    val nodeClient = remember { Wearable.getNodeClient(context) }
+
+    fun sendCounter(value: Int) {
+        val json = JSONObject().apply {
+            put("event", "counter")
+            put("value", value)
+        }
+        nodeClient.connectedNodes.addOnSuccessListener { nodes ->
+            nodes.forEach { node ->
+                messageClient.sendMessage(node.id, json.toString(), null)
+            }
+        }
+    }
+
+    DisposableEffect(Unit) {
+        val listener = MessageClient.OnMessageReceivedListener { event ->
+            try {
+                val json = JSONObject(event.path)
+                if (json.optString("event") == "counter") {
+                    count = json.optInt("value", count)
+                }
+            } catch (_: Exception) {
+            }
+        }
+        messageClient.addListener(listener)
+        onDispose { messageClient.removeListener(listener) }
+    }
+
+    Column(
+        modifier = Modifier.fillMaxSize(),
+        verticalArrangement = Arrangement.Center,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        Text(text = count.toString())
+        Spacer(modifier = Modifier.height(8.dp))
+        Button(onClick = {
+            count += 1
+            sendCounter(count)
+        }) {
+            Text("Increment")
+        }
+    }
+}