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

user_3448282 0
Viewed 3324

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.

android-navigation android-architecture-navigation android-jetpack android
3 Answers

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.

user_34482820

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

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
    )
}
user_123131570
Related