Android menu background black with Theme.AppCompat?

18,105

Solution 1

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

  1. Create a style in your styles.xml

    <style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
         <item name="android:background">@android:color/white</item>
    </style>
    
  2. 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.

Solution 2

To change the toolbar options menu color, add this to your toolbar element

app:popupTheme="@style/MyDarkToolbarStyle"

Then in your styles.xml define the popup menu style

<style name="MyDarkToolbarStyle" parent="ThemeOverlay.AppCompat.Light">
    <item name="android:colorBackground">@color/mtrl_white_100</item>
    <item name="android:textColor">@color/mtrl_light_blue_900</item>
</style>

Note that you need to use colorBackground not background. The latter would be applied to everything (the menu itself and each menu item), the former applies only to the popup menu.

Solution 3

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

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

Solution 4

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

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

`

Solution 5

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

Share:
18,105

Related videos on Youtube

rohan32
Author by

rohan32

Updated on October 10, 2021

Comments

  • rohan32
    rohan32 over 2 years

    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>
    

  • Sam
    Sam over 8 years
    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.
  • Android
    Android over 6 years
    This didn't work for me, but this did.