:compass: Navigation Compose : ~How do i start (`navigate`) a page (`composable`) as transparent?~ :...

# compose

[theapache64]

🧭 Navigation Compose : How do i start (navigate) a page (composable) as transparent?
✏️ Rephrased : How to overlay one composable on another composable when using navigation-compose library? OR how to create transparent page?

[Colton Idle]

Not sure I understand the question, but the new compose navigation animation in accompanist seems like it would be able to help tween between pages like this (the latest compose nav) actually uses a crossfade as a default anim.

[Shakil Karim]

This composable will be visible after Animation is completed, Or do you mean some thing else?

@Composable
fun SomeComposable(content: @Composable (Modifier) -> Unit) {

val animatedAlpha = remember { Animatable(0f) }
LaunchedEffect(animatedAlpha) {
animatedAlpha.animateTo(1f, HighlightAppearanceAnimationSpec)
}
val uiActive by remember(animatedAlpha) { derivedStateOf { animatedAlpha.value != 0f } }

if(uiActive) {
//// Some UI
}

}

[theapache64]

I think i need to rephrase my question 😄

[theapache64]

I am not talking about animating the transition. I want to overlay one composable on another composable

Example : I’ve two destinations, A and B . When navigated from A to B i want to see A through B provided I’ve a transparent background in B ?

NavHost(navController = navController, startDestination = "A") {
    composable("A") {
        Box(
            modifier = Modifier
                .background(Color.Red)
                .clickable {
                    navController.navigate("B")
                }
                .fillMaxSize()
        )
    }
    composable("B") {
        Box(
            modifier = Modifier
                .background(Color.Blue.copy(alpha = 0.5f)) // I want to see A :'(
                .fillMaxSize()
        )
    }
}

[theapache64]

equivalent of @android:style/Theme.Translucent 😄

[theapache64]

cc @Colton Idle @Shakil Karim ☝️

[Shakil Karim]

Isn't a simple Box useful in this case?
Box {
ComposableA()
ComposableB()
}

[theapache64]

i mean, the `navigation-compose`’s composable 😄 not normal @Composable

[theapache64]

they should have named it something else 😄

[Ian Lake]

The only FloatingWindow destinations (those that don't fully replace the previous destination) are dialog and bottomSheet

[theapache64]

@Ian Lake Is there any future plan to support transparency on composable also? something like

NavHost{
    composable(route = "B", isTransparent = true){
        ...
    }
}

which would render both B and the previous entry

[Ian Lake]

Only FloatingWindow destinations live above the previous entry