Android Lollipop Material Design Overflow Menu Icon color

Question

I try the new Material Design on a Nexus 7 and have the following strange behaviour. The Overflow Menu Icon has a different color on the first app launch.

I changed the android:textColorPrimary color and read this tutorial.

First App launch:
Second App launch:

As you see the color of the primary text color is not set on the first launch. It is only set if i press the home button and relaunch the app. Here is my styles.xml file:

<style name="AppBaseTheme" parent="android:Theme.Material.Light">
    <item name="android:colorPrimary">#FF4444</item>
    <item name="android:colorPrimaryDark">#CC0000</item>
    <item name="android:textColorPrimary">#000000</item>
</style>

Can someone explain, why that behaviour occurs?

I set android:minSdkVersion="21" and don't want to use support libraries.

Just use Light.DarkActionBar instead of Light. It handles changing the theme against which the action bar content is inflated and will save you a lot of unnecessary work. — alanv, Nov 18 '14 at 21:24
Hey @alanv, I tried your suggestion, it makes the text color of both "Material Demo" and the dots in right become white. How to make them all dark? — ztan, Nov 18 '14 at 23:02
Oh, I missed that you're trying to make them all dark. Just using the Light theme should already accomplish this. Are you using appcompat or changing anything else in the theme? — alanv, Nov 18 '14 at 23:11
That is just a workaround for white or black text colors. If I use a different color the problem still exists. I would like to know how to fix that. — code monkey, Nov 19 '14 at 07:06
you must have a `toolbar` `view` (where the theme you showed is applied), usually it is a layout, but the `view` code is enough — SagiLow, Nov 24 '14 at 15:57
Please, read this: https://chris.banes.me/2014/10/17/appcompat-v21/. You need to use appcompat-v7 lib. I would recommend you to use android studio + gradle and add "compile 'com.android.support:appcompat-v7:21.0.0'" to your dependencies. Then just follow the chris banes steps. You do need a Toolbar. — jpardogo, Nov 29 '14 at 14:59

score 2 · Answer 1 · answered Dec 20 '14 at 00:02

I experienced the same problem when running a PreferenceActivity which cannot use appcompat-v7 library on a LOLLIPOP device. When this activity is opened for the first time the overflow icon is always white completely ignoring android:textColorPrimary and android:colorControlNormal. Subsequent runs or orientation changes however result in proper coloring.

I created a gist which will help you mitigate this. The code binds a global layout observer to the toolbar and when it finds an overflow icon it replaces it and unbinds the observer. So don't use it in places where you don't expect an overflow icon because the observer won't get unbound in that case.

Link to gist: https://gist.github.com/consp1racy/4b640679de553fdb3046

score 1 · Answer 2 · answered Nov 24 '14 at 20:09

1

Just add the secondary text color for the options menu, i.e.:

<item name="android:textColorSecondary">@color/text_color</item>

In some circumstances the secondary color is set to the primary color. I don't know yet why.

answered Nov 24 '14 at 20:09

Denis Loh

2,194
2
24
38

Unfortunately that did not help. – code monkey Nov 25 '14 at 08:31
You wrote that you're using the support libraries. Have you tried using the appcompat themes from the android-support-v7 library? If you are targeting minimum android versions below 21 you'll probably should have a look on it. However, this is just a side note. Are you using other additional styles or themes for the actionbar? The dots belong to the action overflow and has its own design: http://developer.android.com/design/patterns/actionbar.html – Denis Loh Nov 25 '14 at 09:57
update: Now I removed all support libraries and set `android:minSdkVersion="21"`. – code monkey Nov 25 '14 at 10:18

Hana Bzh · Answer 3 · 2014-11-29T12:01:37.917

1

Add these items too:

<item name="actionMenuTextColor">@color/white</item>
<item name="android:actionMenuTextColor">@color/white</item>

If this didn't help, then try this:

<style name="AppBaseTheme" parent="android:Theme.Material.Light">
    <item name="android:itemTextAppearance">@style/TextAppearance</item>
</style>

<style name="TextAppearance">
    <item name="android:textColor">@android:color/white</item>
</style>

This would works for Holo.Light.DarkActionBar

edited Nov 29 '14 at 12:01

answered Nov 29 '14 at 11:56

Hana Bzh

2,212
3
18
38

Unfortunately that did not help. I am wondering why I am the only one that has that problem. It is so easy to reproduce. – code monkey Nov 29 '14 at 14:52

jpardogo · Answer 4 · 2014-11-29T17:11:35.937

If you want to use material design in pre-21 devices you need to extend Theme.AppCompat.Light.NoActionBar theme. To do that, you need to add compile com.android.support:appcompat-v7:21.0.0 as a dependency of your project, this way you will be able to use the Toolbar in your layout.

Then define your theme in values/themes.xml::

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_awesome_color</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/my_awesome_darker_color</item>

    <!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
    <item name="colorAccent">@color/accent</item>

    <!-- You can also set colorControlNormal, colorControlActivated
    colorControlHighlight & colorSwitchThumbNormal. -->
</style>

and your the toolbar in your layout/my_activity.xml:

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_awesome_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

You have optional attrs to define the theme and popupTheme as well:

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

Chris Banes wrote a good article about this that you should read https://chris.banes.me/2014/10/17/appcompat-v21/

I read on the comments of the questions that you are using eclipse, I highly recommend to use android studio + gradle and no eclipse.

I don't want to use it on pre 21 devices and I don't want to use support libraries. — code monkey, Dec 01 '14 at 07:20
Then why do u say that in the comments that you are defining min sdk 18? — jpardogo, Dec 01 '14 at 09:02
In a newer comment I said that I raised the API level to `android:minSdkVersion="21"` to be sure that the API level/ support library is not the problem. Moreover I use in my question `android:Theme.Material.Light` and not `Theme.AppCompat.Light.NoActionBar`. I will delete the comment so that it is not confusing. — code monkey, Dec 01 '14 at 09:09
Try the same I said but without appcompat and should work. Same procress with noactionbar theme and the toolbar in your xml. — jpardogo, Dec 01 '14 at 09:23

score 1 · Answer 5 · answered Nov 12 '15 at 10:44

1

Just add android:theme="@style/ThemeOverlay.AppCompat.Dark"to the Toolbar

<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />

overflow menu icon will be white now :)

answered Nov 12 '15 at 10:44

Nihas Nizar

619
8
15

This was the only thing that worked for me. Using the .Dark attribute will make my overflow menu icon white! Perfect! – Brandon Oct 07 '16 at 13:26

Android Lollipop Material Design Overflow Menu Icon color

5 Answers5