Change Toolbar overflow icon color

Question

I have an android.support.v7.widget Toolbar in my Android app. The background color of this is bright orange and the best looking color on top of this would be white instead of black.

I have the default color on black and not white. Since it would conflict with other stuff, that is almost impossible to override. I cannot change the primary text color to white!

I've managed to change the title color. What I'm looking for right now is how I can change the action button color as well (to white).

My code:

Main activity:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" tools:context=".UI.activities.MainActivity">  <android.support.v7.widget.Toolbar     android:id="@+id/r2_toolbar"     android:layout_width="match_parent"     android:layout_height="?attr/actionBarSize"     android:background="?attr/colorPrimary"     android:elevation="4dp"     app:titleTextColor="@color/primary_text_material_light"     app:subtitleTextColor="@color/primary_text_material_light"     android:theme="@style/R2Theme.Toolbar"/>  <fragment android:name="com.r2retail.r2retailapp.UI.fragments.SetupFragment"     android:layout_below="@+id/r2_toolbar"     android:id="@+id/list"     android:layout_weight="1"     android:layout_width="match_parent"     android:layout_height="match_parent" />   </RelativeLayout> 

Menu bar:

<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">  <item android:id="@+id/about"     android:icon="@drawable/ic_menu"     android:title="About"     app:showAsAction="never"/>  </menu> 

Styles:

<resources>  <style name="R2Theme" parent="Theme.AppCompat.Light.NoActionBar">=     <item name="colorPrimary">@color/colorPrimary</item>     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>     <item name="colorAccent">@color/colorPrimary</item>     <item name="android:textColorPrimary">@color/secondary_text_material_dark</item>     <item name="android:textColorSecondaryInverse">@color/primary_text_material_light</item> </style>  <style name="R2Theme.Toolbar" parent="R2Theme">     <item name="actionMenuTextColor">@color/primary_text_material_light</item> </style>  </resources> 

Answer 1

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:

Answer 2

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).