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?

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

Answer 2

Do it like this in kotlin

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

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);
            }
        }});

Answer 4

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