CODEWITHSUNDEEP
androidandroid-toolbarandroid-jetpackandroid-navigationandroid-jetpack-navigation
raisedandglazed
raisedandglazed

Reputation: 824

Hide Toolbar back arrow with NavigationComponent and BottomNavigationView

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?enter image description here

Upvotes: 11

Views: 10205

Answers (5)

cumpatomas
cumpatomas

Reputation: 61

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
                ),
  1. 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
                }
            }

Upvotes: 0

Yossi
Yossi

Reputation: 347

Do it like this in kotlin

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

Upvotes: 6

Muhammad khaled
Muhammad khaled

Reputation: 374

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

Upvotes: 4

apksherlock
apksherlock

Reputation: 8371

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

Upvotes: 41

Siddhesh Golatkar
Siddhesh Golatkar

Reputation: 295

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

Upvotes: 2

Related Questions