wear-compose-m3

name	wear-compose-m3
description	Expert guidance for working with Wear OS Compose Material3. Use this skill when creating, updating, or migrating Wear OS projects. This includes the androidx.wear.compose.material3, androidx.wear.compose.foundation, and androidx.wear.compose.navigation3 libraries. Also working with core components such as AppScaffold, ScreenScaffold, and TransformingLazyColumn, and core Wear OS concepts such as ambient mode. Migration from lower versions such as Material 2.5 and Horologist.
license	Complete terms in LICENSE.txt
metadata	{"author":"Google LLC","last-updated":"2026-08-06","keywords":["Wear OS","Compose","Material3","Horologist","TransformingLazyColumn","AppScaffold","ScreenScaffold"]}

Prerequisites and compatibility

1. Current Wear OS Compose version in-use: To find the installed library version, read gradle/libs.versions.toml or build.gradle.kts directly. Don't run ./gradlew dependencies or other shell commands to resolve versions.
2. Wear OS Compose Material3 version: If an internal tool is available to establish the latest stable version {VERSION} of androidx.wear.compose:compose-material3, use that tool.
   • Otherwise, fetch the official Maven metadata XML to identify {VERSION} (highest number, ignoring -alpha, -beta, or -rc).
3. Strict compliance: If a version is listed as stable, you MUST use it, unless overridden by the user. Do not downgrade based on initial "Unresolved reference" errors in the editor or outdated web search results.
4. Kotlin version: For Wear Compose Material3, use Kotlin 2.0.0 or higher.
5. Compose compiler:
   • If Kotlin version is 2.0.0+ , the project must use the org.jetbrains.kotlin.plugin.compose Gradle plugin.
   • If Kotlin version is < 2.0.0 , the project must use kotlinCompilerExtensionVersion in composeOptions, matching the Compose to Kotlin Compatibility Map.
6. Min SDK: Ensure minSdk is at least 25.
7. Sample extraction mandate: Wear Compose libraries ship with an additional JAR file which contains individual samples for each and every component. You mustn't propose code changes, other than previews or basic changes such as color changes, until the samples in Capability 3 are extracted to the local cache. Library source files are incomplete and NOT a substitute for these samples; bypassing extraction is an environment setup failure.

Gotchas

1. Mandatory sync and validation: After updating versions in libs.versions.toml or build.gradle.kts, you must perform a Gradle sync before refactoring any code. This ensures the environment has resolved the libraries correctly.
2. Prohibition of guessing (error protocol): If you encounter an 'Unresolved Reference' or API mismatch after a successful sync, do not attempt to 'fix' it by downgrading the library version.

Capabilities and tools

Capability 1: Migration

Use this guidance when migrating from an older version of Wear OS Compose or Horologist.

1. Unless otherwise indicated by the developer, use the latest stable version of Wear Compose Material3 from {VERSION}.
2. Read the migration guide.
3. Use the official component mappings from the migration guide.
4. Before refactoring any component (for example, Chip -> Button), check the parameter names, slot types, and "Expressive" design tokens.
5. Do not use the Horologist Composables, Compose Layout, or Compose Material libraries.
6. Always check against the component guidance in Capability 4.
7. Expect screenshot tests to fail when a migration has been performed: Even when migrating to very similar components, expected defaults for padding and positioning will have changed. Do not seek to artificially match the pre-migration screenshot, but give preference to the Material3 defaults.

Capability 2: Adding Wear OS Compose Material3 features or updating the app

Use this guidance when the developer asks to update a project which is using an earlier version of Wear OS Compose Material3, or when they ask to add further features.

1. Unless otherwise indicated by the developer, use the latest stable version of Wear Compose Material3 from {VERSION}.
2. Do not use the Horologist Composables, Compose Layout, or Compose Material libraries.
3. Always check against the component guidance in Capability 4.
4. Expect screenshot tests to fail when a migration has been performed: Even when migrating to very similar components, expected defaults for padding and positioning will have changed. Do not seek to artificially match the pre-migration screenshot, but give preference to the Material3 defaults.

Capability 3: Component samples

Use this table of reference to find canonical samples for Wear Compose components. When working with a Wear Compose component, you must use the samples linked from the table to ensure you know how to correctly use it.

