Using NavController and BottomNavigation in one app

Question

I am developing an app which has a beginning splash screen and then goes to homescreen page which has a bottomnavigation with two tabs, Home and About. When user clicks on one card in home page, app must navigate to details about that card where bottomnavigation is not needed anymore and when clicks on About tab, navigates to About and BottomNavigation is still shown. Inhome page everything is shown by composables. I have made it with to navhostcontrollers and it is working correctly but is it a correct approach or there are better ways to handle such an issue?

I have explained what I have tried

this is my main activity

    ScreenNavGraph(navController = rememberNavController())

which calls

    @Composable
    fun ScreenNavGraph(
        navController: NavHostController
    ) {
    NavHost(navController = navController, startDestination = 
    MainScreens.Splash.route) {
    //Default navigation to splash screen
    composable(route = MainScreens.Splash.route) {
        SplashScreen(navController)
    }
    //Navigate to a HomeScreen loader
    composable(route = MainScreens.Home.route){
        HousifyRootScreen(screenNavController = navController)
    }
    //Navigate to screen of each homes details
    composable(route = MainScreens.Details.route){
        HousifyDetailsScreen()
    }
}

}

and then after splash it is navigated to

HousifyRootScreen(screenNavController = navController) where I have:

@Composable
fun HousifyRootScreen(bottomBarNavController: NavHostController = 
rememberNavController(), screenNavController: NavController) {
Scaffold(
    bottomBar = {  BottomBar(navController = bottomBarNavController) }
) {
    val housifyViewModel: HousifyViewModel = viewModel()
    HomeNavGraph(navController = bottomBarNavController,
        screenNavController = screenNavController,
        housifyUiState = housifyViewModel.housifyUiState)
}

}

and HomeNavGraph is the main page that loads after Splash

@Composable
fun HomeNavGraph(
    navController: NavHostController,screenNavController: 
    NavController,housifyUiState: HousifyUiState
) {
    var isSearchPage by remember { mutableStateOf(false)}
    when(housifyUiState) {
        is HousifyUiState.Success -> 
        HousifyHomeScreenContent(housifyUiState = housifyUiState.houses,
        onButtonClick = 
           {screenNavController.navigate(MainScreens.Details.route) },
           onSearchClick = {isSearchPage = true})

}

NavHost(
    navController = navController,
    startDestination = BottomBarScreen.Home.route
) {
    composable(route = BottomBarScreen.Home.route) {
        if (isSearchPage) {
            HousifySearchScreen { isSearchPage = false }

        }
    }

    composable(route = BottomBarScreen.About.route) {
        HousifyAboutScreen()
    }
}

}

Please provide enough code so others can better understand or reproduce the problem. — Community, Jan 12 '23 at 01:08

score 0 · Answer 1 · answered Jan 12 '23 at 21:09

0

I think that you have 2 possible options:

You can create BottomNavigationBar as custom View/Composable and add it to every screen that needs to have it but you should handle all navigation by hand
You have one BottomNavigationView in MainActivity(or main composable) and listen for changes and hide/show bottom bar for specific screen

answered Jan 12 '23 at 21:09

pbl9

91
3

1

Thanks for your reply. I have done something like the second option you have given me. but let me provide more details so that it is more clear. – saman saeedi Jan 13 '23 at 11:33
Ok, let's say that you use jetpack navigation, with 3 Fragments: Fragment1, Fragment2, Fragment3 and in your activity you have FragmentContainer and BottomNavigationView. Lets say that you want to show BottomNavigationView on Fragment1 and Fragment3 but hide on Fragment2. In your activity in onCreate method you can write something like this `navController.onDestinationChangedListener { _, destination, _ -> bottomNavigationView.isVisible = destination.id != R.id.fragment2 }` – pbl9 Jan 14 '23 at 17:08
Thanks for your reply. The problem is that I am not using Fragments and I am using Jetpack Compose and I load composables. one navigation is done from BottomNavigation(home and about screen) and the other is done by main navigation(home and details screen). maybe it is better I share the link to my github and you take a look at the project. https://github.com/samansaeedi102/DTT-assessment – saman saeedi Jan 21 '23 at 16:34
Ok, I think you have to create your bottom bar as custom composable. Next, add that bottom bar in every composable that represents your screen. To achieve effect that items in bottom bar are properly selected you should pass NavController to your composable bottom bar and listen for navigation changes and based on that update bottom bar – pbl9 Jan 25 '23 at 21:11

Using NavController and BottomNavigation in one app

1 Answers1