How to change toolbar back button icon in android material components

Viewed 3913

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?

enter image description here

2 Answers

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

enter image description here

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