Is it possible to change up button icon in Navigation Component?

问题

I would like to change up button icon in ActionBar that is working with Navigation Component. I've tried several options like:

supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_arrow_left_blue_24dp)

in MainAcitivty or

app:navigationIcon="@drawable/ic_arrow_left_blue_24dp"

in Toolbar .xml file and nothing seems to work.

I have a pretty standard setup with

setSupportActionBar(appToolbar.toolbar)
setupActionBarWithNavController(this, navController)

called in MainActivity:onCreate method.

I would expect that

supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_arrow_left_blue_24dp)

would work, because for example disabling title for ActionBar by calling:

supportActionBar?.setDisplayShowTitleEnabled(false)

works as expected and title is not set to Fragment name while navigating.

What's more, I investigated a little bit and in ActionBarOnDestinationChangedListener there is a call to setNavigationIcon which is setting an icon to DrawerArrowDrawable, which is a little bit weird since I'm not using Drawer in my setup.

Also changing to:

setupWithNavController(toolbar, navController)

is not working because ToolbarOnDestinationChangedListener also using the same DrawerArrowDrawable.

回答1:

I have found answer. I checked issue tracker for navigation component and it seems like for now it's impossible to change it without a workaround:

https://issuetracker.google.com/u/1/issues/121078028

Gladly it's still possible, we just need to implement OnDestinationChangedListener and change icon there as it's called after setNavigationIcon in AbstractAppBarOnDestinationChangedListener. Here is a code:

navController.addOnDestinationChangedListener { _, _, _ ->
      supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_arrow_left_blue_24dp)
}

You can even differ icon for different destinations.

It's temporary solution as this feature is not there yet. I'm using 1.0.0-alpha09 version of the navigation component.

回答2:

If you do not use a supportActionBar but use your own toolbar intead, the solution is as follows.

navController.addOnDestinationChangedListener { _, destination, _ ->

        if (destination.id == R.id.myDestination) {

            myToolbar.setNavigationIcon(R.drawable.myIcon)
        }
}

回答3:

You can implement NavigationController.OnDestinationChangedListener and use the Toolbar.setNavigationIcon method to set the icon. I would recommend using AppBarConfiguration.topLevelDestinations to determine if your destination is a top-level destination and set your icons accordingly. Kotlin Example:

navController.addOnDestinationChangedListener { _, destination, _ ->
            val isTopLevelDestination = appBarConfiguration.topLevelDestinations.contains(destination.id)
            toolbar.setNavigationIcon(
                if(isTopLevelDestination) R.drawable.ic_menu
                else R.drawable.ic_back
            )
        }

来源：https://stackoverflow.com/questions/54234481/is-it-possible-to-change-up-button-icon-in-navigation-component