Use jetpack navigation to display back arrrow in the action bar

Issue

I have a jetpack navigation graph setup with bottom navigation and an action bar. The bottom navigation has 3 tabs. 1 of these tabs has a detailed fragment that I would like to display the back-arrow on in the action bar.

In MainActivity onCreate(), I've added:

supportActionBar?.setDisplayHomeAsUpEnabled(true)

This displays the back button on every tab & fragment.

How can I prevent display of the back button unless the user is navigated to a non-top level fragment? Is there a method that detects when this particular navigation has occured? If so, I presume I can do something like supportActionBar?.setDisplayHomeAsUpEnabled(false)

Additionally, is there a way I can display a custom back arrow on the child pages? The default arrow does not fit the UI.

Happy to provide more detail if needed.

Solution

You could use a combination of setupWithNavController(BottomNavigationView,NavController) and setupActionBarWithNavController(AppCompatActivity,NavController,AppBarConfiguration) from NavigationUI. The first will bind the bottom navigation to the navigation controller, the second will set up the support action bar to regard the navigation.

With the AppBarConfiguration.getTopLevelDestinations() you will be able to configure when to display the back arrow. The default is to only regard the root of the navigation graph as a top level destination, but you can also use another builder to define a set of top level destinations.

Answered By - tynn