How to change Toolbar home icon(back arrow) color in new material theme?

Question

I tried everything one by one present on links like

How to change color of the back arrow in the new material theme?

How to change Toolbar home icon color

Change toolbar back arrow color

How to change change text and arrow color on Toolbar?

Android: unable to change color of back arrow navigation icon

etc,

But nothing works for me.

My layout xml code,

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        style="@style/MyCustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:minHeight="?attr/actionBarSize"
        app:tabMaxWidth="0dp" />

in styles.xml

<style name="MyCustomTabLayout" parent="Theme.AppCompat.Light">
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@drawable/background_tab_item</item>
    <item name="tabIndicatorColor">@color/jd_yellow</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:gravity">center</item>
    <item name="tabSelectedTextColor">@color/jd_white</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="android:textAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="android:background">@drawable/background_tab_item</item>
    <item name="android:textColorSecondary">@color/jd_white</item>
    <item name="colorControlNormal">@color/jd_white</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarWidgetTheme">@style/WidgetStyle</item>
    <item name="colorPrimary">@color/jd_white</item>
    <item name="colorPrimaryDark">@color/jd_white</item>
    <item name="android:textColorPrimary">@color/jd_white</item>
</style>

<style name="WidgetStyle" parent="style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlNormal">@color/jd_white</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <!-- change color the arrow or three lines -->
    <item name="colorControlNormal">@color/jd_white</item>
</style>

<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/jd_white</item>
</style>

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textColor">@color/jd_white</item>
    <item name="android:textSize">@dimen/tab_layout_text_size</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:gravity">center</item>
</style>

Also tried adding below to onCreate()

  Drawable upArrow = ContextCompat.getDrawable(mContext, R.drawable.abc_ic_ab_back_material);
        upArrow.setColorFilter(ContextCompat.getColor(mContext, R.color.white), PorterDuff.Mode.SRC_ATOP);
        getSupportActionBar().setHomeAsUpIndicator(upArrow);

Nothing working, still it's color is black, What wrong I'm doing?? Please help.

score 3 · Answer 1 · answered Apr 26 '16 at 14:58

3

You could make your own asset in whatever colour you like and then place it on the toolbar.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setHomeAsUpIndicator(R.drawable.YOUR_ASSET);

answered Apr 26 '16 at 14:58

Amit Tiwari

3,684
6
33
75

but what in case if drawer open? By default three lines image changes to black arrow when drawer is opened(that also with animation), Can I achieve the same with this? – Shirish Herwade Apr 26 '16 at 15:13

score 3 · Accepted Answer · answered Jan 20 '19 at 20:19

Very simple, this worked for me:

    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@color/PrimaryColor"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="4dp" />

score 0 · Answer 3 · answered Apr 26 '16 at 17:53

Try using this style as your android:theme for Toolbar:

<style name="ToolbarStyle" parent="@style/ThemeOverlay.AppCompat.Dark">
    <item name="android:textColorSecondary">@color/jd_white</item>
</style>

like

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    style="@style/MyCustomTabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ToolbarStyle"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

score 0 · Answer 4 · answered Oct 27 '16 at 18:30

after countless hack and plain weird situations , this works like charm

 <style name="App"/>
<style name="App.Toolbar">
    <item name="android:id">@id/toolbar</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">?attr/actionBarSize</item>
    <item name="android:background">@android:color/white</item>
    <item name="android:minHeight">?attr/actionBarSize</item>
    <item name="android:theme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Dark</item>
</style>
<style name="App.Toolbar.Transparent">
    <item name="android:background">@android:color/transparent</item>
</style>

How to change Toolbar home icon(back arrow) color in new material theme?

4 Answers4