[0.5.x] Additional padding at end of list (#2045)

compose-layout/api/current.api

@@ -57,7 +57,7 @@ package com.google.android.horologist.compose.layout {
 
   public final class ScalingLazyColumnDefaults {
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory belowTimeText(optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode rotaryMode, optional boolean firstItemIsFullWidth, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional androidx.compose.ui.Alignment.Horizontal horizontalAlignment, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional float topPaddingDp);
-    method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory responsive(optional boolean firstItemIsFullWidth, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional float horizontalPaddingPercent, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode? rotaryMode, optional boolean hapticsEnabled, optional boolean reverseLayout, optional boolean userScrollEnabled);
+    method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory responsive(optional boolean firstItemIsFullWidth, optional float additionalPaddingAtBottom, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional float horizontalPaddingPercent, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode? rotaryMode, optional boolean hapticsEnabled, optional boolean reverseLayout, optional boolean userScrollEnabled);
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory scalingLazyColumnDefaults(optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode rotaryMode, optional int initialCenterIndex, optional int initialCenterOffset, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional androidx.compose.ui.Alignment.Horizontal horizontalAlignment, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional androidx.wear.compose.foundation.lazy.AutoCenteringParams? autoCentering, optional int anchorType, optional boolean hapticsEnabled, optional boolean reverseLayout);
     field public static final com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults INSTANCE;
   }

compose-layout/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt

@@ -139,6 +139,8 @@ public object ScalingLazyColumnDefaults {
      *
      * @param firstItemIsFullWidth set to false if the first item is small enough to fit at the top,
      * however it may be scaled.
+     * @param additionalPaddingAtBottom additional padding at end of content to avoid problem items
+     * clipping
      * @param verticalArrangement the ScalingLazyColumn verticalArrangement.
      * @param horizontalPaddingPercent the amount of horizontal padding as a percent.
      * @param rotaryMode the rotary handling, such as Fling or Snap.
@@ -149,6 +151,7 @@ public object ScalingLazyColumnDefaults {
     @ExperimentalHorologistApi
     public fun responsive(
         firstItemIsFullWidth: Boolean = true,
+        additionalPaddingAtBottom: Dp = 10.dp,
         verticalArrangement: Arrangement.Vertical =
             Arrangement.spacedBy(
                 space = 4.dp,
@@ -186,13 +189,17 @@ public object ScalingLazyColumnDefaults {
 
                 return remember {
                     val padding = screenWidthDp * horizontalPaddingPercent
-                    val topPaddingDp: Dp = if (firstItemIsFullWidth && configuration.isScreenRound) {
-                        calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
-                    } else {
-                        32.dp
-                    }
+                    val topPaddingDp: Dp =
+                        if (firstItemIsFullWidth && configuration.isScreenRound) {
+                            calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
+                        } else {
+                            32.dp
+                        }
                     val bottomPaddingDp: Dp = if (configuration.isScreenRound) {
-                        calculateVerticalOffsetForChip(screenWidthDp, horizontalPaddingPercent)
+                        calculateVerticalOffsetForChip(
+                            screenWidthDp,
+                            horizontalPaddingPercent,
+                        ) + additionalPaddingAtBottom
                     } else {
                         0.dp
                     }
@@ -203,11 +210,13 @@ public object ScalingLazyColumnDefaults {
                         bottom = bottomPaddingDp,
                     )
 
-                    val sizeRatio = ((screenWidthDp - 192) / (233 - 192).toFloat()).coerceIn(0f, 1.5f)
+                    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.472f, sizeRatio).coerceAtLeast(minElementHeight)
+                    val maxElementHeight =
+                        lerp(0.6f, 0.472f, 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)
 

compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt

@@ -131,7 +131,9 @@ public fun AlertContent(
     okButtonContentDescription: String = stringResource(android.R.string.ok),
     cancelButtonContentDescription: String = stringResource(android.R.string.cancel),
     state: ScalingLazyColumnState = rememberColumnState(
-        ScalingLazyColumnDefaults.responsive(),
+        ScalingLazyColumnDefaults.responsive(
+            additionalPaddingAtBottom = 0.dp,
+        ),
     ),
     showPositionIndicator: Boolean = true,
     content: (ScalingLazyListScope.() -> Unit)? = null,

compose-material/src/main/java/com/google/android/horologist/compose/material/Confirmation.kt

@@ -28,6 +28,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalAccessibilityManager
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
 import androidx.wear.compose.foundation.lazy.ScalingLazyListState
 import androidx.wear.compose.foundation.lazy.rememberScalingLazyListState
 import androidx.wear.compose.material.MaterialTheme
@@ -60,6 +61,7 @@ public fun Confirmation(
     columnState: ScalingLazyColumnState = rememberColumnState(
         ScalingLazyColumnDefaults.responsive(
             verticalArrangement = DialogDefaults.ConfirmationVerticalArrangement,
+            additionalPaddingAtBottom = 0.dp,
         ),
     ),
 ) {
@@ -103,6 +105,7 @@ public fun ConfirmationContent(
     columnState: ScalingLazyColumnState = rememberColumnState(
         ScalingLazyColumnDefaults.responsive(
             verticalArrangement = DialogDefaults.ConfirmationVerticalArrangement,
+            additionalPaddingAtBottom = 0.dp,
         ),
     ),
     showPositionIndicator: Boolean = true,

compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt

@@ -68,7 +68,12 @@ public fun ResponsiveDialogContent(
     okButtonContentDescription: String = stringResource(R.string.ok),
     cancelButtonContentDescription: String = stringResource(R.string.cancel),
     state: ScalingLazyColumnState =
-        rememberColumnState(responsive(firstItemIsFullWidth = icon == null)),
+        rememberColumnState(
+            responsive(
+                firstItemIsFullWidth = icon == null,
+                additionalPaddingAtBottom = 0.dp,
+            ),
+        ),
     showPositionIndicator: Boolean = true,
     content: (ScalingLazyListScope.() -> Unit)? = null,
 ) {

sample/src/test/kotlin/com/google/android/horologist/screensizes/DialogTest.kt

@@ -27,13 +27,15 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.Chip
 import androidx.wear.compose.material.ChipDefaults
 import androidx.wear.compose.material.Icon
 import androidx.wear.compose.material.LocalTextStyle
 import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 import androidx.wear.compose.material.dialog.Alert
+import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults
 import com.google.android.horologist.compose.layout.ScalingLazyColumnState
 import com.google.android.horologist.compose.layout.rememberColumnState
 import com.google.android.horologist.compose.material.AlertContent
@@ -102,7 +104,11 @@ class DialogTest(device: Device) : ScreenSizeTest(
 
             screenshotTestRule.takeScreenshot()
         }) {
-            columnState = rememberColumnState()
+            columnState = rememberColumnState(
+                ScalingLazyColumnDefaults.responsive(
+                    additionalPaddingAtBottom = 0.dp,
+                ),
+            )
 
             AlertContent(
                 title = "Turn on Bedtime mode?",
@@ -140,7 +146,11 @@ class DialogTest(device: Device) : ScreenSizeTest(
 
             screenshotTestRule.takeScreenshot()
         }) {
-            columnState = rememberColumnState()
+            columnState = rememberColumnState(
+                ScalingLazyColumnDefaults.responsive(
+                    additionalPaddingAtBottom = 0.dp,
+                ),
+            )
 
             AlertContent(
                 icon = {