Use 16.dp widget padding for text layouts

For textual layouts that don't have an icon or container use larger padding so that text isn't near the corners.

Author: shamalip

samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/text/data/FakeLongTextRespository.kt

@@ -77,7 +77,7 @@ class FakeLongTextRepository {
       ),
       LongTextLayoutData(
         key = "item 3",
-        text = "Tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci...",
+        text = "Tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci",
         caption = "Amet cursus"
       ),
       LongTextLayoutData(

samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/text/layout/LongTextLayout.kt

@@ -40,7 +40,7 @@ import androidx.glance.layout.padding
 import androidx.glance.text.Text
 import androidx.glance.text.TextStyle
 import com.example.platform.ui.appwidgets.glance.layout.text.layout.LongTextLayoutDimensions.captionFontSizeAndMaxLines
-import com.example.platform.ui.appwidgets.glance.layout.text.layout.LongTextLayoutDimensions.contentPadding
+import com.example.platform.ui.appwidgets.glance.layout.text.layout.LongTextLayoutDimensions.widgetPadding
 import com.example.platform.ui.appwidgets.glance.layout.text.layout.LongTextLayoutDimensions.primaryTextFontSizeAndMaxLines
 import com.example.platform.ui.appwidgets.glance.layout.utils.FontUtils.calculateFontSizeAndMaxLines
 
@@ -78,15 +78,16 @@ fun LongTextLayout(
   val scaffoldTopPadding = if (showTitleBar) {
     0.dp
   } else {
-    contentPadding
+    widgetPadding
   }
 
   Scaffold(
     backgroundColor = GlanceTheme.colors.widgetBackground,
+    horizontalPadding = widgetPadding,
     modifier = GlanceModifier
       .maybeClickable(action)
       .padding(
-        bottom = contentPadding,
+        bottom = widgetPadding,
         top = scaffoldTopPadding
       ),
     titleBar = {
@@ -217,7 +218,7 @@ data class LongTextLayoutData(
 )
 
 private object LongTextLayoutDimensions {
-  val contentPadding = 12.dp
+  val widgetPadding = 16.dp
   private val titleBarHeight: Dp
     @Composable get() = if (LongTextLayoutSize.fromLocalSize() == LongTextLayoutSize.XSmall) {
       0.dp
@@ -231,8 +232,8 @@ private object LongTextLayoutDimensions {
       val size = LocalSize.current
 
       return DpSize(
-        width = size.width - (2 * contentPadding),
-        height = size.height - contentPadding - titleBarHeight
+        width = size.width - (2 * widgetPadding),
+        height = size.height - widgetPadding - titleBarHeight
       )
     }
 
@@ -252,7 +253,7 @@ private object LongTextLayoutDimensions {
     // Primary text and caption share 70:30 height within the area available for texts.
     val availableHeightForPrimaryText = Dp(0.70f * contentSize.height.value)
     // In this layout, texts take up entire horizontal space except the paddings on the sides.
-    val availableWidthForPrimaryText = size.width - (contentPadding * 2)
+    val availableWidthForPrimaryText = size.width - (widgetPadding * 2)
 
     return calculateFontSizeAndMaxLines(
       context = LocalContext.current,

samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/text/layout/TextWithImageLayout.kt

@@ -121,6 +121,7 @@ fun TextWithImageLayout(
 
   Scaffold(
     titleBar = titleBar,
+    horizontalPadding = widgetPadding,
     backgroundColor = GlanceTheme.colors.widgetBackground,
     modifier = GlanceModifier
       .maybeClickable(action)
@@ -134,14 +135,28 @@ fun TextWithImageLayout(
       else -> {
         when (layoutSize) {
           VerticalSmall -> VerticalContent(
+            data = data,
+            showImage = true,
+            showSecondaryText = false
+          )
+
+          VerticalLarge -> VerticalContent(
+            data = data,
+            showImage = true,
+            showSecondaryText = true
+          )
+
+          HorizontalSmall -> HorizontalContent(
             data = data,
             showImage = false,
             showSecondaryText = false
           )
 
-          VerticalLarge -> VerticalContent(data = data, showImage = true, showSecondaryText = true)
-          HorizontalSmall -> HorizontalContent(data = data, showImage = false)
-          HorizontalLarge -> HorizontalContent(data = data, showImage = true)
+          HorizontalLarge -> HorizontalContent(
+            data = data,
+            showImage = true,
+            showSecondaryText = true
+          )
         }
       }
     }
@@ -164,22 +179,27 @@ private fun NoDataContent() {
 }
 
 @Composable
-private fun HorizontalContent(data: TextWithImageData, showImage: Boolean) {
+private fun HorizontalContent(
+  data: TextWithImageData,
+  showImage: Boolean,
+  showSecondaryText: Boolean,
+) {
   val contentWidth = contentSize.width - contentSpacing
-
+  val contentHeight = contentSize.height - (2 * verticalTextsSpacing)
   Row(
     verticalAlignment = Alignment.Vertical.Bottom,
     horizontalAlignment = Alignment.Horizontal.Start,
     modifier = GlanceModifier.fillMaxSize()
   ) {
     TextStack(
       data = data.textData,
+      showSecondaryText = showSecondaryText,
       modifier = GlanceModifier.fillMaxHeight().defaultWeight(),
       availableSize = DpSize(
         // Use 40% of available width for text area if showing image on side.
         width = (0.4 * contentWidth).takeIf { showImage } ?: contentWidth,
         // Use 80% of vertical space for text area.
-        height = 0.80 * (contentSize.height - (2 * verticalTextsSpacing))
+        height = (0.80 * contentHeight).takeIf { showImage } ?: contentHeight
       )
     )
     if (showImage) {
@@ -231,7 +251,7 @@ private fun TextStack(
   data: TextData,
   modifier: GlanceModifier,
   availableSize: DpSize,
-  showSecondaryText: Boolean = true,
+  showSecondaryText: Boolean,
 ) {
   val (primaryTextFontSize, primaryTextMaxLines) = primaryTextFontValues(
     text = data.primary,
@@ -343,10 +363,10 @@ data class ImageData(
 )
 
 private enum class TextWithImageLayoutSize {
-  // No title bar
+  // No title bar or secondary text
   HorizontalSmall,
 
-  // No title bar
+  // No title bar or secondary text
   VerticalSmall,
 
   // Text with Image on the side
@@ -361,7 +381,7 @@ private enum class TextWithImageLayoutSize {
       val size = LocalSize.current
       val isTall = size.height >= size.width
 
-      return if (isTall && size.height <= 165.dp) {
+      return if (isTall && size.height <= 300.dp) {
         VerticalSmall
       } else if (isTall) {
         VerticalLarge
@@ -401,8 +421,8 @@ private object TextWithImageLayoutTextStyles {
     showSecondaryText: Boolean,
   ): Pair<TextUnit, Int> {
     val availableHeight = if (showSecondaryText) {
-      // Within the text area, 35% space is used by primary text.
-      0.35 * availableSize.height
+      // Within the text area, 30% space is used by primary text.
+      0.30 * availableSize.height
     } else {
       0.60 * availableSize.height
     }
@@ -423,8 +443,8 @@ private object TextWithImageLayoutTextStyles {
       context = LocalContext.current,
       text = text,
       availableWidth = availableSize.width,
-      // Within the text area, 35% space is used by secondary text.
-      availableHeight = 0.35 * availableSize.height,
+      // Within the text area, 25% space is used by secondary text.
+      availableHeight = 0.25 * availableSize.height,
       maxFontSize = 24.sp,
       minFontSize = 12.sp
     )
@@ -433,7 +453,7 @@ private object TextWithImageLayoutTextStyles {
 
 private object TextWithImageLayoutDimensions {
   /** Padding that visually appears between the widget outline and anything inside. */
-  val widgetPadding = 12.dp
+  val widgetPadding = 16.dp
 
   /** Corner radius to be applied to an image. */
   val pictureRadius = 16.dp