Align the AppWidgets showcase entrypoint to highlight canonical layout samples.

The main "AppWidgets" page now displays link to the canonical layout showcase page and then below it, demonstrates the functionality to pin and show widget information.

Author: shamalip

samples/README.md

@@ -1,7 +1,7 @@
 # Available Samples
 
 - [App Widgets](user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/AppWidgets.kt):
-Showcases how to pin widget within the app. Check the launcher widget menu for all the app widgets samples
+Showcases how to pin widgets within the app and provides a catalog of well-designed canonical widget layouts for inspiration.
 - [Call Notification Sample](connectivity/callnotification/src/main/java/com/example/platform/connectivity/callnotification/CallNotificationSample.kt):
 Sample demonstrating how to make incoming call notifications and in call notifications
 - [Camera Preview](camera/camera2/src/main/java/com/example/platform/camera/preview/Camera2Preview.kt):

samples/user-interface/appwidgets/src/main/AndroidManifest.xml

@@ -156,6 +156,7 @@
         <receiver
             android:name=".rv.weather.WeatherForecastAppWidget"
             android:enabled="@bool/weather_appwidget_enabled"
+            android:label="@string/remote_views_weather"
             android:exported="false">
             <intent-filter>
                 <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />

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

@@ -23,6 +23,7 @@ import android.content.Context
 import android.content.Intent
 import android.os.Build
 import androidx.annotation.RequiresApi
+import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
@@ -33,7 +34,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -43,13 +43,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.example.platform.ui.appwidgets.glance.layout.CanonicalLayoutActivity
 import com.google.android.catalog.framework.annotations.Sample
 
 @Sample(
     name = "App Widgets",
-    description = "Showcases how to pin widget within the app. Check the launcher widget menu for all the app widgets samples",
+    description = "Showcases how to pin widgets within the app and provides a catalog of well-designed canonical widget layouts for inspiration.",
     documentation = "https://developer.android.com/develop/ui/views/appwidgets/overview",
     tags = ["App Widgets"],
 )
@@ -76,11 +77,18 @@ fun AppWidgetsList(widgetProviders: List<AppWidgetProviderInfo>) {
         verticalArrangement = Arrangement.spacedBy(16.dp),
     ) {
         item {
-            AppInfoText()
+            InfoText(R.string.placeholder_pin_app_widget)
         }
 
         item {
-            CanonicalLayoutsRow()
+            InfoText(
+                resId = R.string.placeholder_tap_to_add_to_home,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+
+        item {
+            CanonicalLayoutPinActivityCard()
         }
 
         // If the launcher does not support pinning request show a banner
@@ -90,17 +98,41 @@ fun AppWidgetsList(widgetProviders: List<AppWidgetProviderInfo>) {
             }
         }
 
+        item {
+            InfoText(
+                resId = R.string.placeholder_tap_to_pin,
+                fontWeight = FontWeight.SemiBold
+            )
+        }
+
         items(widgetProviders) { providerInfo ->
             WidgetInfoCard(providerInfo)
         }
     }
 }
 
 @Composable
-private fun CanonicalLayoutsRow() {
+private fun CanonicalLayoutPinActivityCard() {
     val context = LocalContext.current
-    Button(onClick = { CanonicalLayoutActivity.start(context) }) {
-        Text("Canonical layout examples")
+    Card(
+        modifier = Modifier
+            .fillMaxWidth(),
+        onClick = { CanonicalLayoutActivity.start(context) },
+    ) {
+        val preview = painterResource(id = R.drawable.cl_activity_row_hero_image)
+        Column(modifier = Modifier.padding(16.dp)) {
+            Text(
+                text = "☆ Canonical widget layouts",
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.Bold
+            )
+            Text(
+                text = "Explore and pin the recommended, intentionally designed widget samples",
+                style = MaterialTheme.typography.bodyMedium,
+                maxLines = 3,
+            )
+            Image(painter = preview, contentDescription = null)
+        }
     }
 }
 
@@ -142,9 +174,13 @@ private fun PinUnavailableBanner() {
 }
 
 @Composable
-private fun AppInfoText() {
+private fun InfoText(
+    @StringRes resId: Int,
+    fontWeight: FontWeight = FontWeight.Normal
+) {
     Text(
-        text = stringResource(id = R.string.placeholder_app_widget),
+        text = stringResource(id = resId),
+        fontWeight = fontWeight,
         modifier = Modifier
             .fillMaxWidth(),
     )
@@ -183,7 +219,8 @@ private fun WidgetInfoCard(providerInfo: AppWidgetProviderInfo) {
             Column(modifier = Modifier.padding(end = 8.dp)) {
                 Text(
                     text = label,
-                    style = MaterialTheme.typography.titleSmall,
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold
                 )
                 Text(
                     text = description,

samples/user-interface/appwidgets/src/main/res/values/strings.xml

@@ -17,12 +17,12 @@
     <string name="app_name">AppWidget</string>
     <string name="placeholder_app_widget_pin">Pin an App Widget:</string>
     <string name="placeholder_app_widget_pin_unavailable">Pinning is not supported in the default launcher</string>
-    <string name="placeholder_app_widget">Sample to demonstrate how to get the app\'s appwidgets info and request the user to pin them in the launcher.\n\nTap any of the items below to request the launcher to pin them:</string>
-
-    <string name="weather">Weather</string>
+    <string name="placeholder_pin_app_widget">Sample to demonstrate how to get the app\'s appwidgets info and request the user to pin them in the launcher.</string>
+    <string name="placeholder_tap_to_add_to_home">Tap \"Add to home\" button on any of the items in the canonical widget layouts demo page to pin:</string>
+    <string name="placeholder_tap_to_pin">Or tap on any of the items below to request the launcher to pin them:</string>
+    <string name="remote_views_weather">RemoteViews Weather</string>
     <string name="glance_weather">Glance Weather</string>
     <string name="app_widget_weather_description">Widget for weather forecast</string>
-    <string name="glance_widget_weather_description">Glance Widget for weather forecast</string>
     <string name="icon_for_weather_content_description">Icon for weather</string>
     <string name="city_tokyo">Tokyo</string>
     <string name="mostly_cloudy">Mostly cloudy</string>