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


    Softwareentwickler Java und Kotlin / Android (w/m/d)

    AVM GmbH
    Berlin
    • Full Time
    apply now

    Senior Android Engineer

    Busuu
    Madrid
    • Full Time
    apply now

    Mobile Developer Android (m/w/d) Firebase

    REWE digital
    Köln / Cologne
    • 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
Google recently announced that Compose for Wear OS is in Developer Preview. In this…
READ MORE
blog
In this article I will cover the development of a chromatic tuner for Wear…
READ MORE
blog
In this blog post, we will explore the ScalingLazyColumn composable. It makes adding scaling…
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