Wear: enhance responsive padding

Author: cliuff

gradle/libs.versions.toml

@@ -41,7 +41,8 @@ androidxDocumentFile = "1.1.0"
 # This dependency is for the Wear UI Library,
 # which has classes that exemplify best practices
 androidxWear = "1.3.0"
-androidxWearCompose = "1.5.0-rc01"
+androidxWearCompose = "1.5.0-rc02"
+googleHorologist = "0.7.15"
 
 googleTruth = "1.1.3"
 googleMaterialComponents = "1.13.0-alpha13"
@@ -175,6 +176,8 @@ androidxWearComposeMaterial3 = { module = "androidx.wear.compose:compose-materia
 androidxWearComposeFundation = { module = "androidx.wear.compose:compose-foundation", version.ref = "androidxWearCompose" }
 # Wear OS preview annotations
 androidxWearComposeUiTooling = { module = "androidx.wear.compose:compose-ui-tooling", version.ref = "androidxWearCompose" }
+google-horologist-layout = { module = "com.google.android.horologist:horologist-compose-layout", version.ref = "googleHorologist" }
+google-horologist-material = { module = "com.google.android.horologist:horologist-compose-material", version.ref = "googleHorologist" }
 # Ambient mode support is provided by this dependency
 googleWearable = { module = "com.google.android.wearable:wearable", version.ref = "googleWearable" }
 

wearable/build.gradle.kts

@@ -136,6 +136,7 @@ dependencies {
         libs.androidxWearComposeUiTooling,
         libs.androidxWearComposeFundation,
         libs.androidxWearComposeMaterial3,
+        libs.google.horologist.layout,
     ).forEach { implementation(it) }
 
     debugImplementation(libs.androidxComposeUiTooling)

wearable/src/main/AndroidManifest.xml

@@ -20,6 +20,9 @@
 
     <uses-feature android:name="android.hardware.type.watch" />
 
+    <!-- use rememberResponsiveColumnPadding() with API 25 -->
+    <uses-sdk tools:overrideLibrary="com.google.android.horologist.compose.layout" />
+
     <application
         android:name=".MainApplication"
         android:allowBackup="true"

wearable/src/main/kotlin/io/cliuff/boundo/wear/ui/list/AppList.kt

@@ -28,6 +28,8 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
 import androidx.wear.compose.material3.CircularProgressIndicator
 import androidx.wear.compose.material3.ScreenScaffold
+import com.google.android.horologist.compose.layout.ColumnItemType
+import com.google.android.horologist.compose.layout.rememberResponsiveColumnPadding
 
 @Composable
 fun AppList() {
@@ -39,10 +41,15 @@ fun AppList() {
 
     val appList by viewModel.appListState.collectAsStateWithLifecycle()
     val columnState = rememberTransformingLazyColumnState()
+    val contentPadding = rememberResponsiveColumnPadding(
+        first = ColumnItemType.ListHeader,
+        last = ColumnItemType.Card,
+    )
 
     ScreenScaffold(
         modifier = Modifier.fillMaxSize(),
         scrollState = columnState,
+        contentPadding = contentPadding,
     ) { innerPadding ->
 
         LazyAppGrid(

wearable/src/main/kotlin/io/cliuff/boundo/wear/ui/list/ArtItems.kt

@@ -17,6 +17,7 @@
 package io.cliuff.boundo.wear.ui.list
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -91,10 +92,11 @@ private fun ArtItemContainer(
     transformation: SurfaceTransformation? = null,
     content: @Composable () -> Unit,
 ) {
+    // todo replace Card with M3E Chip
+    Box(modifier = modifier.heightIn(max = 50.dp)) {
     Card(
-        modifier = modifier,
         onClick = onClick,
-        shape = MaterialTheme.shapes.medium,
+        shape = CircleShape,
         contentPadding = PaddingValues.Zero,
         transformation = transformation,
     ) {
@@ -104,6 +106,7 @@ private fun ArtItemContainer(
             content = { content() }
         )
     }
+    }
 }
 
 @Composable
@@ -133,7 +136,7 @@ private fun ArtItemContent(
                 lineHeight = 14.sp,
                 fontWeight = FontWeight.Medium,
                 overflow = TextOverflow.Ellipsis,
-                maxLines = 2,
+                maxLines = 1,
             )
             if (time != null) {
                 Text(
@@ -182,8 +185,20 @@ fun AppIcon(modifier: Modifier = Modifier, iconInfo: PackageInfo?) {
 @Composable
 private fun ArtItemPreview() {
     PreviewAppTheme {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.CenterStart) {
-            ArtItemContainer(modifier = Modifier.padding(horizontal = 12.dp), onClick = {}) {
+        Column(
+            modifier = Modifier.fillMaxSize().padding(horizontal = 12.dp),
+            verticalArrangement = Arrangement.spacedBy(4.dp, Alignment.CenterVertically)
+        ) {
+            ArtItemContainer(onClick = {}) {
+                ArtItemContent(
+                    name = "Meta App",
+                    time = "0 minutes ago",
+                    apiText = "16",
+                    apiColor = MaterialTheme.colorScheme.onSurface,
+                    iconInfo = null,
+                )
+            }
+            ArtItemContainer(onClick = {}) {
                 ArtItemContent(
                     name = "Boundo Meta App",
                     time = "3 hours ago",

wearable/src/main/kotlin/io/cliuff/boundo/wear/ui/list/LazyAppGrid.kt

@@ -19,13 +19,17 @@ package io.cliuff.boundo.wear.ui.list
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
 import androidx.wear.compose.foundation.lazy.TransformingLazyColumnState
 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.SurfaceTransformation
+import androidx.wear.compose.material3.Text
 import androidx.wear.compose.material3.lazy.rememberTransformationSpec
 import androidx.wear.compose.material3.lazy.transformedHeight
+import io.cliuff.boundo.wear.R
 import io.cliuff.boundo.wear.model.ApiViewingApp
 
 @Composable
@@ -34,10 +38,19 @@ internal fun LazyAppGrid(
     columnState: TransformingLazyColumnState = rememberTransformingLazyColumnState(),
     contentPadding: PaddingValues = PaddingValues.Zero,
 ) {
-//    val contentPadding = rememberResponsiveColumnPadding()
     val transSpec = rememberTransformationSpec()
 
     TransformingLazyColumn(state = columnState, contentPadding = contentPadding) {
+
+        item(key = "@list.header", contentType = "Header") {
+            ListHeader(
+                modifier = Modifier.transformedHeight(this, transSpec),
+                transformation = SurfaceTransformation(transSpec),
+            ) {
+                Text(stringResource(R.string.art_list_hrader))
+            }
+        }
+
         items(apps, key = { app -> app.packageName }, contentType = { "App" }) { app ->
             ArtItem(
                 modifier = Modifier

wearable/src/main/res/values/strings.xml

@@ -3,4 +3,5 @@
     <string name="apiViewing">App API</string>
     <string name="avPrefIncludeDisabled">Include disabled apps</string>
     <string name="avPrefSweet">Show desserts</string>
+    <string name="art_list_hrader">Installed Apps</string>
 </resources>