Appcompat toolbar's back button and option button are black

Question

We're using the new toolbar instead of the old actionbar in our app.

Everything works as expected on Android 5 and higher. On Android 4 and lower, the back button and the option button are displayed in black

while they should be white

Our themes.xml is defind as follow :

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>

    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDarker</item>
    <item name="colorAccent">@color/ColorPrimaryRipple</item>
</style>

<!-- AppCompat Theme Transparent -->
<style name="Theme.Translucent" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@color/club_nestle_description_activity_background</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:colorBackgroundCacheHint">@null</item>
</style>

The toolbar :

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Any help would be appreciated !

score 2 · Accepted Answer · answered Mar 04 '16 at 09:12

I found the solution : my gradle file was missing the following lines :

android {  
   defaultConfig {  
     generatedDensities = []  
  }  

  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }

score 1 · Answer 2 · edited May 23 '17 at 12:25

Try this. Create a custom theme for your Toolbar:

<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@android:color/white</item>
    <item name="android:textColorPrimary">@android:color/white</item>
</style>

And apply like this

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/ColorPrimary"
    android:elevation="4dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/MyToolbarStyle" />

EDIT: If this dont work try changing tint color programmatically in your Activity:

final Drawable upArrow = ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Refer for more info to @Carles answer .

Hope its helps!

try adding also in your `AppTheme` this line `@android:color/white` — Gueorgui Obregon, Mar 03 '16 at 21:11

score -1 · Answer 3 · answered Mar 03 '16 at 21:32

-1

Try this to your AppTheme style:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

answered Mar 03 '16 at 21:32

T D Nguyen

7,054
4
51
71

Appcompat toolbar's back button and option button are black

3 Answers3