How to change toolbar back button icon in android material components

Question

I would like to change the default navigate up icon (back button icon) to my custom icon. I not using a drawer, just a simple toolbar and material components

Is this possible?

Tiddly

Yes it's possible. Have you looked into the documentation of toolbar? – Placenta

Yes I did, what I could only find was navigationIcon attribute but this doesn't change the navigate up icon – Tiddly

Answer 1

If you are using a Toolbar to change the icon just use:

Toolbar toolbar = findViewById(R.id.xxx);
toolbar.setNavigationIcon(R.drawable.xxxx4);
setSupportActionBar(toolbar);

If you are using the ActionBar you can use:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.xxx);

You can also change it overriding in your app theme the homeAsUpIndicator attribute:

  <style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="homeAsUpIndicator">@drawable/...</item>
  </style>

If you are using the Navigation Components, currently there isn't a way to customize the HomeAsUpIndicator icon, and it is an expected behavior with the Up button displayed when you are on a non-root destination.
There is a workaround adding an addOnDestinationChangedListener after your setup method and checking the destination.
Something like:

navController.addOnDestinationChangedListener(
        new NavController.OnDestinationChangedListener() {
            @Override
            public void onDestinationChanged(@NonNull NavController controller, @NonNull NavDestination destination, @Nullable Bundle arguments) {
                if (destination.getId() == R.id.nav_xxx) {
                    //With ActionBar                        
                    //getSupportActionBar().setHomeAsUpIndicator(R.drawable.xxxx);

                    //With a Toolbar
                    toolbar.setNavigationIcon(R.drawable.xxxx);
                }
            }
        });

Jubilate

Hi, thanks for your answer, but i don't want to change the color, I want to change the ICON to my custom icon – Tiddly

@JamaMohamed Sorry my bad. I've updated the answer. – Jubilate

I was having problems making it to work. I was using the navigation component and later set it up with the toolbar. Your solution worked when I remove the setupWithNavController for the toolbar. Is there a way to change the icon when setting up the toolbar with the navigation component – Tiddly

@JamaMohamed Updated the code also with Navigation Components – Jubilate

Be careful first call setupWithNavController() and only thenafter addOnDestinationChangedListener(). – Surrender

Thank you, that Navigation Components workaround saved my day – Vulture

It will replace Menu (Hamburger) icon too! I need to change only Back icon. But with your solution there will be always Back button! Android with navigation component automatically handles if toolbar should show Menu icon or Back icon – Seriema

This is so wrong. You are talking about methods to set some additional icon which has nothing to do with Back button #69812862 – Seriema

Answer 2

If you have created a toolbar and set it as an ActionBar like below

toolbar = findViewById(R.id.toolbar)
setSupportActionBar(toolbar)

You have two options in setting a custom icon:

Option 1

toolbar?.setNavigationIcon(R.drawable.homeNavigationIcon)

Option 2

supportActionBar?.setHomeAsUpIndicator(R.drawable.homeNavigationIcon)

Glossographer

No... #69812862 – Seriema