glance-canonical-layouts

---

name: glance-canonical-layouts description: Use this skill to create home screen widgets using Jetpack Glance Canonical Layouts from the Android Platform Samples project, or when asked to implement standard widget layout patterns (including Check List, Image Grid, Snap Scrolling, and Standard Toolbar). license: Complete terms in LICENSE.txt metadata: author: Google LLC last-updated: '2026-10-14' keywords:

• android
• glance
• widgets
• appwidget
• canonical-layouts
• platform-samples
• action-list
• check-list
• image-grid
• image-text-list
• snap-scrolling
• full-bleed
• expressive-toolbar
• search-toolbar
• standard-toolbar

---

To implement a widget Canonical Layout that follows the recommended design patterns:

1. The project MUST use Jetpack Glance.
2. You MUST locate the requested layout from the list under Canonical Layout Reference Files.
3. Copy the layout reference files into your project's target app module (e.g., src/main/java/ and src/main/res/) in one step to implement the exact design and reduce the number of tool calls.
4. You MUST set override val sizeMode: SizeMode = SizeMode.Exact in the widget provider class.
5. Validate that your project compiles, updating sample package declarations, import paths, and class names to match the target app's package name.
6. Clean your project's widget code, removing unused classes (for example, unused buttons).
7. You MUST register the widget receiver in AndroidManifest.xml inside <application> after <activity>, ensuring android:resource="@xml/..." matches the filename of the copied Widget Info XML. Otherwise, the widget won't appear in the widget picker:

<br />

<receiver android:name=".glance.MyReceiver"
    android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data
        android:name="android.appwidget.provider"
        android:resource="@xml/my_app_widget_info" />
</receiver>

<br />

Dependencies

Add Jetpack Glance dependencies to the app module's build.gradle.kts (dependencies block):

• androidx.glance:glance-appwidget:1.2.0 or higher
• androidx.glance:glance-material3:1.2.0 or higher
• androidx.glance:glance-appwidget-preview:1.2.0 or higher
• androidx.glance:glance-preview:1.2.0 or higher

Use version 1.3.0-alpha02 or higher with compileSdk = 37 and Android Gradle Plugin (AGP) 9.1.0 or higher (for example, agp = "9.1.0" in gradle/libs.versions.toml) when implementing Snap Scrolling.

If copying sample data repositories that load bitmaps with Coil (such as FakeImageGridDataRepository.kt, FakeImageTextListDataRepository.kt, or FakeTextWithImageRepository.kt), also add an image loading library dependency such as io.coil-kt:coil (e.g., implementation("io.coil-kt:coil:2.7.0")) if one doesn't already exist.

Canonical layout reference files

Action list layout (action_list)

• Widget Provider : ActionListAppWidget.kt
• Layout Composable : ActionListLayout.kt
• Widget Info XML : sample_action_list_widget_info.xml
• Data Repository : FakeActionListDataRepository.kt
• Dimensions : dimens.xml
• Strings : strings.xml
• Drawables : sample_action_list_preview.png, sample_home_icon.xml, sample_power_settings_icon.xml, sample_bulb_icon.xml, sample_thermostat_icon.xml, sample_ac_icon.xml, sample_door_icon.xml, sample_arrow_right_icon.xml, sample_no_data_icon.xml, sample_add_icon.xml
• Components : RoundedScrollingLazyVerticalGrid.kt, ListItem.kt, VerticalListItem.kt, RoundedScrollingLazyColumn.kt, EmptyListContent.kt, NoDataContent.kt
• Utilities : CollectionsKtx.kt, ActionUtils.kt, PreviewAnnotations.kt
• Theme : Color.kt, Theme.kt, Type.kt
• Additional References : CanonicalLayoutActivity.kt, ActionDemonstrationActivity.kt
• Guidance :
  • Handle list item actions with Glance action callbacks and ensure proper state updates.

Check list layout (check_list)

• Widget Provider : CheckListAppWidget.kt
• Layout Composable : CheckListLayout.kt
• Widget Info XML : sample_check_list_widget_info.xml
• Data Repository : FakeCheckListDataRepository.kt
• Dimensions : dimens.xml
• Strings : strings.xml
• Drawables : sample_check_list_preview.png, sample_pin_icon.xml, sample_checked_circle_icon.xml, sample_circle_icon.xml, sample_delete_icon.xml, sample_edit_icon.xml, sample_snooze_icon.xml, sample_no_data_icon.xml, sample_add_icon.xml
• Components : ListItem.kt, VerticalListItem.kt, RoundedScrollingLazyColumn.kt, EmptyListContent.kt, NoDataContent.kt
• Utilities : CollectionsKtx.kt, ActionUtils.kt, PreviewAnnotations.kt
• Theme : Color.kt, Theme.kt, Type.kt
• Guidance :
  • Implement checkbox state toggling using action parameters or callbacks to update collection items.
  • Use Glance Action callbacks (for example, actionRunCallback, ActionCallback(actionParametersOf(...) or actionStartActivity(...)) for widget onClick parameters to handle click events like tapping a checkbox.

Expressive toolbar layout (expressive_toolbar)

• Widget Provider : ExpressiveToolbarAppWidget.kt
• Layout Composable : ExpressiveToolbarLayout.kt
• Widget Info XML : sample_expressive_toolbar_widget_info.xml
• Dimensions : dimens.xml
• Strings : strings.xml
• Drawables : sample_expressive_toolbar_preview.png, four_side_cookie_background.xml, sample_edit_icon.xml, sample_share_icon.xml, sample_delete_icon.xml, sample_info_icon.xml, sample_add_icon.xml, sample_file_upload_icon.xml, sample_mic_icon.xml, sample_camera_icon.xml
• Components : Buttons.kt, LayoutComponents.kt
• Utilities : ActionUtils.kt, PreviewAnnotations.kt
• Theme : Color.kt, Theme.kt, Type.kt
• Guidance :
  • Avoid ColorProvider import errors: import androidx.glance.unit.ColorProvider and use androidx.glance.color.ColorProvider(dayColor, nightColor).
  • Use GlanceModifier.background(Color) directly for solid background colors rather than ColorProvider.

Image grid layout (image_grid)

• Widget Provider : ImageGridAppWidget.kt
• Layout Composable : ImageGridLayout.kt
• Widget Info XML : sample_image_grid_widget_info.xml
• Data Repository : FakeImageGridDataRepository.kt
• Dimensions : dimens.xml
• Strings : strings.xml
• Drawables : sample_image_grid_preview.png, sample_placeholder_image.png, sample_grid_icon.xml, sample_refresh_icon.xml, sample_no_data_icon.xml, sample_add_icon.xml
• Components : RoundedScrollingLazyVerticalGrid.kt, EmptyListContent.kt, NoDataContent.kt, VerticalListItem.kt
• Utilities : CollectionsKtx.kt, ImageUtils.kt, ImageAspectRatio.kt, PreviewAnnotations.kt
• Theme : Color.kt, [Theme.kt](references/ui/theme/Theme