BitRulez
BitRulez

Reputation: 769

Change Hamburger/backarrow toolbar color Android

I want to change the color of my hamburger/backarrow in the toolbar from colorPrimaryDark to white.

In my style.xml file I have 2 themes:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>
    <item name="colorButtonNormal">@color/white</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>


<!-- Toolbar theme. -->
<style name="toolbar" parent="AppTheme">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/white</item>
    <item name="colorControlNormal">@color/white</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

and this is my toolbar:

<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:fitsSystemWindows="true"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/colorPrimary"
  android:elevation="4dp"
  android:theme="@style/toolbar">
</android.support.v7.widget.Toolbar>

I tried with several methods and the only one that works is move <item name="android:textColorSecondary">@android:color/white</item> from toolbar theme to base application theme.

That's not ok for me because setting textColorSecondary to white in base theme change other components color too. I want to set it only for my toolbar. But it does not work even though I have<item name="android:textColorSecondary">@android:color/white</item> and set my toolbar style into the toolbar.xml using "android:theme="@style/toolbar"

enter image description here

enter image description here

the strange thing is that the other theme colors are applied properly.

where am I wrong?

Upvotes: 1

Views: 979

Answers (1)

BitRulez
BitRulez

Reputation: 769

Work around: (but i think it isn't an elegant solution)

i set the default arrow icon with this:

toolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_material);

and change hamburger color with this:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimary</item>
        <item name="colorButtonNormal">@color/white</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style> 

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

Upvotes: 2

Related Questions