[Wear]Updates to latest Compose and bump target SDK

Jetcaster/gradle/libs.versions.toml

@@ -24,8 +24,8 @@ androidx-test-ext-junit = "1.2.1"
 androidx-test-ext-truth = "1.6.0"
 androidx-tv-foundation = "1.0.0-alpha12"
 androidx-tv-material = "1.0.0"
-androidx-wear-compose-material3 = "1.5.1"
-androidx-wear-compose = "1.5.0"
+androidx-wear-compose-material3 = "1.6.2"
+androidx-wear-compose = "1.6.2"
 androidx-window = "1.4.0"
 androidxHiltNavigationCompose = "1.2.0"
 androix-test-uiautomator = "2.3.0"

Jetcaster/wear/build.gradle

@@ -23,14 +23,14 @@ plugins {
 }
 
 android {
-    compileSdk 35
+    compileSdk 37
 
     namespace "com.example.jetcaster"
 
     defaultConfig {
         applicationId "com.example.jetcaster"
         minSdk 26
-        targetSdk 34
+        targetSdk 37
         versionCode 1
         versionName "1.0"
     }
@@ -108,9 +108,6 @@ dependencies {
     implementation(libs.androidx.media3.session)
     implementation libs.androidx.media3.common.ktx
 
-    // Horologist for correct Compose layout
-    implementation libs.horologist.compose.layout
-
     //Horologist Media toolkit
     implementation libs.horologist.media.ui
     implementation libs.horologist.media.uimaterial3
@@ -153,7 +150,6 @@ dependencies {
     testImplementation libs.roborazzi
     testImplementation libs.roborazzi.compose
     testImplementation libs.roborazzi.rule
-    testImplementation(libs.horologist.roboscreenshots)
 
     androidTestImplementation libs.androidx.test.ext.junit
     androidTestImplementation libs.androidx.test.espresso.core

Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt

@@ -34,15 +34,14 @@ import androidx.wear.compose.material3.AppScaffold
 import androidx.wear.compose.material3.ButtonDefaults
 import androidx.wear.compose.material3.FilledTonalButton
 import androidx.wear.compose.material3.ScreenScaffold
+import androidx.wear.compose.material3.SurfaceTransformation
 import androidx.wear.compose.material3.Text
 import androidx.wear.compose.ui.tooling.preview.WearPreviewDevices
 import androidx.wear.compose.ui.tooling.preview.WearPreviewFontScales
 import coil.compose.AsyncImage
 import com.example.jetcaster.R
 import com.example.jetcaster.core.player.model.PlayerEpisode
 import com.example.jetcaster.ui.preview.WearPreviewEpisodes
-import com.google.android.horologist.compose.layout.ColumnItemType
-import com.google.android.horologist.compose.layout.rememberResponsiveColumnPadding
 import java.time.format.DateTimeFormatter
 import java.time.format.FormatStyle
 
@@ -52,6 +51,7 @@ fun MediaContent(
     onItemClick: (PlayerEpisode) -> Unit,
     modifier: Modifier = Modifier,
     episodeArtworkPlaceholder: Painter = painterResource(id = R.drawable.music),
+    transformation: SurfaceTransformation? = null,
 ) {
     val mediaTitle = episode.title
     val duration = episode.duration
@@ -98,10 +98,10 @@ fun MediaContent(
                         ButtonDefaults.LargeIconSize,
                     )
                     .clip(CircleShape),
-
             )
         },
         modifier = modifier.fillMaxWidth(),
+        transformation = transformation,
     )
 }
 
