Hide Toolbar back arrow with NavigationComponent and BottomNavigationView

Question

I'm in the process of implementing NavigationComponent coupled with a BottomNavigationView and I am noticing that the back arrow is shown in the toolbar for all fragment destinations except the one specified as the startDestination in my navigation graph.

All examples of this implementation that I've been able to find show similar behavior. Hiding the back arrow for each associated fragment of a BottomNavigationView seems like a more natural design in my opinion, (hitting a back arrow in the Toolbar to navigate from tab 2 to tab 1 feels odd to me and I've never seen this before).

See the image below for an example and what I'm looking to achieve. Any way to accomplish this?

Gambit

Answer 1

If you are using a AppBarConfiguration should look like this.

val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.homeFragment,
                R.id.dashboardFragment,
                R.id.notificationsFragment
            )
        )

setupActionBarWithNavController(navController!!, appBarConfiguration!!)

Which means that all of your fragments are top level destinations.

Heads up , when you hit back , you will get out of the app (or if configured to the first fragment, in BottomSheets you get this behaviour for example). So if you need another case you should configure onBackPressed for each fragment

Termor

This answer is exactly what I was looking for. Thank you! – Gambit

This is the right approach, except for me the "setupActionBarWithNavController" function didn't work but "setupWithNavController" did. Might depend on what type of toolbar you are using. – Donte

Tried this and worked. And, it kept going back to first tab when back pressed while in other tabs so, perfect! – Phyla

That solution is good If you have a few fragments. But what about If you have about 50 fragments or much. If think that approach is not good. – Homebody

Answer 2

Do it like this in kotlin

    navController.addOnDestinationChangedListener { _, destination, _ ->
        if (destination.id == R.id.searchFragment) {
            binding.toolbar.navigationIcon = null
        } else {
        }
    }

Servais

Answer 3

the simple way that will remove arrow back icon is to make destination change listener and if destination id == R.id.fragmentYouWantRemoveArrawBack setNavigationIcon(null);

EX:

navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
        @Override
        public void onDestinationChanged(@NonNull NavController controller,
                                         @NonNull NavDestination destination,
                                         @Nullable Bundle arguments) {

            if (destination.getId() == R.id.myChiehkFrament) {
                findViewById(R.id.chat_toolbar_constraintL).setVisibility(View.VISIBLE);
                toolbar.setNavigationIcon(null);
            } else {
                findViewById(R.id.chat_toolbar_constraintL).setVisibility(View.GONE);
            }
        }});

Thiosinamine

That's cool. I combined it with getSupportActionBar().setDisplayHomeAsUpEnabled(false)and getSupportActionBar().setDisplayShowHomeEnabled(false). It works perfectly. It would also be cool to ask the fragment itself, e.g. by an interface or check whether it has an annotation, instead of checking the fragment by its id. – Loganloganberry

Answer 4

use getActionBar().setDisplayHomeAsUpEnabled(false) to remove home/back button from toolbar

Natoshanatron

Answer 5

I've tried everything, but what only worked for me was:

1. Set the Fragment you don't want the arrow in as Top Destination:

     appBarConfiguration = AppBarConfiguration(
                setOf(
                    R.id.homeFragment,
                    R.id.dashboardFragment,
                    R.id.notificationsFragment
                ),

2. Add this Listener check to hide the Menu if you don't want it in this fragment:

    navController.addOnDestinationChangedListener { _, destination, _ ->
                if (destination.id == R.id.notificationsFragment) {
                         binding.yourMenuId.isGone = true
                }
            }

Toein