Blog Infos
Author
Published
Topics
,
Published
Series pitstops
def wearVersion = "1.0.0-alpha09"
implementation "androidx.wear.compose:compose-navigation:$wearVersion"
view raw build.gradle hosted with ❤ by GitHub

We would be using SwipeDismissableNavHost from the Compose for Wear OS library. Let’s have a look at its method signature

@Composable
public fun SwipeDismissableNavHost(
navController: NavHostController,
startDestination: String,
modifier: Modifier = Modifier,
route: String? = null,
builder: NavGraphBuilder.() -> Unit
)

Hmm, that looks familiar right? The NavHost composable has the same method signature, here have a look

@Composable
public fun NavHost(
navController: NavHostController,
startDestination: String,
modifier: Modifier = Modifier,
route: String? = null,
builder: NavGraphBuilder.() -> Unit
)
view raw NavHost.kt hosted with ❤ by GitHub
val swipeDismissableNavController = rememberSwipeDismissableNavController()
SwipeDismissableNavHost(
navController = swipeDismissableNavController,
startDestination = "Landing",
modifier = Modifier.background(MaterialTheme.colors.background)
) {
composable("Landing") {
ScalingLazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(
top = 28.dp,
start = 10.dp,
end = 10.dp,
bottom = 40.dp
),
verticalArrangement = Arrangement.Center,
state = scalingLazyListState
) {
items(10) { index ->
Chip(
modifier = Modifier
.fillMaxWidth()
.padding(top = 10.dp),
icon = {
Icon(
painter = painterResource(id = R.drawable.btn_star_big_on),
contentDescription = "Star",
modifier = Modifier
.size(24.dp)
.wrapContentSize(align = Alignment.Center),
)
},
label = {
Text(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.onPrimary,
text = "Item ${index + 1}"
)
},
onClick = {
swipeDismissableNavController.navigate("Detail")
}
)
}
}
}
composable("Detail") {
Column(
modifier = Modifier
.fillMaxSize()
.padding(
top = 60.dp,
start = 8.dp,
end = 8.dp
),
verticalArrangement = Arrangement.Top
) {
Text(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.CenterHorizontally),
color = MaterialTheme.colors.primary,
textAlign = TextAlign.Center,
fontSize = 22.sp,
text = "Hello from Details Screen"
)
}
}
}
view raw MainActivity.kt hosted with ❤ by GitHub

Job Offers

Job Offers


    Kotlin Multiplatform Mobile Developer

    Touchlab
    Remote
    • Full Time
    apply now

    Android Engineer

    Compare the Market
    London
    • Full Time
    apply now

    API Engineer

    American Express
    London
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

This code snippet can be used to make a simple app in Wear OS that looks like this:

 

The composable method in the code snippet above may look familiar to you if you have used Navigation Component in Jetpack Compose. This composable method actually comes from androidx.wear.compose.navigation.composable The method signature of both of these composable methods are the same. You can have a look here:

public fun NavGraphBuilder.composable(
route: String,
arguments: List<NamedNavArgument> = emptyList(),
deepLinks: List<NavDeepLink> = emptyList(),
content: @Composable (NavBackStackEntry) -> Unit
)

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
I recently found a bug that would cause a crash in all the apps…
READ MORE
blog
Typically apps go from the navigation bar to the status bar. With the release…
READ MORE
blog
It’s been about a year since Google announced Jetpack Compose’s 1.0 stable release, meaning…
READ MORE
blog

Edge-to-edge support for your Android app with Insetter

READ MORE

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.

Menu