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

Question

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.

Answer 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.

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