Android menu background black with Theme.AppCompat?

Question

For some reason in my application, when using "Theme.AppCompat" as my style, it makes my Menus black text (which I set since I want black text) on a dark grey background, as shown here:

screenshot

I have tried manually setting the menu's background color using a few online resources but none seem to be working. Does anyone know what might be causing the issue? Below is my style.xml, and as you can see, the two bottom elements in the main app theme entry are me trying to change the background color using things I've found online.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
    <item name="windowActionBar">false</item>
    <item name="android:windowBackground">@color/white_primary</item>
    <item name="android:textColor">@color/text_primary</item>
    <item name="android:textSize">@dimen/text_size_medium</item>
    <item name="colorAccent">@color/black_primary</item>
    <item name="android:popupMenuStyle">@style/PopupMenuStyle</item>
    <item name="android:panelFullBackground">@drawable/menu_full_bg</item>
</style>

<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
    <item name="android:popupBackground">@android:color/white</item>
</style>

<drawable name="menu_full_bg">#FFFFFF</drawable>

score 33 · Accepted Answer · answered Apr 23 '15 at 06:18

33

You can change the background color of the popup menu as below.

Create a style in your styles.xml

<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
     <item name="android:background">@android:color/white</item>
</style>

Set this theme as your toolbar popup theme in your toolbar.xml

 <android.support.v7.widget.Toolbar     
    xmlns:app="http://schemas.android.com/apk/res-auto"    
    xmlns:android="http://schemas.android.com/apk/res/android"

        // Your code here
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:popupTheme="@style/PopupMenuStyle" />

Hope this helps.

answered Apr 23 '15 at 06:18

Pooja

2,417
20
39

4

You are my hero. I'm so happy I could cry. I can't believe I found a solution that actually works on 5.1.1. – Sam Sep 24 '15 at 19:37
This didn't work for me, but [this](https://stackoverflow.com/questions/26554996/change-toolbar-color-in-appcompat-21) did. – Android Jan 05 '18 at 22:06

score 4 · Answer 2 · answered Jun 13 '16 at 11:54

4

You can just use appNS to define the popupTheme as shown below.

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

answered Jun 13 '16 at 11:54

Golu

66
2

score 4 · Answer 3 · edited Jan 28 '23 at 19:29

4

What I did was I change my popUpTheme to DayNight so use

    app:popupTheme="@style/ThemeOverlay.AppCompat.DayNight">

edited Jan 28 '23 at 19:29

Zainal Fahrudin

536
4
23

answered Jan 04 '21 at 21:00

Goblinkiller

99
1
7

score 2 · Answer 4 · edited Jan 28 '23 at 10:46

Refer this link

The accepted answer here worked for me. I am just repeating the same answer here again. Add the following to your Toolbar xml

<android.support.v7.widget.Toolbar 
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:background="@color/toolbarbackground"
     android:elevation="4dp"
     app:popupTheme="@style/YOUR_THEME_HERE"
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

In your styles.xml:

<style name="YOUR_THEME_HERE" parent="ThemeOverlay.AppCompat.Light">
 <item name="android:colorBackground">#000000</item>
 <item name="android:textColor">#ffffff</item>
</style>

The above style gives white font on a black background.

Credit to #Eugen Pechanec

score 1 · Answer 5 · answered May 12 '19 at 16:08

I discourage this line:

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

as on my device the menu popup animation behaved rather ugly. Instead it was sufficient to just use this:

<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
</style>

score 1 · Answer 6 · answered Oct 10 '21 at 04:05

I tried to add this into Toolbar:

app:popupTheme="@style/Theme.AppCompat.Light"

BUT at the Night mode the background will be white, and the text white too. (this will helpful in only Day mode, or your app does not follow Day/Night switch)

Another tried, I add this style for menu popup, as Pojaa said above:

<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
     <item name="android:background">@android:color/white</item>
</style>

BUT this create an effect: when you click the menu, it show the white background of popup menu first (the white background), and then show up the items, this very not good for user experience. Maybe Android change by time, the experience will different!

You SHOULD just try this for your wish:

app:popupTheme="@style/Theme.AppCompat.DayNight"

This is late answer, but hope it will help someone else!

score 0 · Answer 7 · answered Jan 17 '16 at 18:40

Not sure if this's help. It may be a simpler solution. Within AppCompat - themes_base.xml you will find the section below.

<!-- Panel attributes -->
            <item name="panelMenuListWidth">@dimen/abc_panel_menu_list_width</item>
            <item name="panelMenuListTheme">@style/Theme.AppCompat.CompactMenu</item>
            <item name="panelBackground">@drawable/abc_menu_hardkey_panel_mtrl_mult</item>
            <item name="android:panelBackground">@android:color/transparent</item>
            <item name="listChoiceBackgroundIndicator">@drawable/abc_list_selector_holo_dark</item>

Create a theme within your app and apply the colour.

<style name="Theme.Base" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:panelBackground">@android:color/black</item>
    </style>

Android menu background black with Theme.AppCompat?

7 Answers7