Navigate to another screen without the previous scaffold in Jetpack Compose

Question

My app has a main screen with a Scaffold and a BottomNavigation bar:

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            MyApplicationTheme {
                Scaffold(
                    bottomBar = {
                        BottomBar(navController = navController)
                    }
                ) {
                    NavigationGraph(navController = navController)
                }
            }
        }
    }

...

@Composable
fun NavigationGraph(navController: NavHostController){
    NavHost(navController = navController, startDestination = BottomMenuOption.Home.route) {

        composable(route = BottomMenuOption.Home.route) {
            HomeScreen(navController = navController)
        }

        composable(route = BottomMenuOption.Settings.settings) {
            SettingsScreen()
        }
        composable(route = BottomMenuOption.Profile.route) {
            ProfileScreen()
        }

       composable(route = "feature") {
           FeatureScreen()
       }
    }

}

FeatureScreen has it's own Scaffold with a topBar instead of a bottomBar and when I navigate to it from HomeScreen, I want to replace the previous one from the main screen and just see a topBar but instead, I'm seeing the two bars in the screen.

@Composable
fun FeatureScreen() {
    Scaffold (
        topBar = {
            TopBar(" Feature Screen")
        }
            )  {

    }
}

Is it possible to accomplish this? I'm thinking it could be done by just using a new Activity but ideally, I would like to keep the Single Activity approach.

score 3 · Accepted Answer · answered Jan 03 '22 at 11:58

I would suggest creating a new function like this:

@Composable
fun MainScaffold(
    topBar: @Composable (() -> Unit) = {},
    bottomBar: @Composable (() -> Unit) = {},
    content: @Composable (PaddingValues) -> Unit){
    Scaffold(
        bottomBar = bottomBar,
        topBar = topBar,
        content = content
    )
}

then, use this main scaffold in your screens:

@Composable
fun HomeScreen(navController: NavHostController) {
    MainScaffold(
        bottomBar = { BottomBar(navController = navController) },
        content = {
        // content
     })
}

and in your feature screen:

@Composable
fun FeatureScreen() {
    MainScaffold (
        topBar = {
            TopBar(" Feature Screen")
        }
    )  {
        //content
    }
}

and in setContent

setContent {
       val navController = rememberNavController()
       VoiceAssistantJetpackComposeTheme {
           NavigationGraph(navController = navController)
       }}

With this solution BottomBar is not shared between the screens, is that the desired behavior? Won't UI flick when switching between tabs since the bottom bar has to be drawn again and again? — ycesar, Mar 15 '22 at 19:56

Navigate to another screen without the previous scaffold in Jetpack Compose

1 Answers1

Linked