Wear OS with Jetpack Compose: ScalingLazyColumn and Curved Layouts

#android #kotlin #compose #tutorial

Wear OS requires unique UI patterns. Learn ScalingLazyColumn, CurvedLayout, and round-screen optimization.

Add Wear OS Compose Dependency

implementation("androidx.wear.compose:compose-material:1.2.0")
implementation("androidx.wear.compose:compose-foundation:1.2.0")

ScalingLazyColumn for Smart Scaling

import androidx.wear.compose.material.ScalingLazyColumn
import androidx.wear.compose.material.ScalingLazyListState

@Composable
fun WearList() {
    val state = rememberScalingLazyListState()

    ScalingLazyColumn(
        state = state,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        items(100) { index ->
            Text(
                text = "Item $index",
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

CurvedLayout for Circular Screens

import androidx.wear.compose.material.CurvedLayout
import androidx.wear.compose.material.curvedText

@Composable
fun CircularMenu() {
    CurvedLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        curvedText(
            text = "Menu Item 1",
            modifier = CurvedModifier.weight(1f)
        )
        curvedText(
            text = "Menu Item 2",
            modifier = CurvedModifier.weight(1f)
        )
    }
}

Rotary Input Handling

import androidx.wear.compose.material.rememberRevealState

@Composable
fun ScrollableContent() {
    val revealState = rememberRevealState()

    LaunchedEffect(revealState) {
        revealState.onChange { amount ->
            // Handle rotary scroll (0f to 1f)
        }
    }
}

Ambient Mode

class MainActivity : WearableActivity() {
    override fun onEnterAmbient(ambientDetails: Bundle?) {
        super.onEnterAmbient(ambientDetails)
        // Reduce refresh rate, disable colors, simplify UI
        setAmbientMode(true)
    }

    override fun onExitAmbient() {
        super.onExitAmbient()
        setAmbientMode(false)
    }
}