0

I'm building some screens in Jetpack Compose with the use of androidx.navigation.compose.NavHost and without fragments (the new way). I want to navigate from one screen to another while keeping an element of the screen fixed. For example this is the first screen, by pressing the blue button it goes to the second screen, and here I want the black element to remain fixed (without dissolving and reappearing on the next screen):

enter image description here

This is the second screen:

enter image description here

I know that the navigation component just changes screens, so maybe the solution would be to have two screens on the window at the same time, one of which remains fixed while the other transits. How do I achieve that? I also tried with com.google.accompanist.navigation.animation.AnimatedNavHost but it doesn't seem to have that option available.

Simone
  • 1,418
  • 15
  • 22

1 Answers1

0

Just use "when" statement to change the composable below the black area such as:

// Considering this area is inside of a Column scope

val currentSelectedComposable by remember {
    mutableStateOf(0) // Using enums is a better approach
}
FixedBlackArea()
when(currentSelectedComposable) {
    0 -> FirstComponent(
        onButtonPressed = {
            currentSelectedComposable = 1
        }
    )
    1 -> SecondComponent(
        onButtonPressed = {
            currentSelectedComposable = 0
        }
    )
}

No need to use navigation and I believe this reduces complication in the code.

Subfly
  • 492
  • 2
  • 13
  • Thank you, this is a good idea but I cannot get rid of the navigation system in my app – Simone Sep 21 '22 at 11:26
  • why do you need to remove the navigation? If your app is only one screen than removing the navigation is ok but you need navigation to change to different screens. – Subfly Sep 21 '22 at 19:09
  • In your example you bypass the navigation system for every screen that needs to have an element fixed, but I need to keep it. – Simone Sep 22 '22 at 07:34