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

androidandroid-appcompatandroid-tablayoutmaterial-designtoolbar

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.

Best Answer

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