Change Toolbar overflow icon color
The solution is to replace icon itself.
1st
Go to values/styles and in your styles.xml
file add:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionOverflowButtonStyle">@style/MyActionButtonOverflow</item>
</style>
<style name="MyActionButtonOverflow" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
<!--Here you need to put name of drawable you will create during the next step-->
<item name="android:src">@drawable/your_white_icon</item>
</style>
2nd
Then go to drawable folder. Right mouse click -> new -> vector asset. Then press on Icon image and choose from suggested icon named ic_more_vert_black_24dp.
Customize it -> press next -> finish.
Then open newly created icon file. Code looks like this.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF" <!-- Here u can change color-->
android:pathData="M12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,10c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2zM12,16c-1.1,0 -2,0.9 -2,2s0.9,2 2,2 2,-0.9 2,-2 -0.9,-2 -2,-2z"/>
</vector>
Change fillColor
attribute to the color you need. Put this file to the styles how described in 1st step.
Voila! Color of our three dots changed not depending on base app styles (result for #FF2012 color).
In styles:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionOverflowButtonStyle">@style/MyOverflowButtonStyle</item>
</style>
<style name="MyOverflowButtonStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#62ff00</item>
</style>
Result:
For AndroidX users (really don't know if it works using old Support Library):
TL;DR:
<style name="MyToolbarTheme">
<item name="colorControlNormal">@color/white</item>
</style>
Apply MyToolbarTheme
to your Toolbar
view.
Long explanation:
Widget.AppCompat.ActionButton.Overflow
extends Base.Widget.AppCompat.ActionButton.Overflow
. We'll be talking about the latter:
On the default implementation:
<style name="Base.Widget.AppCompat.ActionButton.Overflow" parent="RtlUnderlay.Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/abc_ic_menu_overflow_material</item>
...
</style>
On API 21 implementation:
<style name="Base.Widget.AppCompat.ActionButton.Overflow" parent="android:Widget.Material.ActionButton.Overflow">
<item name="android:src">@null</item>
<item name="srcCompat">@drawable/abc_ic_menu_overflow_material</item>
</style>
On API 23 and higher implementation:
It extends android:Widget.Material.ActionButton.Overflow
.
<style name="Widget.Material.ActionButton.Overflow">
<item name="src">@drawable/ic_menu_moreoverflow_material</item>
...
</style>
We can notice that every implementation uses @drawable/ic_menu_moreoverflow_material
.
Inside this drawable's implementation you can see the following:
android:tint="?attr/colorControlNormal"
An alternative way, in code instead of XML:
public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt int color) {
final Drawable overflowIcon = toolbar.getOverflowIcon();
if (overflowIcon == null)
return false;
toolbar.setOverflowIcon(getTintedDrawable(toolbar.getContext(), overflowIcon, toolbarIconsColor));
return true;
}
public static Drawable getTintedDrawable(@NonNull Context context, @NonNull Drawable inputDrawable, @ColorInt int color) {
Drawable wrapDrawable = DrawableCompat.wrap(inputDrawable);
DrawableCompat.setTint(wrapDrawable, color);
DrawableCompat.setTintMode(wrapDrawable, Mode.SRC_IN);
return wrapDrawable;
}
The function will return true if succeeded to colorize the overflow icon.
And another alternative, in case you prefer not to use a tinted drawable:
public static boolean colorizeToolbarOverflowButton(@NonNull Toolbar toolbar, @ColorInt Integer color) {
final Drawable overflowIcon = toolbar.getOverflowIcon();
if (overflowIcon == null)
return false;
final PorterDuffColorFilter colorFilter = toolbarIconsColor == null ? null : new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.MULTIPLY);
overflowIcon.setColorFilter(colorFilter);
return true;
}
In addition, if you wish to colorize the icons of the action items and the nav item, you can try this (based on here):
/**
* Use this method to colorize toolbar icons to the desired target color
*
* @param toolbarView toolbar view being colored
* @param toolbarIconsColor the target color of toolbar icons
*/
@JvmStatic
@UiThread
fun colorizeToolbarActionItemsAndNavButton(toolbarView: Toolbar, @ColorInt toolbarIconsColor: Int?) {
//https://snow.dog/blog/how-to-dynamicaly-change-android-toolbar-icons-color/
val colorFilter = if (toolbarIconsColor == null) null else PorterDuffColorFilter(toolbarIconsColor, Mode.MULTIPLY)
for (i in 0 until toolbarView.childCount) {
val v = toolbarView.getChildAt(i)
//Step 1 : Changing the color of back button (or open drawer button).
if (v is ImageButton) {
//Action Bar back button
v.drawable.mutate().colorFilter = colorFilter
}
if (v is ActionMenuView) {
for (j in 0 until v.childCount) {
//Step 2: Changing the color of any ActionMenuViews - icons that
//are not back button, nor text, nor overflow menu icon.
val innerView = v.getChildAt(j)
if (innerView is ActionMenuItemView) {
val drawablesCount = innerView.compoundDrawables.size
for (k in 0 until drawablesCount) {
if (innerView.compoundDrawables[k] != null) {
innerView.post { innerView.compoundDrawables[k].mutate().colorFilter = colorFilter }
}
}
}
}
}
}
}
Usage:
override fun onCreateOptionsMenu(menu: Menu): Boolean {
menuInflater.inflate(R.menu.menu_main, menu)
toolbar.doOnPreDraw {
colorizeToolbarActionItemsAndNavButton(toolbar,0xffff0000.toInt())
}
return true
}