mcpField
G
glance-canonical-layouts

glance-canonical-layouts

github.com/androidDesign & UI10.0k237 installsUpdated 2d ago
Repository

About glance-canonical-layouts

A skill for Android coding agents implementing Jetpack Glance widgets with canonical layouts. It guides developers through selecting reference files, configuring the app, and validating the resulting widget.

Key features

  1. 01Reference layouts for widgets
  2. 02Dependency and project setup guidance
  3. 03Widget receiver registration steps
  4. 04Click handling and state updates
  5. 05Layout troubleshooting guidance

Use cases

  1. 01Add checklist or action-list widgets
  2. 02Build image-list or grid widgets
  3. 03Implement search or action toolbars

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/android/skills --skill glance-canonical-layouts

After installing, type/glance-canonical-layoutsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
ActionDemonstrationActivity.kt
CanonicalLayoutActivity.kt
CollectionsKtx.kt
references/collections/
ActionListAppWidget.kt
CheckListAppWidget.kt
ImageGridAppWidget.kt
ImageTextListAppWidget.kt
references/collections/data/
FakeActionListDataRepository.kt
FakeCheckListDataRepository.kt
FakeImageGridDataRepository.kt
FakeImageTextListDataRepository.kt
references/collections/layout/
ActionListLayout.kt
CheckListLayout.kt
EmptyListContent.kt
ImageGridLayout.kt
ImageTextListLayout.kt
ListItem.kt
NoDataContent.kt
RoundedScrollingLazyColumn.kt
RoundedScrollingLazyVerticalGrid.kt
VerticalListItem.kt
references/res/drawable/
four_side_cookie_background.xml
sample_ac_icon.xml
sample_add_icon.xml
sample_app_logo.xml
sample_arrow_right_icon.xml
sample_bulb_icon.xml
sample_camera_icon.xml
sample_checked_circle_icon.xml
sample_circle_icon.xml

Details

From the project README

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?

Comments

Markdown supported