Skip to content

Compose Layout library

Syncs the TimeText, PositionIndicator and Scaffold to the current navigation destination state. The TimeText will scroll out of the way of content automatically.

WearNavScaffold(
    startDestination = "home",
    navController = navController
) {
    scalingLazyColumnComposable(
        "home",
        scrollStateBuilder = { ScalingLazyListState(initialCenterItemIndex = 0) }
    ) {
        MenuScreen(
            scrollState = it.scrollableState,
            focusRequester = it.viewModel.focusRequester
        )
    }

    scalingLazyColumnComposable(
        "items",
        scrollStateBuilder = { ScalingLazyListState() }
    ) {
        ScalingLazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .scrollableColumn(it.viewModel.focusRequester, it.scrollableState),
            state = it.scrollableState
        ) {
            items(100) {
                Text("i = $it")
            }
        }
    }

    scrollStateComposable(
        "settings",
        scrollStateBuilder = { ScrollState(0) }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(state = it.scrollableState)
                .scrollableColumn(focusRequester = it.viewModel.focusRequester, scrollableState = it.scrollableState),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            (1..100).forEach {
                Text("i = $it")
            }
        }
    }
}

Box Inset Layout.

Use as a break glass for simple layout to fit within a safe square.

Box(
    modifier = Modifier
        .fillMaxRectangle()
) {
    // App Content here        
}

Fade Away Modifier

AmbientAware composable

AmbientAware allows your UI to react to ambient mode changes. For more information on how Ambient mode and Always-on work on Wear OS, see the developer guidance.

You should place this composable high up in your design, as it alters the behavior of the Activity.

@Composable
fun WearApp() {
    AmbientAware { ambientStateUpdate ->
        // App Content here
    }
}

If you need some screens to use always-on, and others not to, then you can use the additional argument supplied to AmbientAware.

For example, in a workout app, it is desirable that the main workout screen uses always-on, but the workout summary at the end does not. See the ExerciseClient guide and samples for more information on building a workout app.

@Composable
fun WearApp() {
    // Hoist state here for your current screen logic

    AmbientAware(isAlwaysOnScreen = currentScreen.useAlwaysOn) { ambientStateUpdate ->
        // App Content here
    }
}

Download

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.android.horologist:horologist-compose-layout:<version>"
}