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://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/collections/layout/RoundedScrollingLazyVerticalGrid.kt

package com.example.platform.ui.appwidgets.glance.layout.collections.layout

import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.glance.GlanceModifier
import androidx.glance.appwidget.cornerRadius
import androidx.glance.appwidget.lazy.GridCells
import androidx.glance.appwidget.lazy.LazyVerticalGrid
import androidx.glance.appwidget.lazy.LazyVerticalGridScope
import androidx.glance.appwidget.lazy.items
import androidx.glance.appwidget.lazy.itemsIndexed
import androidx.glance.layout.Alignment
import androidx.glance.layout.Box
import androidx.glance.layout.fillMaxSize
import androidx.glance.layout.padding
import kotlin.math.ceil

/**
 * A variant of [LazyVerticalGrid] that clips its scrolling content to a rounded rectangle.
 *
 * @param gridCells the number of columns in the grid.
 * @param modifier the modifier to apply to this layout
 * @param horizontalAlignment the horizontal alignment applied to the items.
 * @param content a block which describes the content. Inside this block you can use methods like
 * [LazyVerticalGridScope.item] to add a single item or [LazyVerticalGridScope.items] to add a list
 * of items. If the item has more than one top-level child, they will be automatically wrapped in a
 * Box.
 * @see LazyVerticalGrid
 */
@Composable
fun RoundedScrollingLazyVerticalGrid(
  gridCells: GridCells,
  modifier: GlanceModifier = GlanceModifier,
  horizontalAlignment: Alignment.Horizontal = Alignment.Start,
  content: LazyVerticalGridScope.() -> Unit,
) {
  Box(
    modifier = GlanceModifier
      .cornerRadius(16.dp) // to present a rounded scrolling experience
      .then(modifier)
  ) {
    LazyVerticalGrid(
      gridCells = gridCells,
      horizontalAlignment = horizontalAlignment,
      content = content
    )
  }
}

/**
 * A variant of [LazyVerticalGrid] that clips its scrolling content to a rounded rectangle and
 * spaces out each item in the grid with a default 8.dp spacing.
 *
 * @param gridCells number of columns in the grid
 * @param items the list of data items to be displayed in the list
 * @param itemContentProvider a lambda function that provides item content without any spacing
 * @param modifier the modifier to apply to this layout
 * @param horizontalAlignment the horizontal alignment applied to the items.
 * @param cellSpacing horizontal and vertical spacing between cells
 * @see LazyVerticalGrid
 */
@Composable
fun <T> RoundedScrollingLazyVerticalGrid(
  gridCells: Int,
  items: List<T>,
  itemContentProvider: @Composable (item: T) -> Unit,
  modifier: GlanceModifier = GlanceModifier,
  horizontalAlignment: Alignment.Horizontal = Alignment.Start,
  cellSpacing: Dp = 12.dp,
) {
  val numRows = ceil(items.size.toDouble() / gridCells).toInt()

  // Cell spacing is achieved by allocating equal amount of padding to each cell. Cells on edge
  // apply it completely to inner sides, while cells not on edge apply it evenly on sides.
  val perCellHorizontalPadding = (cellSpacing * (gridCells - 1)) / gridCells
  val perCellVerticalPadding = (cellSpacing * (numRows - 1)) / numRows

  RoundedScrollingLazyVerticalGrid(
    gridCells = GridCells.Fixed(gridCells),
    horizontalAlignment = horizontalAlignment,
    modifier = modifier
  ) {

    itemsIndexed(items) { index, item ->
      val row = index / gridCells
      val column = index % gridCells

      val cellTopPadding = when (row) {
        0 -> 0.dp
        numRows - 1 -> perCellVerticalPadding
        else -> perCellVerticalPadding / 2
      }

      val cellBottomPadding = when (row) {
        0 -> perCellVerticalPadding
        numRows - 1 -> 0.dp
        else -> perCellVerticalPadding / 2
      }

      val cellStartPadding = when (column) {
        0 -> 0.dp
        gridCells - 1 -> perCellHorizontalPadding
        else -> perCellHorizontalPadding / 2
      }

      val cellEndPadding = when (column) {
        0 -> perCellHorizontalPadding
        gridCells - 1 -> 0.dp
        else -> perCellHorizontalPadding / 2
      }

      Box(
        modifier = modifier
          .fillMaxSize()
          .padding(
            start = cellStartPadding,
            end = cellEndPadding,
            top = cellTopPadding,
            bottom = cellBottomPadding
          )
      ) {
        itemContentProvider(item)
      }
    }
  }
}

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