Fix bottom padding for responsive() SLC (#1826)

* Fix bottom padding for SLC * Fix bottom padding for SLC * Fix bottom padding for SLC * Fix bottom padding for SLC * 🤖 reformat * Fix bottom padding for SLC * Fix bottom padding for SLC * 🤖 reformat * 🤖 Updates screenshots * Fix copyright warning * Add top padding guide * 🤖 reformat * 🤖 Updates screenshots * Update screenshots * 🤖 Updates screenshots * Fix * Fix * 🤖 reformat * 🤖 Updates screenshots --------- Co-authored-by: yschimke <yschimke@users.noreply.github.com>
google · Nov 22, 2023 · 1aa843a · 1aa843a
1 parent 61404ae
commit 1aa843a
Show file tree

Hide file tree

Showing 45 changed files with 255 additions and 59 deletions.
diff --git a/...e.android.horologist.composables_SectionedListTest_failedSection_secondPage.png b/...e.android.horologist.composables_SectionedListTest_failedSection_secondPage.png
diff --git a/...e.android.horologist.composables_SectionedListTest_loadedSection_secondPage.png b/...e.android.horologist.composables_SectionedListTest_loadedSection_secondPage.png
diff --git a/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt b/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt
@@ -165,44 +165,58 @@ public object ScalingLazyColumnDefaults {
                 val configuration = LocalConfiguration.current
                 val screenWidthDp = configuration.screenWidthDp.toFloat()
                 val screenHeightDp = configuration.screenHeightDp.toFloat()
-                val padding = screenWidthDp * horizontalPaddingPercent
-                val topPaddingDp: Dp = if (firstItemIsFullWidth && configuration.isScreenRound) {
-                    calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
-                } else {
-                    32.dp
-                }
 
-                val sizeRatio = ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
-                val presetRatio = 0f
+                return remember {
+                    val padding = screenWidthDp * horizontalPaddingPercent
+                    val topPaddingDp: Dp = if (firstItemIsFullWidth && configuration.isScreenRound) {
+                        calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
+                    } else {
+                        32.dp
+                    }
+                    val bottomPaddingDp: Dp = if (configuration.isScreenRound) {
+                        calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
+                    } else {
+                        0.dp
+                    }
+                    val contentPadding = PaddingValues(
+                        start = padding.dp,
+                        end = padding.dp,
+                        top = topPaddingDp,
+                        bottom = bottomPaddingDp,
+                    )
+
+                    val sizeRatio = ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
+                    val presetRatio = 0f
 
-                val minElementHeight = lerp(0.2f, 0.157f, sizeRatio)
-                val maxElementHeight = lerp(0.6f, 0.216f, sizeRatio).coerceAtLeast(minElementHeight)
-                val minTransitionArea = lerp(0.35f, lerp(0.35f, 0.393f, presetRatio), sizeRatio)
-                val maxTransitionArea = lerp(0.55f, lerp(0.55f, 0.593f, presetRatio), sizeRatio)
+                    val minElementHeight = lerp(0.2f, 0.157f, sizeRatio)
+                    val maxElementHeight = lerp(0.6f, 0.216f, sizeRatio).coerceAtLeast(minElementHeight)
+                    val minTransitionArea = lerp(0.35f, lerp(0.35f, 0.393f, presetRatio), sizeRatio)
+                    val maxTransitionArea = lerp(0.55f, lerp(0.55f, 0.593f, presetRatio), sizeRatio)
 
-                val scalingParams = ScalingLazyColumnDefaults.scalingParams(
-                    minElementHeight = minElementHeight,
-                    maxElementHeight = maxElementHeight,
-                    minTransitionArea = minTransitionArea,
-                    maxTransitionArea = maxTransitionArea,
-                )
+                    val scalingParams = ScalingLazyColumnDefaults.scalingParams(
+                        minElementHeight = minElementHeight,
+                        maxElementHeight = maxElementHeight,
+                        minTransitionArea = minTransitionArea,
+                        maxTransitionArea = maxTransitionArea,
+                    )
 
-                return remember {
                     val screenHeightPx =
                         with(density) { screenHeightDp.dp.roundToPx() }
                     val topPaddingPx = with(density) { topPaddingDp.roundToPx() }
                     val topScreenOffsetPx = screenHeightPx / 2 - topPaddingPx
 
+                    val initialScrollPosition = ScalingLazyColumnState.ScrollPosition(
+                        index = 0,
+                        offsetPx = topScreenOffsetPx,
+                    )
                     ScalingLazyColumnState(
-                        initialScrollPosition = ScalingLazyColumnState.ScrollPosition(
-                            index = 0,
-                            offsetPx = topScreenOffsetPx,
-                        ),
+                        initialScrollPosition = initialScrollPosition,
+                        autoCentering = null,
                         anchorType = ScalingLazyListAnchorType.ItemStart,
                         rotaryMode = RotaryMode.Scroll,
                         verticalArrangement = verticalArrangement,
                         horizontalAlignment = Alignment.CenterHorizontally,
-                        contentPadding = PaddingValues(horizontal = padding.dp),
+                        contentPadding = contentPadding,
                         scalingParams = scalingParams,
                     )
                 }

diff --git a/...ui.screens.browse_PlaylistDownloadBrowseScreenA11yScreenshotTest_secondPage.png b/...ui.screens.browse_PlaylistDownloadBrowseScreenA11yScreenshotTest_secondPage.png
diff --git a/sample/src/main/java/com/google/android/horologist/screensizes/ScalingLazyColumnDecoder.kt b/sample/src/main/java/com/google/android/horologist/screensizes/ScalingLazyColumnDecoder.kt
@@ -82,6 +82,7 @@ fun ScalingLazyColumnDecoder(factory: ScalingLazyColumnState.Factory) {
             with(density) { columnState.contentPadding.calculateLeftPadding(layoutDirection).toPx() }
         val rightPadding =
             with(density) { columnState.contentPadding.calculateRightPadding(layoutDirection).toPx() }
+        val topPadding = with(density) { columnState.contentPadding.calculateTopPadding().toPx() }
         val scalingParams = columnState.scalingParams
         Canvas(modifier = Modifier.fillMaxSize()) {
             drawLine(
@@ -156,6 +157,13 @@ fun ScalingLazyColumnDecoder(factory: ScalingLazyColumnState.Factory) {
                     size.height / 2 + 25,
                     paint,
                 )
+                if (topPadding > 0f) {
+                    drawLine(
+                        Color.Yellow,
+                        Offset(0f, topPadding),
+                        Offset(size.width, topPadding),
+                    )
+                }
             }
         }
     }

diff --git a/sample/src/test/kotlin/com/google/android/horologist/screensizes/MediaPlayerLibraryTest.kt b/sample/src/test/kotlin/com/google/android/horologist/screensizes/MediaPlayerLibraryTest.kt
@@ -42,7 +42,7 @@ import com.google.android.horologist.media.ui.state.model.DownloadMediaUiModel
 import com.google.android.horologist.media.ui.state.model.PlaylistUiModel
 import com.google.android.horologist.screenshots.FixedTimeSource
 
-class MediaPlayerLibraryTest(device: Device) : ScreenSizeTest(device = device, showTimeText = true) {
+class MediaPlayerLibraryTest(device: Device) : ScreenSizeTest(device = device, showTimeText = false) {
 
     @Composable
     override fun Content() {

diff --git a/...rc/test/kotlin/com/google/android/horologist/screensizes/ScalingLazyColumnDefaultsTest.kt b/...rc/test/kotlin/com/google/android/horologist/screensizes/ScalingLazyColumnDefaultsTest.kt
@@ -16,8 +16,22 @@
 
 package com.google.android.horologist.screensizes
 
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.wear.compose.material.AppCard
+import androidx.wear.compose.material.Text
+import com.google.android.horologist.composables.SectionedList
+import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults
+import com.google.android.horologist.compose.layout.ScalingLazyColumnState
+import com.google.android.horologist.compose.material.Title
 import com.google.android.horologist.compose.tools.Device
+import com.google.android.horologist.sample.R
+import com.google.android.horologist.sample.Screen
 import org.junit.Test
 
 class ScalingLazyColumnDefaultsTest(device: Device) :
@@ -37,4 +51,92 @@ class ScalingLazyColumnDefaultsTest(device: Device) :
         fun belowTimeText() {
             runTest { BelowTimeText() }
         }
+
+        @Test
+        fun standard_end() {
+            runTest {
+                val columnState = ScalingLazyColumnDefaults.scalingLazyColumnDefaults().create()
+
+                SampleMenu(columnState = columnState)
+
+                LaunchedEffect(Unit) {
+                    columnState.state.scrollToItem(100, 0)
+                }
+            }
+        }
+
+        @Test
+        fun responsive_end() {
+            runTest {
+                val columnState = ScalingLazyColumnDefaults.responsive().create()
+
+                SampleMenu(columnState = columnState)
+
+                LaunchedEffect(Unit) {
+                    columnState.state.scrollToItem(100, 0)
+                }
+            }
+        }
+
+        @Test
+        fun belowTimeText_end() {
+            runTest {
+                val columnState = ScalingLazyColumnDefaults.belowTimeText().create()
+
+                SampleMenu(columnState = columnState)
+
+                LaunchedEffect(Unit) {
+                    columnState.state.scrollToItem(100, 0)
+                }
+            }
+        }
+
+        @Composable
+        fun SampleMenu(columnState: ScalingLazyColumnState, modifier: Modifier = Modifier) {
+            SectionedList(
+                columnState = columnState,
+                modifier = modifier.fillMaxSize(),
+            ) {
+                section(
+                    listOf(
+                        Pair(
+                            R.string.sectionedlist_stateless_sections_menu,
+                            Screen.SectionedListStatelessScreen.route,
+                        ),
+                        Pair(
+                            R.string.sectionedlist_stateful_sections_menu,
+                            Screen.SectionedListStatefulScreen.route,
+                        ),
+                        Pair(
+                            R.string.sectionedlist_expandable_sections_menu,
+                            Screen.SectionedListExpandableScreen.route,
+                        ),
+                    ),
+                ) {
+                    header {
+                        Title(
+                            stringResource(R.string.sectionedlist_samples_title),
+                            Modifier.padding(vertical = 8.dp),
+                        )
+                    }
+
+                    loaded {
+                        AppCard(
+                            onClick = { },
+                            appName = {
+                                Text("App Name")
+                            },
+                            time = {
+                                Text("12:05")
+                            },
+                            title = {
+                                Text("Title")
+                            },
+                        ) {
+                            Text("Content\nContent\nContent")
+                        }
+                    }
+                }
+            }
+        }
     }
diff --git a/...ologist.screensizes_MediaPlayerLibraryTest_screenshot[0]_mobvoiticwatchpro5.png b/...ologist.screensizes_MediaPlayerLibraryTest_screenshot[0]_mobvoiticwatchpro5.png
diff --git a/...logist.screensizes_MediaPlayerLibraryTest_screenshot[1]_samsunggalaxywatch5.png b/...logist.screensizes_MediaPlayerLibraryTest_screenshot[1]_samsunggalaxywatch5.png
diff --git a/...orologist.screensizes_MediaPlayerLibraryTest_screenshot[3]_googlepixelwatch.png b/...orologist.screensizes_MediaPlayerLibraryTest_screenshot[3]_googlepixelwatch.png
diff --git a/...rologist.screensizes_MediaPlayerLibraryTest_screenshot[4]_genericsmallround.png b/...rologist.screensizes_MediaPlayerLibraryTest_screenshot[4]_genericsmallround.png
diff --git a/...rologist.screensizes_MediaPlayerLibraryTest_screenshot[5]_genericlargeround.png b/...rologist.screensizes_MediaPlayerLibraryTest_screenshot[5]_genericlargeround.png
diff --git a/...logist.screensizes_MediaPlayerLibraryTest_screenshot[6]_smalldevicebigfonts.png b/...logist.screensizes_MediaPlayerLibraryTest_screenshot[6]_smalldevicebigfonts.png
diff --git a/...gist.screensizes_MediaPlayerLibraryTest_screenshot[7]_largedevicesmallfonts.png b/...gist.screensizes_MediaPlayerLibraryTest_screenshot[7]_largedevicesmallfonts.png
diff --git a/...sizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[0]_mobvoiticwatchpro5.png b/...sizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[0]_mobvoiticwatchpro5.png
diff --git a/...izes_ScalingLazyColumnDefaultsTest_belowTimeText_end[1]_samsunggalaxywatch5.png b/...izes_ScalingLazyColumnDefaultsTest_belowTimeText_end[1]_samsunggalaxywatch5.png
diff --git a/...ScalingLazyColumnDefaultsTest_belowTimeText_end[2]_samsunggalaxywatch6large.png b/...ScalingLazyColumnDefaultsTest_belowTimeText_end[2]_samsunggalaxywatch6large.png
diff --git a/...ensizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[3]_googlepixelwatch.png b/...ensizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[3]_googlepixelwatch.png
diff --git a/...nsizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[4]_genericsmallround.png b/...nsizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[4]_genericsmallround.png
diff --git a/...nsizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[5]_genericlargeround.png b/...nsizes_ScalingLazyColumnDefaultsTest_belowTimeText_end[5]_genericlargeround.png
diff --git a/...izes_ScalingLazyColumnDefaultsTest_belowTimeText_end[6]_smalldevicebigfonts.png b/...izes_ScalingLazyColumnDefaultsTest_belowTimeText_end[6]_smalldevicebigfonts.png
diff --git a/...es_ScalingLazyColumnDefaultsTest_belowTimeText_end[7]_largedevicesmallfonts.png b/...es_ScalingLazyColumnDefaultsTest_belowTimeText_end[7]_largedevicesmallfonts.png
diff --git a/....screensizes_ScalingLazyColumnDefaultsTest_responsive[0]_mobvoiticwatchpro5.png b/....screensizes_ScalingLazyColumnDefaultsTest_responsive[0]_mobvoiticwatchpro5.png
diff --git a/...screensizes_ScalingLazyColumnDefaultsTest_responsive[1]_samsunggalaxywatch5.png b/...screensizes_ScalingLazyColumnDefaultsTest_responsive[1]_samsunggalaxywatch5.png
diff --git a/...st.screensizes_ScalingLazyColumnDefaultsTest_responsive[3]_googlepixelwatch.png b/...st.screensizes_ScalingLazyColumnDefaultsTest_responsive[3]_googlepixelwatch.png
diff --git a/...t.screensizes_ScalingLazyColumnDefaultsTest_responsive[4]_genericsmallround.png b/...t.screensizes_ScalingLazyColumnDefaultsTest_responsive[4]_genericsmallround.png
diff --git a/...t.screensizes_ScalingLazyColumnDefaultsTest_responsive[5]_genericlargeround.png b/...t.screensizes_ScalingLazyColumnDefaultsTest_responsive[5]_genericlargeround.png
diff --git a/...screensizes_ScalingLazyColumnDefaultsTest_responsive[6]_smalldevicebigfonts.png b/...screensizes_ScalingLazyColumnDefaultsTest_responsive[6]_smalldevicebigfonts.png
diff --git a/...reensizes_ScalingLazyColumnDefaultsTest_responsive[7]_largedevicesmallfonts.png b/...reensizes_ScalingLazyColumnDefaultsTest_responsive[7]_largedevicesmallfonts.png
diff --git a/...eensizes_ScalingLazyColumnDefaultsTest_responsive_end[0]_mobvoiticwatchpro5.png b/...eensizes_ScalingLazyColumnDefaultsTest_responsive_end[0]_mobvoiticwatchpro5.png
diff --git a/...ensizes_ScalingLazyColumnDefaultsTest_responsive_end[1]_samsunggalaxywatch5.png b/...ensizes_ScalingLazyColumnDefaultsTest_responsive_end[1]_samsunggalaxywatch5.png
diff --git a/...es_ScalingLazyColumnDefaultsTest_responsive_end[2]_samsunggalaxywatch6large.png b/...es_ScalingLazyColumnDefaultsTest_responsive_end[2]_samsunggalaxywatch6large.png
diff --git a/...creensizes_ScalingLazyColumnDefaultsTest_responsive_end[3]_googlepixelwatch.png b/...creensizes_ScalingLazyColumnDefaultsTest_responsive_end[3]_googlepixelwatch.png
diff --git a/...reensizes_ScalingLazyColumnDefaultsTest_responsive_end[4]_genericsmallround.png b/...reensizes_ScalingLazyColumnDefaultsTest_responsive_end[4]_genericsmallround.png
diff --git a/...reensizes_ScalingLazyColumnDefaultsTest_responsive_end[5]_genericlargeround.png b/...reensizes_ScalingLazyColumnDefaultsTest_responsive_end[5]_genericlargeround.png
diff --git a/...ensizes_ScalingLazyColumnDefaultsTest_responsive_end[6]_smalldevicebigfonts.png b/...ensizes_ScalingLazyColumnDefaultsTest_responsive_end[6]_smalldevicebigfonts.png
diff --git a/...sizes_ScalingLazyColumnDefaultsTest_responsive_end[7]_largedevicesmallfonts.png b/...sizes_ScalingLazyColumnDefaultsTest_responsive_end[7]_largedevicesmallfonts.png
diff --git a/...creensizes_ScalingLazyColumnDefaultsTest_standard_end[0]_mobvoiticwatchpro5.png b/...creensizes_ScalingLazyColumnDefaultsTest_standard_end[0]_mobvoiticwatchpro5.png