10

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Jama Mohamed
  • 3,057
  • 4
  • 29
  • 43

2 Answers2

13

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • Hi, thanks for your answer, but i don't want to change the color, I want to change the ICON to my custom icon – Jama Mohamed May 29 '20 at 08:11
  • @JamaMohamed Sorry my bad. I've updated the answer. – Gabriele Mariotti May 29 '20 at 10:32
  • 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 – Jama Mohamed Jun 04 '20 at 12:25
  • @JamaMohamed Updated the code also with Navigation Components – Gabriele Mariotti Jun 04 '20 at 21:15
  • 2
    Be careful first call setupWithNavController() and only thenafter addOnDestinationChangedListener(). – PeterPazmandi Aug 09 '20 at 06:00
  • 3
    Thank you, that `Navigation Components` workaround saved my day – Dasser Basyouni Feb 02 '21 at 15:33
  • 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 – user924 Nov 02 '21 at 11:33
  • This is so wrong. You are talking about methods to set some additional icon which has nothing to do with Back button https://stackoverflow.com/questions/69812362/how-to-set-my-own-menu-and-back-icons-for-toolbar – user924 Nov 02 '21 at 14:54
-1

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)
nadinnnnnne
  • 509
  • 4
  • 4
  • No... https://stackoverflow.com/questions/69812362/how-to-set-my-own-menu-and-back-icons-for-toolbar – user924 Nov 02 '21 at 14:55