Change Popup menu background color

Question

NOTE: I have searched for an hour and tried all solutions already provided by stackoverflow.

I am studying theme overlays. I have made a sample app, which opens a popup menu on clicking an action bar icon. Here is my styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>



    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:textColorPrimary">@color/colorAccent</item>
    </style>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
        <!-- added all to see which one will work.-->
        <item name="android:popupMenuStyle">@style/PopupMenu</item>
        <item name="android:itemBackground">@color/colorAccent</item>
        <item name="android:colorBackground">@color/colorAccent</item>

    </style>

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

</resources>

and here is my toolbar style.

   <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

I have set the popupTheme to the one I have in my styles.xml. Now I want to change the background color of popup menu, which is currently white.

Here is the code.

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if(item.getItemId() == R.id.standard_menu){
            showPopupMenu(item);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    private void showPopupMenu(MenuItem item) {
        PopupMenu p = new PopupMenu(this, findViewById(item.getItemId()));
        p.inflate(R.menu.pop_menu);
        p.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                Toast.makeText(MainActivity.this, "clicked.", Toast.LENGTH_SHORT).show();
                return true;
            }
        });
        p.show();
    }

see here : http://www.silverbaytech.com/2013/05/27/themes-for-the-android-actionbar-actionbaritems/ — Manikandan K, Nov 18 '16 at 07:51
@ManikandanK why should I use Theme.Sherlock? It's deprecated. — mallaudin, Nov 18 '16 at 07:56
please refer the here : http://www.grokkingandroid.com/migrating-actionbarsherlock-actionbarcompat/ — Manikandan K, Nov 18 '16 at 07:57
try this style so with the use of this may also change the popup background. — sneha desai, Nov 18 '16 at 08:23
Which PopupMenu are you using? `android.widget.PopupMenu` or `android.support.v7.widget.PopupMenu`? — Karakuri, Nov 18 '16 at 17:28

Karakuri · Accepted Answer · 2016-11-18T22:31:49.887

I wasn't satisfied with the accepted answer since it doesn't really explain why the OPs custom popup style isn't being applied--not just the background, but also things like the text color--so I did my own experimentation.

It's important to note there is a difference between the popup created by the Toolbar (when it has menu items) and showing one yourself with PopupMenu. These are governed by different theme attributes. Also, be aware there are two PopupMenu classes: android.widget.PopupMenu, and android.support.v7.widget.PopupMenu.

The theme attribute you need to style PopupMenus you show explicitly is android:popupMenuStyle or popupMenuStyle. You have a few options to achieve proper application of your custom style:

(1) Use android:popupMenuStyle in the theme of the activity (or app)

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- if using android.widget.PopupMenu -->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <!-- if using android.support.v7.widget.PopupMenu -->
    <item name="popupMenuStyle">@style/PopupMenu</item>
</style/>

<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:popupBackground">@color/popupBackground</item>
</style>

PopupMenu popup = new PopupMenu(this, anchorView);

Note this requires nothing extra in your layout file.

(2) Use a ContextThemeWrapper

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- nothing special -->
</style/>

<style name="CustomPopupTheme" parent="ThemeOverlay.AppCompat.Dark">
    <!-- if using android.widget.PopupMenu -->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <!-- if using android.support.v7.widget.PopupMenu -->
    <item name="popupMenuStyle">@style/PopupMenu</item>
</style>

<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:popupBackground">@color/popupBackground</item>
</style>

ContextThemeWrapper ctw = new ContextThemeWrapper(this, R.style.CustomPopupTheme);
PopupMenu popup = new PopupMenu(ctw, anchorView);

Note how this doesn't use R.style.PopupMenu directly when constructing the ContextThemeWrapper. This seems a bit roundabout, but it's useful if you want to keep the popup theme separated from activity or app themes (perhaps only some popups need your special theme, for example).

(3) Use your AppBarLayout's Context

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- nothing special -->
</style/>

<style name="AppBarOverlay" parent="ThemeOverlay.AppCompat.Light">
    <!-- if using android.widget.PopupMenu -->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <!-- if using android.support.v7.widget.PopupMenu -->
    <item name="popupMenuStyle">@style/PopupMenu</item>
