How to change the background color of dropdown menu in the actionbar

Question

I'm working on an android app and I'm facing some problems in designing my actionbar. I'm using the dark actionbar with white icons on it. I have a dropdown menu popped when I click the overflow icon. Everything is good but I need light background for the dropdown menu with red colored text. I have tried editing the theme in styles.xml but I can only change the background color of dropdown menu when I'm using the light colored theme.

I can get the light colored dropdown menu when I change the Theme.Base.AppCompat.Light.DarkActionBar to Theme.Base.AppCompat.Light but other icons like 'Search' turn very light and hardly visible (see 2nd picture). How can I change the text color on the drop down menu from black to red and make the 'Search' icon visible.

Here is the code for more insight

styles.xml

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.Base.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:popupMenuStyle">@style/MyPopUpMenu</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/gloryred</item>
</style>

<style name="MyPopUpMenu"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:popupMenuStyle">@color/white</item>
</style>

menu_actions.xml

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

<item android:id="@+id/action_search"
    android:title="@string/action_search"
    android:icon="@drawable/ic_action_search"
    com.example.unitedstates.app:showAsAction="ifRoom"
    com.example.unitedstates.app:actionViewClass="android.widget.SearchView"/>

<item android:id="@+id/action_overflow"
    android:title="@string/action_overflow"
    android:icon="@drawable/ic_action_overflow"
    com.example.unitedstates.app:showAsAction="ifRoom">
    <menu>
        <item
            android:id="@+id/action_help"
            android:title="@string/action_help"
            android:icon="@drawable/ic_action_help"
            android:showAsAction="never"/>
        <item
            android:id="@+id/action_about"
            android:title="@string/action_about"
            android:icon="@drawable/ic_action_about"
            android:showAsAction="never"/>
        <item
            android:id="@+id/action_feedback"
            android:title="@string/action_feedback"
            android:icon="@drawable/ic_action_feedback"
            android:showAsAction="never"/>
    </menu>
</item>

Frohman

Answer 1

You can change the background color and text color of the dropdown menu in the actionbar like this.

Set the style for the popup menu in styles.xml.

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

         <item name="android:background">@color/YourColor</item>
         <item name="android:textColor">@Color/YourColor</item>

</style>

Now set this style as the popupTheme for your toolbar.

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

          // rest of your code
      app:popupTheme="@style/PopupMenuStyle" />

Idle

Answer 2

Here's my solution for thoses who are using Material theme with androidx.appcompat:

as of appcompat:1.2.0 you need to create a res/drawable/mtrl_popupmenu_background.xml and set it a custom color :

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="?attr/colorPrimaryDark"/>

  <corners
      android:bottomLeftRadius="4dp"
      android:bottomRightRadius="4dp"
      android:topLeftRadius="4dp"
      android:topRightRadius="4dp"/>

  <padding
      android:bottom="8dp"
      android:top="8dp"/>

</shape>

Then create a dedicated theme :

<style name="YouTheme.PopupMenuStyle">
    <item name="actionOverflowMenuStyle">@style/YouThemePopupMenu.Overflow</item>
</style>

<style name="YouThemePopupMenu" parent="@style/Widget.MaterialComponents.PopupMenu"/>

<style name="YouThemePopupMenu.Overflow" parent="@style/Widget.MaterialComponents.PopupMenu.Overflow">
    <item name="android:dropDownSelector">?attr/listChoiceBackgroundIndicator</item>
    <item name="android:popupBackground">@drawable/mtrl_popupmenu_background</item>
</style>

Then use it inside your Toolbar :

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    app:layout_scrollFlags="scroll|enterAlways"
    app:popupTheme="@style/YourTheme.PopupMenuStyle"/>

Tamratamsky

Answer 3

If you want to use black back ground you can to easy way go to res > drawable-hdpi > menu_dropdown_panel_example.9.png this is the nine patch image other then black lines replace its color to black or glory red if you want

as same you have to do in res>drawable-mdpi>menu_dropdown_panel_example.9.png res>drawable-xhdpi>menu_dropdown_panel_example.9.png res>drawable-xxhdpi>menu_dropdown_panel_example.9.png

Kagoshima