Update Glance weather widget to use Scaffold.

- The Scaffold component in glance handles the background color, widget radius for you.
- For the inner content, calculate widget radius based on the padding and system radius.

Author: shamalip

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

@@ -17,17 +17,15 @@
 package com.example.platform.ui.appwidgets.glance
 
 
-import android.content.res.Resources
 import android.os.Build
 import androidx.annotation.StringRes
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.glance.GlanceModifier
-import androidx.glance.GlanceTheme
 import androidx.glance.LocalContext
-import androidx.glance.appwidget.appWidgetBackground
+import androidx.glance.appwidget.components.Scaffold
 import androidx.glance.appwidget.cornerRadius
-import androidx.glance.background
 import androidx.glance.layout.Alignment
 import androidx.glance.layout.Box
 import androidx.glance.layout.Column
@@ -36,25 +34,35 @@ import androidx.glance.layout.fillMaxSize
 import androidx.glance.layout.padding
 
 /**
- * Provide a Box composable using the system parameters for app widgets background with rounded
- * corners and background color.
+ * Provide a Box composable that be used as app widget's background
+ *
+ * Uses the Scaffold component to achieve the recommended background color and rounded corners for
+ * the widget.
  */
 @Composable
 fun AppWidgetBox(
     modifier: GlanceModifier = GlanceModifier,
     contentAlignment: Alignment = Alignment.TopStart,
     content: @Composable () -> Unit,
 ) {
-    Box(
-        modifier = GlanceModifier.appWidgetBackgroundModifier().then(modifier),
-        contentAlignment = contentAlignment,
-        content = content,
-    )
+    Scaffold(
+        modifier = GlanceModifier
+            .padding(vertical = widgetPadding)
+    ) {
+        Box(
+            modifier = modifier.fillMaxSize(),
+            contentAlignment = contentAlignment,
+        ) {
+            content()
+        }
+    }
 }
 
 /**
- * Provide a Column composable using the system parameters for app widgets background with rounded
- * corners and background color.
+ * Provide a Column composable that be used as app widget's background
+ *
+ * Uses the Scaffold component to achieve the recommended background color and rounded corners for
+ * the widget.
  */
 @Composable
 fun AppWidgetColumn(
@@ -63,40 +71,41 @@ fun AppWidgetColumn(
     horizontalAlignment: Alignment.Horizontal = Alignment.Start,
     content: @Composable ColumnScope.() -> Unit,
 ) {
-    Column(
-        modifier = GlanceModifier.appWidgetBackgroundModifier().then(modifier),
-        verticalAlignment = verticalAlignment,
-        horizontalAlignment = horizontalAlignment,
-        content = content,
-    )
-}
-
-@Composable
-fun GlanceModifier.appWidgetBackgroundModifier(): GlanceModifier {
-    return this.fillMaxSize()
-        .padding(16.dp)
-        .appWidgetBackground()
-        .background(GlanceTheme.colors.background)
-        .appWidgetBackgroundCornerRadius()
-}
-
-fun GlanceModifier.appWidgetBackgroundCornerRadius(): GlanceModifier {
-    if (Build.VERSION.SDK_INT >= 31) {
-        cornerRadius(android.R.dimen.system_app_widget_background_radius)
+    Scaffold(
+        modifier = GlanceModifier
+            .padding(vertical = widgetPadding)
+    ) {
+        Column(
+            modifier = modifier,
+            verticalAlignment = verticalAlignment,
+            horizontalAlignment = horizontalAlignment,
+            content = content,
+        )
     }
-    return cornerRadius(16.dp)
 }
 
+/**
+ * Applies corner radius for views that are visually positioned [widgetPadding]dp inside of the
+ * widget background.
+ */
+@Composable
 fun GlanceModifier.appWidgetInnerCornerRadius(): GlanceModifier {
-    if (Build.VERSION.SDK_INT >= 31) {
-        return cornerRadius(android.R.dimen.system_app_widget_inner_radius)
+    if (Build.VERSION.SDK_INT < 31) {
+        return this
+    }
+    val resources = LocalContext.current.resources
+    // get dimension in float (without rounding).
+    val px = resources.getDimension(android.R.dimen.system_app_widget_background_radius)
+    val widgetBackgroundRadiusDpValue = px / resources.displayMetrics.density
+    if (widgetBackgroundRadiusDpValue < widgetPadding.value) {
+        return this
     }
-    return cornerRadius(8.dp)
+    return this.cornerRadius(Dp(widgetBackgroundRadiusDpValue - widgetPadding.value))
 }
 
 @Composable
 fun stringResource(@StringRes id: Int, vararg args: Any): String {
     return LocalContext.current.getString(id, args)
 }
 
-val Float.toPx get() = this * Resources.getSystem().displayMetrics.density
+val widgetPadding = 12.dp

samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/weather/WeatherGlanceWidget.kt

@@ -335,15 +335,11 @@ fun HourForecast(
 }
 
 @Composable
-fun DailyForecast(
-    weatherInfo: WeatherInfo.Available,
-    modifier: GlanceModifier = GlanceModifier,
-) {
+fun DailyForecast(weatherInfo: WeatherInfo.Available) {
     LazyColumn(
         modifier = GlanceModifier
             .background(GlanceTheme.colors.surfaceVariant)
-            .appWidgetInnerCornerRadius()
-            .then(modifier),
+            .appWidgetInnerCornerRadius(),
     ) {
         items(weatherInfo.dailyForecast) { dayForecast ->
             Row(