Wear OS: A Different Canvas

Watches are not tiny phones. They have round or square screens as small as 1.2 inches, limited battery, no keyboard, and are glanced at for seconds. Compose for Wear OS is built specifically for these constraints.

The good news: if you know Compose, you already know 80% of Wear OS development. The APIs are intentionally similar, with Wear-specific additions for watch interactions.

Setting Up a Wear Project

Wear OS uses different dependencies than mobile Compose. Your build.gradle needs:

dependencies {
    // Wear Compose foundation and material
    implementation("androidx.wear.compose:compose-foundation:1.3.0")
    implementation("androidx.wear.compose:compose-material:1.3.0")
    implementation("androidx.wear.compose:compose-navigation:1.3.0")
    
    // Horologist for advanced features
    implementation("com.google.android.horologist:horologist-compose-layout:0.5.0")
}

Wear-Specific Components

Wear Compose provides components designed for watch interactions:

@Composable
fun WearSampleApp() {
    // ScalingLazyColumn - the primary scrollable container for Wear
    ScalingLazyColumn(
        modifier = Modifier.fillMaxSize(),
        autoCentering = AutoCenteringParams(itemIndex = 0)
    ) {
        // Chip - the main interactive element (like Button)
        item {
            Chip(
                onClick = { /* action */ },
                label = { Text("Start Workout") },
                icon = {
                    Icon(
                        Icons.Default.PlayArrow,
                        contentDescription = null
                    )
                }
            )
        }
        
        // ToggleChip - for on/off settings
        item {
            ToggleChip(
                checked = true,
                onCheckedChange = { /* toggle */ },
                label = { Text("Heart Rate Monitoring") },
                toggleControl = {
                    Switch(checked = true, onCheckedChange = null)
                }
            )
        }
    }
}

Handling Round Screens

Content near the edges of round screens gets clipped. Use proper insets and padding:

@Composable
fun RoundAwareScreen() {
    // Scaffold handles curved edges automatically
    Scaffold(
        timeText = { TimeText() },
        vignette = { Vignette(vignettePosition = VignettePosition.TopAndBottom) },
        positionIndicator = {
            PositionIndicator(scalingLazyListState = listState)
        }
    ) {
        ScalingLazyColumn(
            state = listState,
            contentPadding = PaddingValues(
                horizontal = 10.dp  // Extra padding for round corners
            )
        ) {
            // Content
        }
    }
}

Design Guidelines

Follow these principles for successful watch apps:

• Keep interactions under 5 seconds — users glance, not stare
• Use large touch targets (minimum 48dp, prefer 52dp)
• Limit text to essential information
• Use high contrast colors for outdoor visibility
• Support both round and square screens
• Provide haptic feedback for confirmations