Glance Canonical Layouts
Android (Google)OfficialCreated by Google LLCDistributed by Android (Google)
- Skill
- Tool integration
- Software development
- Apache-2.0
- Low risk
- Has scripts
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a collection of reference implementations for Android home screen widgets using Jetpack Glance. It includes pre-built canonical layout patterns such as check lists, image grids, toolbars, and snap-scrolling layouts. Users can integrate these patterns into their Android projects by copying the provided reference files, configuring the widget provider, and registering the receiver in the Android manifest.
What it does
- Provides source code for standard widget layout patterns like Action List, Check List, and Image Grid.
- Offers guidance on configuring widget providers with SizeMode.Exact.
- Includes necessary XML definitions for app widget providers.
- Supplies supporting utility classes for theme, color, and action handling.
- Details dependency requirements for Jetpack Glance and image loading libraries.
- Provides troubleshooting steps for common issues like background color rendering.
When to use it
- When you need to implement a standard widget layout pattern in an Android app using Jetpack Glance.
- When you require a consistent design structure for home screen widgets.
- When you need to integrate specific features like snap scrolling or search toolbars into your widget.
- When you are setting up a new Glance-based widget and want to follow established reference implementations.
Advantages
- Reduces development time by providing ready-to-use layout templates.
- Ensures consistency with recommended Android widget design patterns.
- Provides clear instructions on manifest registration and dependency management.
- Includes modular components that can be adapted to specific app requirements.
Usage examples
- “How do I implement a check list widget in my Android app?”
- The agent will provide the CheckListAppWidget.kt, CheckListLayout.kt, and associated XML files, along with instructions to register the receiver in your AndroidManifest.xml.
- “Create a search toolbar widget for my app.”
- The agent will guide you to copy the SearchToolBarAppWidget.kt and SearchToolBarLayout.kt files and configure the widget provider with the required size mode.
Install
Download the skill as a ZIP:
https://autogineer.com/agent-skills/android/glance-canonical-layouts/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip glance-canonical-layouts.zip -d .agents/skills
Documentation by Google LLC
To implement a widget Canonical Layout that follows the recommended design patterns:
The project MUST use Jetpack Glance.
You MUST locate the requested layout from the list under Canonical Layout Reference Files.
Copy the layout reference files into your project's target app module (e.g.,
src/main/java/andsrc/main/res/) in one step to implement the exact design and reduce the number of tool calls.You MUST set override val
sizeMode: SizeMode = SizeMode.Exactin the widget provider class.Validate that your project compiles, updating sample package declarations, import paths, and class names to match the target app's package name.
Clean your project's widget code, removing unused classes (for example, unused buttons).
You MUST register the widget receiver in
AndroidManifest.xmlinside<application>after<activity>, ensuringandroid: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.0or higherandroidx.glance:glance-material3:1.2.0or higherandroidx.glance:glance-appwidget-preview:1.2.0or higherandroidx.glance:glance-preview:1.2.0or 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
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
Guidance :
Implement checkbox state toggling using action parameters or callbacks to update collection items.
Use Glance Action callbacks (for example,
actionRunCallback,ActionCallback(actionParametersOf(...)oractionStartActivity(...)) 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
Guidance :
Avoid
ColorProviderimport errors: importandroidx.glance.unit.ColorProviderand useandroidx.glance.color.ColorProvider(dayColor, nightColor).Use
GlanceModifier.background(Color)directly for solid background colors rather thanColorProvider.
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
Guidance :
Use solid colors (
GlanceModifier.background) or local drawables for image items unless an image loading library is configured or requested.
Image text list layout (image_text_list)
Widget Provider : ImageTextListAppWidget.kt
Layout Composable : ImageTextListLayout.kt
Widget Info XML : sample_image_text_list_widget_info.xml
Data Repository : FakeImageTextListDataRepository.kt
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_image_text_list_preview.png, sample_placeholder_image.png, sample_image_icon.xml, sample_heart_icon.xml, sample_refresh_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, ImageUtils.kt, ImageAspectRatio.kt, PreviewAnnotations.kt
Guidance :
Common Use Cases: News feeds, article lists, workout histories, message feeds, and vertical thumbnail lists.
Balance list row height and text clipping when combining thumbnail images with primary and secondary text.
Long text layout (long_text)
Widget Provider : LongTextAppWidget.kt
Layout Composable : LongTextLayout.kt
Widget Info XML : sample_long_text_widget_info.xml
Data Repository : FakeLongTextRespository.kt
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_long_text_preview.png, sample_text_icon.xml, sample_refresh_icon.xml
Utilities : FontUtils.kt, PreviewAnnotations.kt
Guidance :
Import
androidx.compose.ui.unit.timesif multiplying Dp (for example,2 * padding).Follow sizing rules: ensure dimensions from dimens.xml are used for padding and typography scaling.
Search toolbar layout (search_toolbar)
Widget Provider : SearchToolBarAppWidget.kt
Layout Composable : SearchToolBarLayout.kt
Widget Info XML : sample_search_toolbar_widget_info.xml
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_search_toolbar_preview.png, sample_search_icon.xml, sample_refresh_icon.xml, sample_mic_icon.xml, sample_camera_icon.xml, sample_delete_icon.xml, sample_add_icon.xml, sample_pin_icon.xml
Components : Buttons.kt, LayoutComponents.kt
Utilities : ActionUtils.kt, PreviewAnnotations.kt
Guidance :
Avoid
ColorProviderimport errors: importandroidx.glance.unit.ColorProviderand useandroidx.glance.color.ColorProvider(dayColor, nightColor).Use
GlanceModifier.background(Color)directly for solid background colors rather thanColorProvider.
Full-bleed image layout and snap scrolling (snap_scrolling)
Widget Provider : FullBleedImageAppWidget.kt
Layout Composable : FullBleedImageLayout.kt
Widget Info XML : sample_full_bleed_image_widget_info.xml
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_full_bleed_image_preview.png, sample_scrim_gradient.xml, sample_placeholder_image.png, sample_app_logo.xml, sample_info_icon.xml, sample_no_data_icon.xml
Utilities : FontUtils.kt, ImageAspectRatio.kt, PreviewAnnotations.kt
Guidance :
Set
verticalScrollMode = VerticalScrollMode.SnapScrollMatchHeight(size.height)onLazyColumnfor Snap Scrolling.Glance 1.3.0-alpha02 (or higher), Compile SDK 37 (Baklava) or higher, and Android Gradle Plugin (AGP) 9.1.0 or higher are required if implementing Snap Scrolling.
Set override val sizeMode: SizeMode = SizeMode.Exact in the widget provider class.
Standard toolbar layout (standard_toolbar)
Widget Provider : ToolBarAppWidget.kt
Layout Composable : ToolBarLayout.kt
Widget Info XML : sample_toolbar_widget_info.xml
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_toolbar_preview.png, sample_app_logo.xml, sample_search_icon.xml, sample_add_icon.xml, sample_edit_icon.xml, sample_share_icon.xml, sample_mic_icon.xml, sample_camera_icon.xml, sample_videocam_icon.xml
Components : Buttons.kt, LayoutComponents.kt
Utilities : ActionUtils.kt, PreviewAnnotations.kt
Additional References : CanonicalLayoutActivity.kt
Guidance :
See Troubleshooting to avoid
ColorProviderimport errors: use androidx.glance.color.ColorProvider(dayColor, nightColor).Use GlanceModifier.background(Color) directly for solid background colors rather than
ColorProvider.
Text with image layout (text_with_image)
Widget Provider : TextWithImageAppWidget.kt
Layout Composable : TextWithImageLayout.kt
Widget Info XML : sample_text_with_image_widget_info.xml
Data Repository : FakeTextWithImageRepository.kt
Dimensions : dimens.xml
Strings : strings.xml
Drawables : sample_text_image_preview.png, sample_text_icon.xml, sample_refresh_icon.xml, sample_placeholder_image.png, sample_info_icon.xml, sample_no_data_icon.xml
Utilities : FontUtils.kt, ImageAspectRatio.kt, PreviewAnnotations.kt
Guidance :
Follow responsive layout sizing rules to accommodate text and image side-by-side or stacked based on available widget dimensions.
Troubleshooting
Background Colors : Use
GlanceModifier.background(Color)directly for solid background colors rather thanColorProvider, otherwise the background will be transparent.When using
ColorProvider(outside of the background), avoid import errors :Import type:
import androidx.glance.unit.ColorProviderUse fully qualified creator:
androidx.glance.color.ColorProvider(dayColor, nightColor)
Checklist
[ ] Did you register the widget in the AndroidManifest?
[ ] Did you copy the corresponding Widget Info XML file and leave the given values including
minWidth,minHeight, andminResizeHeightunchanged?[ ] Did you use the given Glance Theme color values from the corresponding Layout Composable file?
[ ] Did you use dimension resource references for
android:minWidthandandroid:minHeightin appwidget-provider XML definitions?[ ] Did you override
val sizeMode: SizeMode = SizeMode.Exactin the widget provider class?
Files
- ATTRIBUTION.mdAdded by AutoGineer983 B
- LICENSELicence file added by AutoGineer11.1 KiB
- SKILL.md23.9 KiB
- references/ActionDemonstrationActivity.ktScript1.6 KiB
- references/CanonicalLayoutActivity.ktScript13.7 KiB
- references/CollectionsKtx.ktScript1.3 KiB
- references/collections/ActionListAppWidget.ktScript3.3 KiB
- references/collections/CheckListAppWidget.ktScript3.5 KiB
- references/collections/ImageGridAppWidget.ktScript3.3 KiB
- references/collections/ImageTextListAppWidget.ktScript3.4 KiB
- references/collections/data/FakeActionListDataRepository.ktScript4.5 KiB
- references/collections/data/FakeCheckListDataRepository.ktScript3.8 KiB
- references/collections/data/FakeImageGridDataRepository.ktScript8.2 KiB
- references/collections/data/FakeImageTextListDataRepository.ktScript7.2 KiB
- references/collections/layout/ActionListLayout.ktScript19.7 KiB
- references/collections/layout/CheckListLayout.ktScript16.7 KiB
- references/collections/layout/EmptyListContent.ktScript900 B
- references/collections/layout/ImageGridLayout.ktScript13.3 KiB
- references/collections/layout/ImageTextListLayout.ktScript17.0 KiB
- references/collections/layout/ListItem.ktScript3.1 KiB
- references/collections/layout/NoDataContent.ktScript2.7 KiB
- references/collections/layout/RoundedScrollingLazyColumn.ktScript2.8 KiB
- references/collections/layout/RoundedScrollingLazyVerticalGrid.ktScript4.3 KiB
- references/collections/layout/VerticalListItem.ktScript3.4 KiB
- references/res/drawable/four_side_cookie_background.xml1.4 KiB
- references/res/drawable/sample_ac_icon.xml1.4 KiB
- references/res/drawable/sample_add_icon.xml315 B
- references/res/drawable/sample_app_logo.xml1.1 KiB
- references/res/drawable/sample_arrow_right_icon.xml365 B
- references/res/drawable/sample_bulb_icon.xml651 B
- references/res/drawable/sample_camera_icon.xml1.2 KiB
- references/res/drawable/sample_checked_circle_icon.xml402 B
- references/res/drawable/sample_circle_icon.xml415 B
- references/res/drawable/sample_delete_icon.xml389 B
- references/res/drawable/sample_door_icon.xml810 B
- references/res/drawable/sample_edit_icon.xml520 B
- references/res/drawable/sample_file_upload_icon.xml1.0 KiB
- references/res/drawable/sample_grid_icon.xml968 B
- references/res/drawable/sample_heart_icon.xml1.1 KiB
- references/res/drawable/sample_home_icon.xml517 B
- references/res/drawable/sample_image_icon.xml846 B
- references/res/drawable/sample_info_icon.xml449 B
- references/res/drawable/sample_mic_icon.xml1.3 KiB
- references/res/drawable/sample_no_data_icon.xml546 B
- references/res/drawable/sample_pin_icon.xml488 B
- references/res/drawable/sample_power_settings_icon.xml499 B
- references/res/drawable/sample_refresh_icon.xml490 B
- references/res/drawable/sample_scrim_gradient.xml1.4 KiB
- references/res/drawable/sample_search_icon.xml1.2 KiB
- references/res/drawable/sample_share_icon.xml711 B
- references/res/drawable/sample_snooze_icon.xml569 B
- references/res/drawable/sample_text_icon.xml491 B
- references/res/drawable/sample_thermostat_icon.xml937 B
- references/res/drawable/sample_videocam_icon.xml1.0 KiB
- references/res/values/dimens.xml8.4 KiB
- references/res/values/strings.xml5.8 KiB
- references/res/xml/sample_action_list_widget_info.xml1.7 KiB
- references/res/xml/sample_check_list_widget_info.xml1.8 KiB
- references/res/xml/sample_expressive_toolbar_widget_info.xml1.6 KiB
- references/res/xml/sample_full_bleed_image_widget_info.xml1.4 KiB
- references/res/xml/sample_image_grid_widget_info.xml1.7 KiB
- references/res/xml/sample_image_text_list_widget_info.xml1.8 KiB
- references/res/xml/sample_long_text_widget_info.xml1.5 KiB
- references/res/xml/sample_search_toolbar_widget_info.xml1.5 KiB
- references/res/xml/sample_text_with_image_widget_info.xml1.6 KiB
- references/res/xml/sample_toolbar_widget_info.xml1.5 KiB
- references/text/FullBleedImageAppWidget.ktScript3.5 KiB
- references/text/LongTextAppWidget.ktScript3.1 KiB
- references/text/TextWithImageAppWidget.ktScript3.8 KiB
- references/text/data/FakeLongTextRespository.ktScript3.0 KiB
- references/text/data/FakeTextWithImageRepository.ktScript5.9 KiB
- references/text/layout/FullBleedImageLayout.ktScript7.7 KiB
- references/text/layout/LongTextLayout.ktScript11.8 KiB
- references/text/layout/TextWithImageLayout.ktScript16.9 KiB
- references/toolbars/ExpressiveToolbarAppWidget.ktScript3.7 KiB
- references/toolbars/SearchToolBarAppWidget.ktScript3.2 KiB
- references/toolbars/ToolBarAppWidget.ktScript3.4 KiB
- references/toolbars/layout/Buttons.ktScript4.6 KiB
- references/toolbars/layout/ExpressiveToolbarLayout.ktScript14.9 KiB
- references/toolbars/layout/LayoutComponents.ktScript5.6 KiB
- references/toolbars/layout/SearchToolBarLayout.ktScript14.6 KiB
- references/toolbars/layout/ToolBarLayout.ktScript15.9 KiB
- references/ui/theme/Color.ktScript313 B
- references/ui/theme/Theme.ktScript2.1 KiB
- references/ui/theme/Type.ktScript992 B
- references/utils/ActionUtils.ktScript780 B
- references/utils/FontUtils.ktScript3.5 KiB
- references/utils/ImageAspectRatio.ktScript1.0 KiB
- references/utils/ImageUtils.ktScript5.3 KiB
- references/utils/PreviewAnnotations.ktScript3.0 KiB
ATTRIBUTION.md
Attribution
This folder is an unmodified copy of the Agent Skill "glance-canonical-layouts", distributed by AutoGineer (https://autogineer.com/agent-skills).
Commit: bf68e2d66a992a1e6aeb7e9263293cc23fcbf475
Created by: Google LLC (https://github.com/android/skills/tree/bf68e2d66a992a1e6aeb7e9263293cc23fcbf475/system/glance-canonical-layouts)
Publisher: Android (Google) (https://github.com/android)
Licence: Apache License 2.0 (https://github.com/android/skills/blob/bf68e2d66a992a1e6aeb7e9263293cc23fcbf475/LICENSE.txt)
Licence evidence: frontmatter "license" naming LICENSE.txt
Retrieved: 2026-11-07
The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.
Files added by AutoGineer
ATTRIBUTION.md: this file, written by AutoGineer
LICENSE: copied from LICENSE.txt
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
What our scanner noticed· Low risk
- Scripts that your agent may run
This skill includes scripts that your agent may run. Read them before you use it.
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- Google LLC
- Publisher
- Android (Google) (Official)
- Distributed by
- Android (Google)
- Source
- android/skills · system/glance-canonical-layouts · commit bf68e2d
- Licence
- Apache License 2.0 (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE.txt)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
AutoGineer is not affiliated with or endorsed by Google LLC or Android (Google).
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download glance-canonical-layouts.zip