Android toolbar white vs black

Question

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/purple2"
    android:minHeight="56dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:titleTextAppearance="@style/ToolbarTitle" />

On my nexus 6, the back button is white, the 3 dot menu is white and the title is white. On an emulator I run, API level 14 the title is white but the back arrow and dot menu are black. How come?

In which way is this related to **CSS**? You probably have a different theme for those API levels. — m02ph3u5, Mar 08 '16 at 10:46
compile 'com.android.support:appcompat-v7:23.2.0' compile 'com.android.support:design:23.2.0' — user3278732, Mar 08 '16 at 10:58

score 1 · Answer 1 · answered Mar 08 '16 at 10:59

  defaultConfig {
    applicationId "com.myapp.app"
    minSdkVersion 10
    targetSdkVersion 22
    multiDexEnabled true
    versionCode 25
    versionName "1.24"
    generatedDensities = []
}
// This is handled for you by the 2.0+ Gradle Plugin
// This is handled for you by the 2.0+ Gradle Plugin
aaptOptions {
    additionalParameters "--no-version-vectors"
}

This solved situation for my 2 devices, not sure if now in all devices same story.

score 1 · Accepted Answer · edited May 23 '17 at 12:33

I could fix similar issue by checking solution below. I posted this same solution HERE.

I found that AppCompat theme is using following resource for overflow button (3 dots): 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>

So, as you can see, it is using colorControlNormal and vectorDrawables

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"  
    }  
}

Fix your theme

Maybe, this step is not needed (because maybe, your parent theme already set the colors to white).

But if those buttons remains black, you must add ColorControlNormal to your theme:

ToolbarLayout

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    ...
    android:theme="@style/MyToolBarStyle"
    ...  />

styles.xml

<style name="MyToolBarStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/white</item>
</styel>

This was how I fixed my issue.

Android toolbar white vs black

2 Answers2