Material 3 components in androidx.wear.compose.material3.*

Component / Symbol	Reference Samples
AlertDialog, AlertDialogDefaults	AlertDialogSample
AnimatedPage, HorizontalPagerScaffold, VerticalPagerScaffold	OneHandedGestureSamples, PageIndicatorSample, PagerScaffoldSample
AnimatedText, rememberAnimatedTextFontRegistry	AnimatedTextSample
AppCard	CardSample
AppScaffold	ListHeaderSample, PagerScaffoldSample, ScaffoldSample, SurfaceTransformationSample, TransformingLazyColumnNotificationsSample, TransformingLazyColumnSample
ArcProgressIndicator, ArcProgressIndicatorDefaults, CircularProgressIndicator, CircularProgressIndicatorDefaults, ProgressIndicatorDefaults, SegmentedCircularProgressIndicator, drawCircularProgressIndicator	ProgressIndicatorSample
Button	AlertDialogSample, AnimatedTextSample, ButtonGroupSample, ButtonSample, DatePickerSample, DynamicColorSchemeSample, , , , , , , , , , , , , , ,

Foundation components in androidx.wear.compose.foundation.*

Component / Symbol	Reference Samples
AmbientMode, AmbientTickEffect, LocalAmbientModeManager, rememberAmbientModeManager	AmbientModeSample
AutoCenteringParams, ScalingLazyColumnDefaults, ScalingLazyListAnchorType	ScalingLazyColumnSample
BasicSwipeToDismissBox	SwipeToDismissBoxSample
CurvedAlignment, CurvedTextStyle, angularGradientBackground, angularSize, basicCurvedText, clearAndSetSemantics, curvedColumn, padding, radialGradientBackground, radialSize, semantics, size	CurvedWorldSample
CurvedDirection, CurvedLayout, angularSizeDp, background, curvedBox, curvedComposable, curvedRow	CurvedTextSamples, CurvedWorldSample
CurvedModifier	CurvedTextSamples, CurvedWorldSample, TimeTextSample
ExperimentalWearFoundationApi, RevealValue, SwipeToReveal, rememberRevealState	SwipeToRevealSample
HorizontalPager, VerticalPager,

Capability 4: Component guidance

Mandatory: Use this capability as a checklist against any component use. It provides more holistic guidance on how to use each component in practice, beyond the component syntax.

1. AppScaffold and ScreenScaffold

   • [ ] Use AppScaffold as the outer container, with ScreenScaffold children.
   • [ ] Use only ONE AppScaffold and any number of ScreenScaffold.

2. ScalingLazyColumn - Use TransformingLazyColumn instead.

3. TransformingLazyColumn - You will need the following imports:

   
   

   import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
   import androidx.wear.compose.foundation.lazy.TransformingLazyColumnDefaults
   import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
   // ...
   import androidx.wear.compose.material3.lazy.rememberTransformationSpec
   import androidx.wear.compose.material3.lazy.transformedHeight
         
   

   
   

   Canonical example:

   
   

   val columnState = rememberTransformingLazyColumnState()
   val transformationSpec = rememberTransformationSpec()
   ScreenScaffold(
       scrollState = columnState
   ) { contentPadding ->
       TransformingLazyColumn(
           state = columnState,
           contentPadding = contentPadding
       ) {
           item {
               ListHeader(
                   modifier = Modifier
                       .fillMaxWidth()
                       .transformedHeight(this, transformationSpec)
                       .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                   transformation = SurfaceTransformation(transformationSpec)
               ) {
                   Text(text = "Header")
               }
           }
           // ... other items
           item {
               Button(
                   modifier = Modifier
                       .fillMaxWidth()
                       .transformedHeight(this, transformationSpec)
                       .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                   transformation = SurfaceTransformation(transformationSpec),
                   onClick = { /* ... */ },
                   icon = {
                       Icon(
                           imageVector = Icons.Default.Build,
                           contentDescription = ,
                       )
                   },
               ) {
                   Text(
                       text = ,
                       maxLines = ,
                       overflow = TextOverflow.Ellipsis,
                   )
               }
           }
       }
   }