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

OUR VIDEO RECOMMENDATION

,

Creating your first Wear OS app using compose

This will be an introductory session into the world of wearable apps. In this session we’ll discuss how to create a latest up to date wearable app by using “Compose for Wear OS” and Horologist…
Watch Video

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Creating your first Wear OS app using compose

Mikhail Kulaha
Compose engineer
Google

Jobs

No results found.

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
This article is for those who are faced with the choice of implementing their…
READ MORE
blog
This is one of those posts where I could have spilled out the answer…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

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

Menu