I'm learning to use navigation-compose, which is a login page feature.

But I encountered a problem in the process of using it, I hope you can help me.

There is a flickering when the page switches, which doesn't look right. For this reason, I added a 3000ms animation to make this easier to see.

this is my code:

@Serializable
object PageLogin

@Serializable
data class PageRegister(val isFot: Boolean = false)

@Serializable
data class PageRegisterNext(val isFot: Boolean = false)

class MyLoginActivity : ComponentActivity() {

    val viewModel = MyLoginViewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {
            UniScannerTheme {
                val navController = rememberNavController()

                    enterTransition = {
                        fadeIn(
                            animationSpec = tween(
                                3000, easing = LinearEasing
                            )
                        ) + slideIntoContainer(
                            animationSpec = tween(3000, easing = EaseIn),
                            towards = AnimatedContentTransitionScope.SlideDirection.Start
                        )
                    },
                ) {

                    composable<PageLogin>() {
                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageLogin(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel
                            )
                        }
                    }

                    composable<PageRegister>() { backStackEntry ->

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegister(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isFot = pageReg.isFot,
                            )
                        }
                    }

                    composable<PageRegisterNext>(
                    ) { backStackEntry ->

                        val pageReg: PageRegister = backStackEntry.toRoute()

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegisterNext(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isFot = pageReg.isFot,
                            )
                        }
                    }

                }

            }
        }
    }


}

when i use navigate to second page

navHostController.navigate(PageRegister)

The first page is gone like this.

I would like to know the reason why this happens.

As you can see, when I navigate to the second page, the first page is no longer visible. Why? Shouldn't the first page remain in its current position? When I exit the second page, the first page loads again, which I don't understand.

Why is the first page invisible or gone ?

I'm learning to use navigation-compose, which is a login page feature.

But I encountered a problem in the process of using it, I hope you can help me.

There is a flickering when the page switches, which doesn't look right. For this reason, I added a 3000ms animation to make this easier to see.

this is my code:

@Serializable
object PageLogin

@Serializable
data class PageRegister(val isFot: Boolean = false)

@Serializable
data class PageRegisterNext(val isFot: Boolean = false)

class MyLoginActivity : ComponentActivity() {

    val viewModel = MyLoginViewModel()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {
            UniScannerTheme {
                val navController = rememberNavController()

                    enterTransition = {
                        fadeIn(
                            animationSpec = tween(
                                3000, easing = LinearEasing
                            )
                        ) + slideIntoContainer(
                            animationSpec = tween(3000, easing = EaseIn),
                            towards = AnimatedContentTransitionScope.SlideDirection.Start
                        )
                    },
                ) {

                    composable<PageLogin>() {
                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageLogin(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel
                            )
                        }
                    }

                    composable<PageRegister>() { backStackEntry ->

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegister(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isFot = pageReg.isFot,
                            )
                        }
                    }

                    composable<PageRegisterNext>(
                    ) { backStackEntry ->

                        val pageReg: PageRegister = backStackEntry.toRoute()

                        Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                            PageRegisterNext(
                                navHostController = navController,
                                modifier = Modifier.padding(innerPadding),
                                viewModel = viewModel,
                                isFot = pageReg.isFot,
                            )
                        }
                    }

                }

            }
        }
    }


}

when i use navigate to second page

navHostController.navigate(PageRegister)

The first page is gone like this.

I would like to know the reason why this happens.

As you can see, when I navigate to the second page, the first page is no longer visible. Why? Shouldn't the first page remain in its current position? When I exit the second page, the first page loads again, which I don't understand.

Why is the first page invisible or gone ?

• android
• navigation
• compose

• after you load another activity/fragment the old one goes on the stack. when you go back the top item on the stack is popped and displayed (and the loaded item is "destroyed"). this gives you 4 animations: stack entry/exit and display entry/exit – mr mcwolf Commented yesterday

1 Answer 1

The default exitTransition is fadeOut. If you want it to instead stay completely stationary as the second page runs your enterTransition, you need to explicitly set it to KeepUntilTransitionsFinished:

enterTransition = {
    fadeIn(
       animationSpec = tween(
           3000, easing = LinearEasing
       )
    ) + slideIntoContainer(
       animationSpec = tween(3000, easing = EaseIn),
       towards = AnimatedContentTransitionScope.SlideDirection.Start
    )
},
exitTransition = {
    ExitTransition.KeepUntilTransitionsFinished
},

Note that there are also popEnterTransition and popExitTransition parameters if you want to run a different transition when hitting the system back button.