How can I change the color of icons in Toolbar?

Question

I am trying to implement Material Design in my app, using the Material Components library. I want my icons and back arrow to be white but I am unable to change their color. Where am I going wrong in my code?

I have tried adding the following attributes inside my style 'NITraffic.Toolbar' which has had no effect:

<item name="subtitleTextColor">@color/color_on_primary</item>
        <item name="android:colorControlNormal">@color/color_on_primary</item>
        <item name="android:textColorSecondary">@color/color_on_primary</item>

My top level theme in theme.xml:

    <style name="NITrafficTheme.DayNight" parent="Base.NITrafficTheme"/>

    <style name="Base.NITrafficTheme" parent="Base.MaterialThemeBuilder">

        <!--Material color attributes -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
        <item name="colorSecondary">@color/color_secondary</item>
        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>

        <item name="android:colorBackground">@color/color_background</item>
        <item name="colorSurface">@color/color_surface</item>
        <item name="colorError">@color/color_error</item>

        <item name="colorOnPrimary">@color/color_on_primary</item>
        <item name="colorOnSecondary">@color/color_on_secondary</item>
        <item name="colorOnBackground">@color/color_on_background</item>
        <item name="colorOnSurface">@color/color_on_surface</item>
        <item name="colorOnError">@color/color_on_error</item>

....

        <!--Component styles-->
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
        <item name="bottomSheetDialogTheme">@style/NITraffic.BottomSheetDialog</item>
        <item name="toolbarStyle">@style/NITraffic.Toolbar</item>
        <item name="bottomNavigationStyle">@style/NITraffic.BottomNavigation</item>
    </style>

    <style name="Base.MaterialThemeBuilder" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <item name="android:statusBarColor">?colorPrimary</item>
        <item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>
        <item name="android:navigationBarColor">?colorPrimary</item>
        <item name="android:windowLightNavigationBar" tools:ignore="NewApi">false</item>
        <item name="android:navigationBarDividerColor" tools:ignore="NewApi">?colorPrimary</item>

        <!--Remap legacy AppCompat attributes to MaterialComponent attributes-->
        <item name="colorPrimaryDark">?colorPrimaryVariant</item>
        <item name="colorAccent">?colorSecondary</item>
    </style>

My styles.xml file:

    <style name="NITraffic.Toolbar" parent="@style/Widget.MaterialComponents.Toolbar.Primary">
        <item name="subtitleTextColor">@color/color_on_primary</item>
        <item name="android:colorControlNormal">@color/color_on_primary</item>
        <item name="android:textColorSecondary">@color/color_on_primary</item>
    </style>

My Toolbar in the activity:

    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
        />

    </com.google.android.material.appbar.AppBarLayout>

Answer 1

I am using below theme, Where i am getting white back icon in toolbar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorControlNormal">@android:color/white</item>
    </style>


</resources>

You need to set white color under colorControlNormal in theme as above.

Answer 2

you can set Toolbar navigation icon like this: Toolbar toolbar = binding.toolBar; toolbar.setNavigationIcon(R.drawable.baseline_arrow_back_white_24);