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


    Android Test Automation Engineer

    Komoot
    Remote
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

It’s Time to Build for Wear OS

We’ll cover the evolution of Wear OS from its launch to the latest Wear OS 3. Highlighting what’s changed for users and developers, we’ll talk about what makes a successful Wear app and we’ll share…
Watch Video

It's Time to Build for Wear OS

Ataul Munim & Yuri Schimke
Android Developer Relations
Google

It's Time to Build for Wear OS

Ataul Munim & Yuri ...
Android Developer Re ...
Google

It's Time to Build for Wear OS

Ataul Munim & Yu ...
Android Developer Relatio ...
Google

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
This article is for those who are faced with the choice of implementing their…
READ MORE
blog
It’s been about a year since Google announced Jetpack Compose’s 1.0 stable release, meaning…
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