@@ -114,11 +114,7 @@ fun MediaContentPreview(
     modifier: Modifier = Modifier,
 ) {
     AppScaffold(modifier = modifier) {
-        val contentPadding = rememberResponsiveColumnPadding(
-            first = ColumnItemType.Button,
-        )
-
-        ScreenScaffold(contentPadding = contentPadding) {
+        ScreenScaffold { contentPadding ->
             Box(
                 modifier = Modifier
                     .fillMaxWidth()

Jetcaster/wear/src/main/java/com/example/jetcaster/ui/episode/EpisodeScreen.kt

@@ -37,18 +37,23 @@ import androidx.wear.compose.foundation.lazy.TransformingLazyColumnScope
 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.material.ExperimentalWearMaterialApi
 import androidx.wear.compose.material3.AlertDialog
+import androidx.wear.compose.material3.ButtonDefaults
 import androidx.wear.compose.material3.ButtonGroup
 import androidx.wear.compose.material3.FilledIconButton
 import androidx.wear.compose.material3.Icon
 import androidx.wear.compose.material3.IconButtonShapes
 import androidx.wear.compose.material3.ListHeader
+import androidx.wear.compose.material3.ListHeaderDefaults
 import androidx.wear.compose.material3.LocalContentColor
 import androidx.wear.compose.material3.MaterialTheme
 import androidx.wear.compose.material3.PlaceholderState
 import androidx.wear.compose.material3.ScreenScaffold
+import androidx.wear.compose.material3.SurfaceTransformation
 import androidx.wear.compose.material3.Text
+import androidx.wear.compose.material3.lazy.TransformationSpec
+import androidx.wear.compose.material3.lazy.rememberTransformationSpec
+import androidx.wear.compose.material3.lazy.transformedHeight
 import androidx.wear.compose.material3.placeholder
 import androidx.wear.compose.material3.placeholderShimmer
 import androidx.wear.compose.material3.rememberPlaceholderState
@@ -60,11 +65,7 @@ import com.example.jetcaster.core.player.model.toPlayerEpisode
 import com.example.jetcaster.designsystem.component.HtmlTextContainer
 import com.example.jetcaster.ui.components.MediumDateFormatter
 import com.example.jetcaster.ui.preview.WearPreviewEpisodes
-import com.google.android.horologist.compose.layout.ColumnItemType
-import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.listTextPadding
-import com.google.android.horologist.compose.layout.rememberResponsiveColumnPadding
 
-@OptIn(ExperimentalWearMaterialApi::class)
 @Composable
 fun EpisodeScreen(
     onPlayButtonClick: () -> Unit,
@@ -96,15 +97,9 @@ fun EpisodeScreen(
     onDismiss: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val contentPadding = rememberResponsiveColumnPadding(
-        first = ColumnItemType.ListHeader,
-        last = ColumnItemType.Button,
-    )
-
     val columnState = rememberTransformingLazyColumnState()
     ScreenScaffold(
         scrollState = columnState,
-        contentPadding = contentPadding,
         modifier = modifier.placeholderShimmer(placeholderState),
     ) { contentPadding ->
         when (uiState) {
@@ -159,13 +154,23 @@ fun EpisodeScreenLoaded(
     placeholderState: PlaceholderState,
     modifier: Modifier = Modifier,
 ) {
+    val transformationSpec = rememberTransformationSpec()
     TransformingLazyColumn(
         modifier = modifier,
         state = columnState,
         contentPadding = contentPadding,
     ) {
         item {
-            ListHeader {
+            ListHeader(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .minimumVerticalContentPadding(
+                        ListHeaderDefaults.minimumTopListContentPadding,
+                        ListHeaderDefaults.minimumBottomListContentPadding,
+                    )
+                    .transformedHeight(this, transformationSpec),
+                transformation = SurfaceTransformation(transformationSpec),
+            ) {
                 Text(
                     text = title,
                     maxLines = 1,
@@ -182,11 +187,16 @@ fun EpisodeScreenLoaded(
                 onPlayEpisode = onPlayEpisode,
                 onAddToQueue = onAddToQueue,
                 placeholderState = placeholderState,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding)
+                    .transformedHeight(this, transformationSpec),
             )
         }
         if (!placeholderState.isVisible) {
             episodeInfoContent(
                 episode = episode,
+                transformationSpec = transformationSpec,
             )
         }
     }
@@ -205,7 +215,7 @@ fun LoadedButtonsContent(
     val playInteractionSource = remember { MutableInteractionSource() }
     val addToQueueInteractionSource = remember { MutableInteractionSource() }
 
-    ButtonGroup(modifier.fillMaxWidth().padding(bottom = 16.dp)) {
+    ButtonGroup(modifier.padding(bottom = 16.dp)) {
 
         FilledIconButton(
             onClick = {
@@ -243,7 +253,7 @@ fun LoadedButtonsContent(
     }
 }
 
-private fun TransformingLazyColumnScope.episodeInfoContent(episode: PlayerEpisode) {
+private fun TransformingLazyColumnScope.episodeInfoContent(episode: PlayerEpisode, transformationSpec: TransformationSpec) {
     val author = episode.author
     val duration = episode.duration
     val published = episode.published
@@ -256,6 +266,7 @@ private fun TransformingLazyColumnScope.episodeInfoContent(episode: PlayerEpisod
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
                 style = MaterialTheme.typography.bodyMedium,
+                modifier = Modifier.transformedHeight(this, transformationSpec),
             )
         }
     }
@@ -279,7 +290,8 @@ private fun TransformingLazyColumnScope.episodeInfoContent(episode: PlayerEpisod
             overflow = TextOverflow.Ellipsis,
             style = MaterialTheme.typography.bodySmall,
             modifier = Modifier
-                .padding(horizontal = 8.dp),
+                .padding(horizontal = 8.dp)
+                .transformedHeight(this, transformationSpec),
         )
     }
     if (summary != null) {
@@ -290,7 +302,9 @@ private fun TransformingLazyColumnScope.episodeInfoContent(episode: PlayerEpisod
                     text = it,
                     style = MaterialTheme.typography.bodySmall,
                     color = LocalContentColor.current,
-                    modifier = Modifier.listTextPadding(),
+                    modifier = Modifier
+                        .padding(horizontal = 8.dp)
+                        .transformedHeight(this, transformationSpec),
                 )
             }
         }
@@ -319,11 +333,6 @@ fun EpisodeScreenLoadingPreview(
     @PreviewParameter(WearPreviewEpisodes::class)
     episode: PlayerEpisode,
 ) {
-    val contentPadding = rememberResponsiveColumnPadding(
-        first = ColumnItemType.ListHeader,
-        last = ColumnItemType.Button,
-    )
-
     val columnState = rememberTransformingLazyColumnState()
     EpisodeScreenLoaded(
         title = episode.title,
@@ -332,7 +341,7 @@ fun EpisodeScreenLoadingPreview(
         onPlayEpisode = { },
         onAddToQueue = { },
         columnState = columnState,
-        contentPadding = contentPadding,
+        contentPadding = PaddingValues(),
         placeholderState = rememberPlaceholderState(isVisible = true),
     )
 }
@@ -345,19 +354,14 @@ fun EpisodeScreenLoadedPreview(
     episode: PlayerEpisode,
 ) {
     val columnState = rememberTransformingLazyColumnState()
-    val contentPadding = rememberResponsiveColumnPadding(
-        first = ColumnItemType.ListHeader,
-        last = ColumnItemType.Button,
-    )
-
     EpisodeScreenLoaded(
         title = episode.title,
         episode = episode,
         onPlayButtonClick = { },
         onPlayEpisode = { },
         onAddToQueue = { },
         columnState = columnState,
-        contentPadding = contentPadding,
+        contentPadding = PaddingValues(),
         placeholderState = rememberPlaceholderState(isVisible = false),
     )
 }