5

I'm trying to use a custom back navigation instead of using the default back arrow. I want to use a cancel icon:

enter image description here

by using app:navigationIcon="@drawable/ic_cancel_white_24dp" in my XML file.

When I run the app, however, the icon is never displayed. Instead, it shows the default back arrow in black: enter image description here

I'm using the NAV controller and AppBarConfiguration to set up the toolbar (because the toolbar is styled differently for every fragment I have):

private fun setUpActionBar() {
   val navController = findNavController()
   val appBarConfiguration = AppBarConfiguration(navController.graph)
   binding.toolbar.setupWithNavController(navController, appBarConfiguration)
   binding.toolbar.inflateMenu(R.menu.menu)
}

How can I replace the default arrow with my custom icon? Also - why is the default arrow black? Is this a theming issue?

susosaurus
  • 459
  • 10
  • 28

1 Answers1

4

You can use the addOnDestinationChangedListener to set your own icons after your setup method.

navController.addOnDestinationChangedListener { _, destination, _ ->
   if(destination.id == R.id.xxxx) {
       toolbar.setNavigationIcon(R.drawable.xxxx)
   } else {
       //
   }
}

About the color of the up icon check this answer.
Just override the colorOnPrimary or the colorControlNormal in your Toolbar using the android:theme attribute.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841