android - How to implement navigation with bottom app bar

Question

I have a project with the following 4 layouts:

I have actually 1 activity holding a bottom app bar and the NavHostFragment where the fragments get injected. The Main Fragment is the home view. There is a Management and a Setting fragment, both are top-level views like the home view but doesn't depend on each other. These 3 fragments can be switched by clicking an item in the nav drawer. For simplification, I'm trying the new navigation architecture component.

Now I have some design questions:

1. Should I move the bottom app bar into the fragments, cause they don't depend on each other and the FAB button has another action, otherwise I had to change the onClickListener in the activity when the fragments switch?

1.1 Or should I even show the bottom app bar in the management fragment? Maybe just the top bar with the Up caret.

1.2 Or bottom app bar + top bar and Up caret

1.3 and what about the drawer icon, should I display it in the Mgmt fragment

2. Should I use a fragment or an activity for the Settings fragment? When I use a fragment, I have to move the bottom app bar into the fragments. Otherwise, the bottom app bar would be visible in the Settings Fragment

3. The Management Fragment has just a recycler view. Clicking on an item should open a DetailView. Should I use a fragment or an activity here?

4. I read the doc about the navigation architecture component and there is a section about customizing the destination. Also, ich checked the source code and know that the fragments get replaced. Further, I checked out some frequently used Apps how they implemented the navigation with a nav drawer and noticed, they all replace their fragments. Why does no one hide/show the fragments, is there a reason not to doing this? Assume we have a fragment with a listview that holds data collected from a database or another expensive task. So wouldn't it be better to show/ hide these fragments instead of replacing it?

Sorry, it's my first app and I'm really confused about this topic, and it seems there are no official recommendations about it out there not even Material Design guidelines don't really make a reference about it.

How would you do it?

Answer 1

setupWithNavController on a Toolbar (or subclasses like BottomAppBar) only set up the Up icon and the title - they do not hook up menu items added to the Toolbar.

As per the Tie destinations to menu items documentation, you must set up your own listener and call onNavDestinationSelected(). For a BottomAppBar, that would be done by setting a Toolbar.OnMenuItemClickListener:

val navController = Navigation.findNavController(this, R.id.navigation_fragment)
myBottomBar.replaceMenu(R.menu.menu_with_nav_item)

myBottomBar.setupWithNavController(navController)

// Connect MenuItems to the NavController
myBottomBar.setOnMenuItemClickListener {  menuItem ->
    menuItem.onNavDestinationSelected(navController)
}