AutoGineer
Generated banner for Glance Canonical Layouts
Generated logo for Glance Canonical Layouts

Glance Canonical Layouts

Android (Google)OfficialCreated by Google LLCDistributed by Android (Google)

  • Skill
  • Tool integration
  • Software development
  • Apache-2.0
  • Low risk
  • Has scripts
Download ZIP

From the author

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).
— the description by Google LLC

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

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/android/glance-canonical-layouts/download

  2. Unzip 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:

  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)
Check list layout (check_list)
Expressive toolbar layout (expressive_toolbar)
Image grid layout (image_grid)
Image text list layout (image_text_list)
Long text layout (long_text)
Search toolbar layout (search_toolbar)
Full-bleed image layout and snap scrolling (snap_scrolling)
Standard toolbar layout (standard_toolbar)
Text with image layout (text_with_image)

Troubleshooting

  1. Background Colors : Use GlanceModifier.background(Color) directly for solid background colors rather than ColorProvider, otherwise the background will be transparent.

  2. When using ColorProvider (outside of the background), avoid import errors :

    1. Import type: import androidx.glance.unit.ColorProvider

    2. Use 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, and minResizeHeight unchanged?

  • [ ] Did you use the given Glance Theme color values from the corresponding Layout Composable file?

  • [ ] Did you use dimension resource references for android:minWidth and android:minHeight in appwidget-provider XML definitions?

  • [ ] Did you override val sizeMode: SizeMode = SizeMode.Exact in the widget provider class?

Files

references/res/drawable/sample_heart_icon.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="960" android:viewportHeight="960" android:tint="#000000">
<path android:fillColor="@android:color/white" android:pathData="M480,840L422,788Q321,697 255,631Q189,565 150,512.5Q111,460 95.5,416Q80,372 80,326Q80,232 143,169Q206,106 300,106Q352,106 399,128Q446,150 480,190Q514,150 561,128Q608,106 660,106Q754,106 817,169Q880,232 880,326Q880,372 864.5,416Q849,460 810,512.5Q771,565 705,631Q639,697 538,788L480,840ZM480,732Q576,646 638,584.5Q700,523 736,477.5Q772,432 786,396.5Q800,361 800,326Q800,266 760,226Q720,186 660,186Q613,186 573,212.5Q533,239 518,280L518,280L442,280L442,280Q427,239 387,212.5Q347,186 300,186Q240,186 200,226Q160,266 160,326Q160,361 174,396.5Q188,432 224,477.5Q260,523 322,584.5Q384,646 480,732ZM480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459L480,459L480,459L480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Q480,459 480,459Z"/>
</vector>

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