10

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.

user3448282
  • 2,629
  • 3
  • 25
  • 47

3 Answers3

12

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.

user3448282
  • 2,629
  • 3
  • 25
  • 47
1

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)
        }
}
Manu Pastor
  • 11
  • 1
1

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
    )
}
Xid
  • 4,578
  • 2
  • 13
  • 35