android popup menu text color (AppCompat)

Question

I need to change text color of a popuo menu but I don't find any way for do this, I can change background of popmenu but not the text, I edit the style.xml in this way:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <!-- API 14 theme customizations can go here. -->

    <item name="popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:textAppearanceLargePopupMenu">@style/myPopupMenuTextAppearanceLarge</item>
    <item name="android:textAppearanceSmallPopupMenu">@style/myPopupMenuTextAppearanceSmall</item>
</style>

<style name="MyPopupMenu" parent="@style/Widget.AppCompat.PopupMenu">
    <item name="android:popupBackground">#0F213F</item>
</style>

<style name="myPopupMenuTextAppearanceSmall" parent="@style/TextAppearance.AppCompat.Base.Widget.PopupMenu.Small">
    <item name="android:textColor">#ffffff</item>
</style>

<style name="myPopupMenuTextAppearanceLarge" parent="@style/TextAppearance.AppCompat.Base.Widget.PopupMenu.Large">
    <item name="android:textColor">#ffffff</item>
</style>

where is the mistake?

Answer 1

<item name="textAppearanceLargePopupMenu">@style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Large</item>
<item name="textAppearanceSmallPopupMenu">@style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Small</item>

I think that you are using TextAppearance.AppCompat.Base.Widget.PopupMenu. Here is the error, you are using another parent that doesn´t response the current style.

You have to use:

TextAppearance.AppCompat.Light.Widget.PopupMenu.

Answer 2

In styles.xml

<style name="itemTextStyle.AppTheme" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
        <item name="android:textColor">@drawable/color_item_popup</item>
        <item name="android:textSize">@dimen/text_content</item>
    </style>

and add in AppTheme

<item name="android:itemTextAppearance">@style/itemTextStyle.AppTheme</item>

color_item_popup.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/primary_text"/>
    <item android:state_focused="true" android:color="@color/primary_text"/>
    <item android:color="@color/secondary_text"/>
</selector>

Answer 3

In styles.xml:

<style name="PopupMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
    <item name="android:popupBackground">@color/white</item>
</style>

In java:

Context wrapper = new ContextThemeWrapper(getContext(), R.style.PopupMenu); final PopupMenu popupMenu = new PopupMenu(wrapper, view);

Answer 4

You can obviously customize the PopupMenu in your own way. Its quite simple. But first you need to take care of one very important thing.

The PopupMenu is created like this,

PopupMenu popupMenu = new PopupMenu(context, anchorView);

Now the "context" here plays a very important role in styling. The style of the PopupMenu depends on the style of the context that you pass. So be very careful in this. I wasted almost half-and-hour figuring out this.

If you are in a fragment just pass "getActivity()" and you are done.

Styling of the PopupMenu items

Just override the following items in your style,

<item name="textAppearanceLargePopupMenu">@style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceLargePopupMenu">@style/myPopupMenuTextAppearanceLarge</item>

<item name="textAppearanceSmallPopupMenu">@style/myPopupMenuTextAppearanceSmall</item>
<item name="android:textAppearanceSmallPopupMenu">@style/myPopupMenuTextAppearanceSmall</item>

And customize the text appearance as you want,

<style name="myPopupMenuTextAppearanceSmall" parent="@style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
            <item name="android:textColor">@color/text_hint_color</item>
</style>

<style name="myPopupMenuTextAppearanceLarge" parent="@style/TextAppearance.AppCompat.Light.Widget.PopupMenu.Large">
            <item name="android:textColor">@color/text_hint_color</item>
</style>

If you want to change the background of the PopupMenu, do this

<item name="popupMenuStyle">@style/myPopupMenuStyle</item>
    <item name="android:popupMenuStyle">@style/myPopupMenuStyle</item>

Advanced Styling

The PopupMenu items do not support showing the icons by default. But showing the icons can make it look so much better. I recommend trying it.

To implement this just put the following code in your activity and you are good to go,

  @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (NoSuchMethodException e) {
                    Log.e("tag", "onMenuOpened", e);
                } catch (Exception e) {
                    throw new RuntimeException(e);
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

Hope it helps.

Answer 5

//In Main Style
<item name="popupMenuStyle">@style/popupMenuStyle</item>
    <item name="android:textAppearanceSmallPopupMenu">@style/myPopupMenuTextAppearanceSmall</item>
    <item name="android:textAppearanceLargePopupMenu">@style/myPopupMenuTextAppearanceLarge</item>


  //In Define part

   <style name="popupMenuStyle" parent="Widget.AppCompat.PopupMenu">
    <item name="android:popupBackground">@drawable/popup_bg</item>
    <item name="android:textColor">#ffffff</item>
</style>
<style name="myPopupMenuTextAppearanceSmall" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Small">
    <item name="android:textColor">#ffffff</item>
</style>

<style name="myPopupMenuTextAppearanceLarge" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
    <item name="android:textColor">#ffffff</item>
</style>

  //you may use this background 
 //popup_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:angle="135"
    android:centerColor="#c8232323"
    android:endColor="#c80d0d0d"
    android:startColor="#c8434242"
    android:type="linear" />
</shape>