Toolbar back arrow show as black color on 4.x devices

Question

I have used Toolbar and used design library.The toolbar navigation icon and back arrow icon display as white on Android 5.0 device.But on Android 4.x devices it display as black color icons.How to diaplay the icons as white color on both Android 5.0 and Android 4.x devices.

MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);


    final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);

    upArrow.setColorFilter(getResources().getColor(android.R.color.white), PorterDuff.Mode.SRC_ATOP);

    toolbar.setNavigationIcon(upArrow);

    setSupportActionBar(toolbar);

    mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,toolbar, R.string.app_name, R.string.app_name){

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);
            fab1.setVisibility(View.VISIBLE);
        }

        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);
            fab1.setVisibility(View.GONE);
        }
    };
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
    navigationView.setNavigationItemSelectedListener(this);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState(); /* if comment this line white color applied,but only arrow displayed,not display nav icon(three line icon)*/
}


@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:titleTextAppearance="@style/AppTheme.Toolbar.Title"
    app:elevation="@dimen/cardview_default_elevation"
    app:borderWidth="0dp"
    >

values\styles.xml

<style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!-- Set proper title size -->
        <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
        <!-- Set title color -->
        <item name="android:textColor">@color/toolbar_title</item>
</style>

values-v21\styles.xml

<style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!-- Set proper title size -->
        <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
        <!-- Set title color -->
        <item name="android:textColor">@color/toolbar_title</item>
</style>

score 0 · Answer 1 · answered Jun 27 '15 at 19:14

0

You already post the answer :)

    //final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);

    //upArrow.setColorFilter(getResources().getColor(android.R.color.white), PorterDuff.Mode.SRC_ATOP);

    //toolbar.setNavigationIcon(upArrow);

This is works. Tested on 4.4.2

I think you have a so many attempts, that have a confusion.

answered Jun 27 '15 at 19:14

Sergey Shustikov

15,377
12
67
119

@Ramprasad did you try remove other commented code? It works for me. May be you set color in `*.xml` theme file also? – Sergey Shustikov Jun 27 '15 at 19:19
@Ramprasad if you change back button color in code will be better you need remove all occurrences in `styles.xml` and `themes.xml`. It may produce conflicts – Sergey Shustikov Jun 27 '15 at 19:22
I tried by removing app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" on xml file.But not works... – Ramprasad Jun 27 '15 at 19:38
Also uncomment lines you have mentioned,but not works.Something I done mistake... – Ramprasad Jun 27 '15 at 19:41
@Ramprasad re-check attentively. on 4.0 also works. Tested now. – Sergey Shustikov Jun 27 '15 at 20:44
I have updated all my code above.If i remove mDrawerToggle.syncState(); line white color applied,but only arrow displayed,not display nav icon(three line icon). – Ramprasad Jun 28 '15 at 05:52
I fixed this issue.refer http://stackoverflow.com/a/26469738/884079 and removed uparrow drawable code.It works great...tested on 4.2.1 version. – Ramprasad Jun 28 '15 at 06:03

Toolbar back arrow show as black color on 4.x devices

1 Answers1