</style>

<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:popupBackground">@color/popupBackground</item>
</style>

<style name="PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
    <!-- changes the background of the Toolbar's popup -->
    <item name="android:colorBackground">@color/popupBackground</item>
</style>


<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/PopupOverlay"/>

</android.support.design.widget.AppBarLayout>


AppBarLayout appBar = (AppBarLayout) findViewById(R.id.app_bar);
PopupMenu popup = new PopupMenu(appBar.getContext(), anchorView);

Since you already have a theme overlay for the AppBar, you can use it to hold your popup theme references. This would also work with the Toolbar's context, at least given the current layout, although note that app:popupTheme is not actually relevant here since it affects the Toolbar's popup and not your PopupMenu. Also note how similar this is to option 2 above, which should clue you in to how the android:theme attribute works under the hood ;)

In my experiments, android:itemBackground only worked when I used it in place of android:colorBackground in the PopupOverlay style. However, it's better to use android:colorBackground because that will change the popup's window color, leaving the rounded corners and the selectable item highlight/ripple of the items intact.

This is the answer I've been looking all over the web for, it was of course on the last page of the internet! lol. Thanks! — JPM, Jan 18 '23 at 03:38

score 7 · Answer 2 · answered Apr 25 '18 at 09:03

<style name="YOURSTYLE" parent="Widget.AppCompat.PopupMenu">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:itemBackground">@android:color/holo_red_light</item>
</style>

Context wrapper = new ContextThemeWrapper(this, R.style.YOURSTYLE);
PopupMenu popup = new PopupMenu(wrapper, view);

May be its helps you

score 4 · Answer 3 · answered Jun 08 '20 at 08:57

i did it pls check if anybody have problem too add this to style

 <style name="CustomPopupTheme" parent="ThemeOverlay.AppCompat.Dark">
    <!-- if using android.widget.PopupMenu -->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
    <!-- if using android.support.v7.widget.PopupMenu -->
    <item name="popupMenuStyle">@style/PopupMenu</item>
</style>

<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
    <item name="android:popupBackground">@color/appGreenColor</item>
</style>

