Change back icon color in toolbar

Question

I'm using the Android component navigation for a DrawerLayout with NavigationView.

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);
        LoginActivity.toClose.finish();
        LoginViewModel viewModel = ViewModelProviders.of(this).get(LoginViewModel.class);
        Toolbar toolbar = findViewById(R.id.toolbar_menu);
        setSupportActionBar(toolbar);
        ActionBar actionbar = getSupportActionBar();
        assert actionbar != null;

        drawerLayout = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view_menu);
        navigationView.inflateMenu(viewModel.setUserInterface());
        NavController navController = Navigation.findNavController(this, R.id.fragment_main);
        NavigationUI.setupWithNavController(navigationView, navController);
        NavigationUI.setupActionBarWithNavController(this,navController,drawerLayout);
     }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Everything's ok, except that the "Up button" are in a different color that my title in The action bar.

The XML for the Toolbar is:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:textColor="#FFF"
    android:textColorPrimary="#FFF"
    android:theme="@style/Toolbar"
    app:layout_constraintTop_toTopOf="parent"
    app:titleTextColor="#FFF"
    app:title="@string/app_name"/>

The title is white, but the icon is black.

My question is: how can I change the color of this icon?

Even if I change the primary color to white and the theme editor show me the icon in white, when the app is running, the color is still black.

The app that I'm building has minSdkVersion 15 and I run it in a phone with API 7 SDK 24. I didn't run in the emulator with SDK 15 yet.

Answer 1

use this style

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <!-- Customize color of Toolbar -->
        <item name="colorControlNormal">@color/WhiteColor</item>
    </style>

and then use it in app:theme="@style/ToolbarTheme" in your Toolbar XML :

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:textColor="#FFF"
        android:textColorPrimary="#FFF"
        app:theme="@style/ToolbarTheme"
        app:layout_constraintTop_toTopOf="parent"
        app:titleTextColor="#FFF"
        app:title="@string/app_name"/>

Answer 2

Another option, with new Themes (Light/Dark modes) is to use styles and themes.

First approach.

1. This works if you use default icons and in a fragment (e.g.) you use following: toolbar.setupWithNavController(findNavController()), so then in layout you must do following:
2. In your app theme in xml:

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="drawerArrowStyle">@style/MyDrawerArrowToggleStyle</item>

Note: This solution is for your own toolbars, which you placed in your layout by yourself, that's why my main app theme is Theme.MaterialComponents.DayNight.NoActionBar. However, I haven't tried with default ActionBar, so maybe it will work as well.

3. Your drawer arrow/toggle style:

<style name="MyDrawerArrowToggleStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/your_color_here</item>
    </style>

And now all default "<-" icons in toolbars will be in your color. It should work for Hamburger icons too. But I didn't check, as I don't have navigation drawer.

Second approach.

When you want your own icon or action in NavigationOnClickListener.

1. In the fragment:

toolbar.setNavigationOnClickListener { 
   findNavController().navigateUp()
   //plus another actions if required
}
toolbar.setNavigationIcon(R.drawable.your_icon_here)

2. In main theme:

<item name="toolbarNavigationButtonStyle">@style/MyAppToolbarNavButtonStyle</item>

3. My style:

<style name="MyAppToolbarNavButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="tint">@color/your_color_here</item>
</style>