Optimize and simplify Full Bleed Snap Scrolling Gallery app widget

- Flatten composition tree by removing redundant key(LocalSize.current) wrappers.\n- Hoist LocalSize and LocalContext lookups to FullBleedImageLayout to optimize recompositions.\n- Enable stable list item keying with Glance LazyColumn itemId optimization.\n- Refactor FakeImageGridDataRepository to use non-blocking coroutineScope instead of runBlocking.\n- Sanitize drawables and preview layout bindings, deleting duplicative png assets.

Author: ashnohe

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

@@ -304,7 +304,7 @@ private val canonicalLayoutWidgets = listOf(
     CanonicalLayoutRowData(
         rowTitle = R.string.cl_title_full_bleed_image,
         rowDescription = R.string.cl_description_full_bleed_image,
-        imageRes = R.drawable.cl_activity_row_full_bleed_image,
+        imageRes = R.drawable.sample_full_bleed_image_preview,
         receiver = FullBleedImageAppWidgetReceiver::class.java,
     ),
     CanonicalLayoutRowData(

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

@@ -16,11 +16,11 @@ import com.example.platform.ui.appwidgets.glance.layout.collections.layout.Image
 import com.example.platform.ui.appwidgets.glance.layout.utils.ImageUtils.getMaxPossibleImageSize
 import com.example.platform.ui.appwidgets.glance.layout.utils.ImageUtils.getMaxWidgetMemoryAllowedSizeInBytes
 import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.coroutineScope
 import kotlinx.coroutines.async
 import kotlinx.coroutines.awaitAll
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.runBlocking
 import com.example.platform.ui.appwidgets.glance.layout.computeIfAbsent as computeIfAbsentExt
 /**
  * A fake in-memory implementation of repository that produces a list of
@@ -74,7 +74,7 @@ class FakeImageGridDataRepository {
     val width = IMAGE_SIZE.coerceAtMost(imageSizeLimit.width)
     val height = width * 9 / 16
 
-    val mappedItems = runBlocking {
+    val mappedItems = coroutineScope {
       items.map { item ->
         async(Dispatchers.IO) {
           var bitmap: Bitmap? = null

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

@@ -21,7 +21,6 @@ import android.content.Context
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.key
 import androidx.glance.GlanceId
 import androidx.glance.GlanceTheme
 import androidx.glance.LocalSize
@@ -55,40 +54,31 @@ class FullBleedImageAppWidget : GlanceAppWidget() {
     override suspend fun provideGlance(context: Context, id: GlanceId) {
         val repo = getImageGridDataRepo(id)
 
-        val initialData = withContext(Dispatchers.Default) {
+        val initialData = withContext(Dispatchers.IO) {
             repo.load(context)
         }
 
         provideContent {
             val data by repo.data().collectAsState(initial = initialData)
 
             GlanceTheme {
-                key(LocalSize.current) {
-                    WidgetContent(
-                        data = data
-                    )
-                }
+                FullBleedImageLayout(
+                    data = data
+                )
             }
         }
     }
 
-    @Composable
-    fun WidgetContent(data: List<ImageGridItemData>?) {
-        FullBleedImageLayout(
-            data = data
-        )
-    }
-
     override suspend fun providePreview(context: Context, widgetCategory: Int) {
         val repo = getImageGridDataRepo(AppWidgetId(0))
 
-        val initialData = withContext(Dispatchers.Default) {
+        val initialData = withContext(Dispatchers.IO) {
             repo.load(context)
         }
 
         provideContent {
             GlanceTheme {
-                WidgetContent(
+                FullBleedImageLayout(
                     data = initialData.take(1)
                 )
             }

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

@@ -66,6 +66,9 @@ fun FullBleedImageLayout(
     data: List<ImageGridItemData>? = null,
 ) {
     val size = LocalSize.current
+    val isSmall = size.height <= 110.dp
+    val appName = LocalContext.current.getString(R.string.sample_full_bleed_image_app_widget_name)
+
     Box(
         modifier = GlanceModifier
             .fillMaxSize()
@@ -85,6 +88,8 @@ fun FullBleedImageLayout(
             // with fillMaxSize to bypass any LazyColumn height/scroll container measurement issues.
             GalleryItemCard(
                 item = data[0],
+                isSmall = isSmall,
+                appName = appName,
                 modifier = GlanceModifier.fillMaxSize()
             )
         } else {
@@ -94,9 +99,11 @@ fun FullBleedImageLayout(
                 modifier = GlanceModifier.fillMaxSize(),
                 verticalScrollMode = VerticalScrollMode.SnapScroll
             ) {
-                items(limitedData) { item ->
+                items(limitedData, itemId = { it.key.hashCode().toLong() }) { item ->
                     GalleryItemCard(
                         item = item,
+                        isSmall = isSmall,
+                        appName = appName,
                         modifier = GlanceModifier.width(size.width).height(size.height)
                     )
                 }
@@ -108,21 +115,18 @@ fun FullBleedImageLayout(
 @Composable
 private fun GalleryItemCard(
     item: ImageGridItemData,
+    isSmall: Boolean,
+    appName: String,
     modifier: GlanceModifier = GlanceModifier,
 ) {
-    val size = LocalSize.current
     val itemTitle = item.title ?: ""
 
     Box(
         modifier = modifier,
         contentAlignment = Alignment.BottomStart
     ) {
         // Layer 1: Full bleed background photo
-        val imageProvider = if (item.image != null) {
-            ImageProvider(item.image)
-        } else {
-            ImageProvider(R.drawable.sample_placeholder_image)
-        }
+        val imageProvider = item.image?.let { ImageProvider(it) } ?: ImageProvider(R.drawable.sample_placeholder_image)
 
         Image(
             provider = imageProvider,
@@ -131,11 +135,6 @@ private fun GalleryItemCard(
             modifier = GlanceModifier.fillMaxSize()
         )
 
-        val appIconSize = 24.dp
-        val spacerHeight = 4.dp
-
-        // Use discrete font sizing with a threshold of 110.dp (representing extremely small/XSmall layout sizes) to avoid scaling on resize.
-        val isSmall = size.height <= 110.dp
         val titleFontSize = if (isSmall) {
             WidgetTextDimensions.primaryTextFontSizeAndMaxLines(itemTitle).first
         } else {
@@ -161,20 +160,19 @@ private fun GalleryItemCard(
         Column(
             modifier = GlanceModifier
                 .fillMaxWidth()
-                .wrapContentHeight()
                 .padding(WidgetTextDimensions.widgetPadding),
             verticalAlignment = Alignment.Bottom,
         ) {
             // App Logo Icon styled as a fixed size monochrome asset above the Title
             Image(
                 provider = ImageProvider(R.drawable.sample_app_logo),
-                contentDescription = null,
+                contentDescription = appName,
                 contentScale = ContentScale.Fit,
-                modifier = GlanceModifier.width(appIconSize).height(appIconSize)
+                modifier = GlanceModifier.width(AppIconSize).height(AppIconSize)
             )
 
             if (itemTitle.isNotEmpty()) {
-                Spacer(modifier = GlanceModifier.height(spacerHeight))
+                Spacer(modifier = GlanceModifier.height(SpacerHeight))
                 Text(
                     text = itemTitle,
                     style = TextStyle(
@@ -189,6 +187,9 @@ private fun GalleryItemCard(
     }
 }
 
+private val AppIconSize = 24.dp
+private val SpacerHeight = 4.dp
+
 
 
 @RequiresApi(Build.VERSION_CODES_FULL.BAKLAVA_1)
@@ -200,14 +201,12 @@ private fun FullBleedImageLayoutPreview() {
         ImageGridItemData(
             key = "0",
             title = "Yosemite Valley under clear blue skies",
-            supportingText = "Yosemite National Park, California",
             image = null,
             imageContentDescription = null
         ),
         ImageGridItemData(
             key = "1",
             title = "Mystical forest lake reflection at sunrise",
-            supportingText = "Avenue of the Giants, Oregon",
             image = null,
             imageContentDescription = null
         )