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

1
votes

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.

4
androidmaterial-designtoolbarandroid-appcompatandroid-tablayout

4 Answers

3
votes

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);
3
votes

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

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

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>