colorControlNormal not setting toolbar back arrow color

Question

I'm trying to change the color of my toolbar's back arrow to purple, but the color I set for the colorControlNormal attribute of my custom toolbar theme isn't working. The toolbar should be purple but it remains white.

I've checked all over my layout's xml and the app Manifest to see if my toolbar theme is being overidden somewhere but i don't see this.

What's the problem?

styles.xml

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowContentTransitions">true</item>
        <item name="colorPrimary">@color/silver</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/roar_purple</item>
        <item name="actionMenuTextColor">@color/white</item>
        <item name="actionMenuTextAppearance">@style/customActionBar</item>
        <item name="android:textColorPrimary">@color/black_87_two</item>
        <item name="android:colorAccent">@color/roar_purple</item>
    </style>

    <style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
        <!-- Customize color of navigation drawer icon and back arrow -->
        <item name="colorControlNormal">@color/roar_purple</item>
        <item name="android:homeAsUpIndicator">@drawable/ic_chevron_left_white_48dp</item>
    </style>
...

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/phoneNumEntryAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ToolbarTheme"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
...

AndroidManifest.xml

<activity
    android:name=".LoginSignupEnterPhoneActivity"
    android:label="@string/title_activity_login_enter_phone_num"
    android:launchMode="singleTop"
    android:screenOrientation="portrait" 
android:parentActivityName="com.roarforgood.roar.PrivacyDisclaimerActivity"
    android:theme="@style/AppTheme">
</activity>

Flybynight

I doubt that it can change the drawable's color, maybe it only works on a vector drawable. Try to import a purple chevron rather than a white one. – Turgite

Answer 1

The filename ic_chevron_left_white_48dp looks like the ones that Android Studio creates when you use the New -> Image Asset or New -> Vector Asset menu options.

If you used Image Asset, delete all of your files and start over with Vector Asset. If you used Vector Asset in the first place, ignore this bit.

When I generate a white chevron vector, it looks like this:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="#FFFFFF"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:fillColor="#FF000000"
        android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

</vector>

To fix the problem, you need to do two things:

• Delete the android:tint attribute from the <vector> tag
• Change the android:fillColor attribute to ?attr/colorControlNormal in the <path> tag

That should leave you with this:

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:fillColor="?attr/colorControlNormal"
        android:pathData="M15.41,7.41L14,6l-6,6 6,6 1.41,-1.41L10.83,12z"/>

</vector>

When I do this, and use styles like you posted, I correctly see my colorControlNormal for my chevron in the toolbar.

Cable

Great answer! I was using a vector asset, but the fillColor attribute wasn't set to colorControlNormal. Changing this fixed the issue. Thanks! – Flybynight

If the icon preview becomes invisible due to using ?attr/colorControlNormal you can add tools:fillColor="#FF000000" to make the preview black again – Cabob

Answer 2

Notice:

 <item name="colorControlNormal">@color/roar_purple</item>
 <item name="android:homeAsUpIndicator">@drawable/ic_chevron_left_white_48dp</item> //delete this line

You only want show back arrow, so just do like this:

 mToolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(mToolbar);
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 getSupportActionBar().setDisplayShowHomeEnabled(true);

Verlinevermeer