and the code of popmenu is

 private void openPopMenuList(View view) {
    //custom background COlor view
    PopupMenu popup = new PopupMenu(new ContextThemeWrapper(getActivity(), R.style.CustomPopupTheme), view);
    try {
        // Reflection apis to enforce show icon
        Field[] fields = popup.getClass().getDeclaredFields();
        for (Field field : fields) {
            if (field.getName().equals( POPUP_CONSTANT )) {
                field.setAccessible( true );
                Object menuPopupHelper = field.get( popup );
                Class<?> classPopupHelper = Class.forName( menuPopupHelper.getClass().getName() );
                Method setForceIcons = classPopupHelper.getMethod( POPUP_FORCE_SHOW_ICON, boolean.class );
                setForceIcons.invoke( menuPopupHelper, true );
                break;
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
    popup.getMenuInflater().inflate( R.menu.pop_up_menu, popup.getMenu() );
    popup.setOnMenuItemClickListener( this );
    popup.show();


}

and the below is popmenu items

<?xml version="1.0" encoding="utf-8"?>

<item
    android:id="@+id/share_popmenu"
    android:icon="@drawable/menu_share"
    android:title="@string/share_with_friends" />


<item
    android:id="@+id/askdelete_popmenu"
    android:icon="@drawable/menu_delete"
    android:title="Ask For Delete" />

score 3 · Answer 4 · answered Nov 18 '16 at 08:04

3

This worked for me

<item name="android:itemBackground">@color/primary</item>

Insert that into your main style I hope this works for you

answered Nov 18 '16 at 08:04

Harian Manda

248
1
9

Yes. It works but why other options are not working? – mallaudin Nov 18 '16 at 09:15
1

I'm confused. The image in the OP suggests that the entire popup style is not being applied. `PopupOverlay` extends `ThemeOverlay.AppCompat.Dark`, so the text color should be light, but clearly its not. This might solve for just the background of the popup, but doesn't really answer why the custom style defined isn't being applied. – Karakuri Nov 18 '16 at 17:26

score 2 · Answer 5 · answered Aug 20 '17 at 07:32

2

use "popupMenuStyle" for PopupMenu in support v7 library, and use "android:popupMenuStyle" for regular PopupMenu

answered Aug 20 '17 at 07:32

Francis Nduba Numbi

2,499
1
11
22

score 2 · Answer 6 · answered Sep 14 '18 at 13:30

2

Try it out

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">@color/white</item>
        <item name="android:textColor">@color/grey_900</item>
    </style>

answered Sep 14 '18 at 13:30

Cícero Moura

2,027
1
24
36

score 1 · Answer 7 · answered May 07 '18 at 11:56

None of the above solutions worked for me, so this is how I fixed it:

First of all make a new Theme for the Activity, and:

<style name="Theme.YourTheme" parent="Theme.AppCompat">
    <item name="android:itemBackground">@color/white</item>
    <item name="android:textColor">@color/black</item>
</style>

To make the background of items white

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

To counter make the text color black

<item name="android:textColor">@color/black</item>

Lastly, apply the theme to your Activity via Manifest:

    <activity android:name=".YourActivity"
        android:theme="@style/Theme.YourTheme"/>

score 1 · Answer 8 · answered Feb 18 '21 at 04:48

1

To remove the margin that gets added in AndroidX:

PopupMenu popup = new PopupMenu(this, my_button, 0, 0, 0);

answered Feb 18 '21 at 04:48

live-love

48,840
22
240
204

score 1 · Answer 9 · answered Dec 03 '21 at 06:46

There is no need to do changes in ANDROIDMAINFEST.xml

thank to shekhar's answer##

checkout this

you can achieve it by this in fragment or in activity by provideing or masking with it custom theme and after making the custom theme you have to pass that context to the popup menu. first create popup menu layout in menu

<?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/remove"
        android:title="Remove downloads"

        />
</menu>

second style it in style.xml

 <style name="CustomPopUpStyle" parent="Widget.AppCompat.PopupMenu">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:itemBackground">@color/bgColor</item>
</style>

method

 private fun showPopupMenu(context: Context, view: View) {
        var wrapper: Context =  ContextThemeWrapper(context, R.style.CustomPopUpStyle)
        val popup = PopupMenu(wrapper, view)
        popup.inflate(R.menu.popup_menu)
        popup.setOnMenuItemClickListener(PopupMenu.OnMenuItemClickListener { item: MenuItem? ->
            when (item!!.itemId) {
                R.id.remove -> {
                    Toast.makeText(context, item.title, Toast.LENGTH_SHORT).show()
                }
            }

            true
        })

        popup.show()
    }

lastly initialization

 showPopupMenu(holder.itemView.context, holder.viewDataBinding.more)

and this i did in adapter of recyclerview which is in fragment

hope you liked it.

the code is self explanatory too.

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Dec 03 '21 at 08:25

score 0 · Answer 10 · answered Nov 18 '16 at 07:48

Add popupMenu style to ur AppTheme:

<style name="AppTheme" parent="android:Theme.Light">
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
</style>

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

manifest.xml:

 <application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
.............
</application>

i hope it will work.

score 0 · Answer 11 · answered Nov 18 '16 at 08:13

0

try to use colorPrimary inside PopupOverlay like this

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="colorPrimary">@color/blue_ivy</item>
</style>

answered Nov 18 '16 at 08:13

John Kalimeris

76
1
4

score 0 · Answer 12 · answered Jun 23 '19 at 08:28

Use popupTheme from AppCompat toolbar

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:popupTheme="@style/MyTheme"/>

In Style :

  <style name="MyTheme" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">@color/colorPrimary</item>
    <item name="android:textColor">@color/white</item>
</style>

Hope it will work.

Change Popup menu background color

12 Answers12

There is no need to do changes in ANDROIDMAINFEST.xml

thank to shekhar's answer##

checkout this

hope you liked it.

the code is self explanatory too.

Linked