사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/android/skills --skill glance-canonical-layouts시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.kt
- Guidance :
- Set `verticalScrollMode =
VerticalScrollMode.SnapScrollMatchHeight(size.height) on LazyColumn` for 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
- Theme : Color.kt, Theme.kt, Type.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
- Theme : Color.kt, Theme.kt, Type.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.ColorProvider - 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, 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?

