Composables

Glance Canonical Layouts

Organization

android

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).

Overview

Repository
android/skills
Publisher
android
Stars
10.5K
Forks
695
Bundled files
87
License
Apache-2.0
Updated
Nov 11, 2026

Installation

tmp=$(mktemp -d)
git clone --depth 1 https://github.com/android/skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/system/glance-canonical-layouts" ~/.claude/skills/glance-canonical-layouts
rm -rf "$tmp"

Instructions

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:

<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>

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?

Bundled files

FAQ

What does Glance Canonical Layouts do?

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).

Who made Glance Canonical Layouts?

android (an organization) publishes it in the android/skills repository on GitHub.

Is Glance Canonical Layouts free?

Yes. Glance Canonical Layouts is open source, published by android under the Apache-2.0 license.

What comes with Glance Canonical Layouts?

Its instructions and 87 files the agent reads only when a task needs them, such as references, examples or scripts.

Which agents can use Glance Canonical Layouts?

Any coding agent that reads SKILL.md files, including Claude Code, Codex, Cursor, GitHub Copilot and Gemini CLI. The agent loads the skill when a task matches its description.

What are agent skills?

An agent skill is a folder with a SKILL.md file: instructions that teach a coding agent how to do one kind of task, and optionally files it can read while it works. The agent keeps only the skill's name and description in mind and reads the rest when a task calls for it.

How are agent skills different from MCP servers?

An MCP server gives an agent new tools to call, code that runs somewhere and returns results. A skill gives it knowledge: how to approach a task with the tools it already has. Many agents use both.

How can my agent test my Android app?

Robomori lets coding agents create, start and control Android emulators and devices from one command, so they can install your app, take screenshots and check dark mode, font sizes and languages.

You're subscribed

The next lesson lands in on Wednesday.