I am using a android.support.v7.widget.Toolbar and learned from this post how to change the color of the hamburger icon to white, but the up/back arrow remains a dark color when I call
setDisplayHomeAsUpEnabled(true);
How can I make the arrow white as well?
Here is what my toolbar looks like when I call setDisplayHomeAsUpEnabled():
...and here is the relevant portion of my styles.xml file:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">#194C5F</item>
<item name="colorAccent">@color/accent</item>
<item name="drawerArrowStyle">@style/WhiteDrawerIconStyle</item>
</style>
<style name="WhiteDrawerIconStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
This question is related to
android
icons
toolbar
android-support-library
This answer maybe too late, but here is how I do it. Styling the toolbar will do the trick. Create toolbar.xml with following code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true"
android:layout_gravity="bottom"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
and in the styles.xml
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!--
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
Finally, include the toolbar inside layout
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
This code works for me:
public static Drawable changeBackArrowColor(Context context, int color) {
String resName;
int res;
resName = Build.VERSION.SDK_INT >= 23 ? "abc_ic_ab_back_material" : "abc_ic_ab_back_mtrl_am_alpha";
res = context.getResources().getIdentifier(resName, "drawable", context.getPackageName());
final Drawable upArrow = context.getResources().getDrawable(res);
upArrow.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
return upArrow;
}
...
getSupportActionBar().setHomeAsUpIndicator(changeBackArrowColor(this, Color.rgb(50, 50, 50)));
supportInvalidateOptionsMenu();
Also, if you want to change the toolbar text color:
Spannable spannableString = new SpannableString(t);
spannableString.setSpan(new ForegroundColorSpan(Color.rgb(50, 50, 50)), 0, t.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
toolbar.setText(spannableString);
Working from API 19 through 25.
Instead of style changes, just put these two lines of code to your activity.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrowleft);
<!-- ToolBar -->
<style name="ToolBarTheme.ToolBarStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColor">@color/white</item>
<item name="android:textColorPrimaryInverse">@color/white</item>
</style>
Too late to post, this worked for me to change the color of the back button
Here is what you are looking for. But this also changes the color of radioButton etc. So you might want to use a theme for it.
<item name="colorControlNormal">@color/colorControlNormal</item>
Here's my solution:
toolbar.navigationIcon?.mutate()?.let {
it.setTint(theColor)
toolbar.navigationIcon = it
}
Or, if you want to use a nice function for it:
fun Toolbar.setNavigationIconColor(@ColorInt color: Int) = navigationIcon?.mutate()?.let {
it.setTint(color)
this.navigationIcon = it
}
Usage:
toolbar.setNavitationIconColor(someColor)
Instead of using older drawable id "abc_ic_ab_back_material", use the new one abc_ic_ab_back_material in every api version. I have tested it in 19, 21, 27 and working fine with below code and configuration.
compileSdkVersion = 27
public static Drawable changeBackArrowColor(Context context, int color) {
int res;
res = context.getResources().getIdentifier("abc_ic_ab_back_material", "drawable", context.getPackageName());
if (res == 0)
return null;
final Drawable upArrow = ContextCompat.getDrawable(context, res);
upArrow.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
return upArrow;
}
Try this: Set the toolbar's theme in your layout as follows
android:theme = "@android:style/ThemeOverlay.Material.Dark.ActionBar"
If you want further information
The curious case of the Overflow Icon Color by Martin Bonnin
Well there is a more easy way to do this
drawerToggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open_drawer, R.string.close_drawer);
arrow = drawerToggle.getDrawerArrowDrawable();
And then
arrow.setColor(getResources().getColor(R.color.blue);
I solved it programmatically using this code:
final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
Revision 1:
Starting from API 23 (Marshmallow) the drawable resource abc_ic_ab_back_mtrl_am_alpha
is changed to abc_ic_ab_back_material
.
Change your Toolbar Theme to ThemeOverlay.AppCompat.Dark
<?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/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:orientation="vertical"
app:theme="@style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
and set it in activty
mToolbar = (Toolbar) findViewById(R.id.navigation);
setSupportActionBar(mToolbar);
Source: Stackoverflow.com