androidkotlinandroid-jetpackandroid-jetpack-composeandroid-jetpack-navigation

hide Top and Bottom Navigator on a specific screen inside Scaffold Jetpack Compose


I'm creating a simple app with bottom navigation and drawer.

I wrap all screens inside a Scaffold with topbar and bottom bar. I want to hide top bar and bottom bar on a specific screen. Does anyone know to how achieve that

here is the code for setting up navigation.

val navController = rememberNavController()
val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))

Scaffold(
    bottomBar = {
        AppBottomBar(navController)
    },
    topBar = {
        AppTopBar(scaffoldState)
    },
    drawerContent = {
        DrawerContent(navController, scaffoldState)
    },
    scaffoldState = scaffoldState
) {
    // ovoid bottom bar overlay content
    Column(modifier = Modifier.padding(bottom = 58.dp)) {
        AppNavigation(navController)
    }
}

AppNavigation contains NavHost for navigating to screens


Solution

  • for now, I can achieve that by checking current route to show or hide bottomBar, topBar. But I think there's must be better solutions. The way I wrap all screens inside Scaffold might not right.

    val navController = rememberNavController()
    val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))
    
    Scaffold(
        bottomBar = {
            if (currentRoute(navController) != "Example Screen") {
                AppBottomBar(navController)
            }
        },
        topBar = {
            AppTopBar(scaffoldState)
        },
        drawerContent = {
            DrawerContent(navController, scaffoldState)
        },
        floatingActionButton = {
            FloatingButton(navController)
        },
        scaffoldState = scaffoldState
    ) {
        // ovoid bottom bar overlay content
        Column(modifier = Modifier.padding(bottom = 58.dp)) {
            AppNavigation(navController)
        }
    }
    
    @Composable
    public fun currentRoute(navController: NavHostController): String? {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        return navBackStackEntry?.arguments?.getString(KEY_ROUTE)
    }