android - Back Arrow and Overflow Icons Wrong Color in Pre-Lollipop Devices After Updating to Support Library 23.2.0

Question

On pre-Lollipop devices, the overflow menu icon and back button on actionbar changed to black color after upgrading to Support Library 23.2.0. They are white (which is the right color) before the upgrade.

The correct color is:

The wrong color appears for pre-Lollipop devices after the upgrade, as shown with the overflow menu icon:

The theme in sytle.xml (pre-v21/Lollipop):

<resources xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--Used on the application level by the manifest.-->
    <style name="app_theme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/app_primary_colour</item>
        <item name="colorPrimaryDark">@color/app_primary_dark_colour</item>
        <item name="colorAccent">@color/app_accent_colour</item>
        <item name="android:windowBackground">@color/app_background</item>
        <item name="searchViewStyle">@style/custom_search_view_style</item>
    </style>

    <!--Used by activities.-->
    <style name="app_theme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!--TODO: What are these?-->
    <style name="app_theme.app_bar_overlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="app_theme.popup_overlay" parent="ThemeOverlay.AppCompat.Light" /> ... ... </resources>

I have looked here and here but didn't fix the issue.

UPDATE: Also see this Google bug report: https://code.google.com/p/android/issues/detail?id=201918

Answer 1

I could fix.

I found that AppCompat theme is using following resource for overflow button: abc_ic_menu_overflow_material.xml

Content of this resource is:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal">
    ...
</vector>

Then, I connected the dots:

• First: It is using colorControlNormal
• Second: It is using vector

HOW TO FIX

According to Library V23.2.0 Release notes (LINK HERE), we have to update build.gradle to add support to Vector:

build.gradle

Add following lines to your build gradle

Gradle 2.0 (I did not tested):

android {  
    defaultConfig {  
        vectorDrawables.useSupportLibrary = true  
    }  
}  

Gradle 1.5 (I'm using this.. it works):

android {  
    defaultConfig {  
        generatedDensities = []  
    }  

    aaptOptions {  
        additionalParameters "--no-version-vectors"  
    }  
}  

Fixing your theme

This step may be ignored. Some base themes already set colorControlNormal to white (such as AppCompat.Dark.ActionBar).

However, in my case, all button colors remained black and I had to add the colorControlNormal to my theme and override it with white color.

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorControlNormal">@color/white</item>
</styel>

I hope this can help you.

This was how I fixed my issue.