Styling the popup menu in Android 5.0

Question

I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/theme_accent</item>
        <item name="colorAccent">@color/theme_accent_secondary</item>
    </style>

    <style name="AppThemeDark" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_accent</item>
        <item name="colorAccent">@color/theme_accent_secondary</item>
    </style>
</resources>

(The ActionBar color is being set programmatically.)

Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:

I have tried setting the popupMenuStyle but it didn't work.

How can I make the popup menu darker?

Solution 1

Solved my problem by using this style:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/theme_accent</item>
    <item name="colorAccent">@color/theme_accent_secondary</item>
    <item name="actionBarStyle">@style/AbStyle</item>
    <item name="actionModeBackground">@color/actionmode_bg</item>
</style>

<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
    <item name="elevation">2dp</item>
    <item name="displayOptions">homeAsUp|showTitle</item>
    <!--showHome-->
</style>

<style name="AppThemeDark" parent="Theme.AppCompat">
    <item name="colorAccent">@color/theme_accent_secondary</item>
    <item name="actionBarStyle">@style/AbStyle</item>
</style>

I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle

Solution 2

Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.

It actually mentions your use case at Dark Action Bar and provides this code:

<android.support.v7.widget.Toolbar
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”@dimen/triple_height_toolbar”
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Solution 3

Not a full answer but what I found so far:

In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)

Apparently, now that is a color. To modify it you need to do specify the following theme:

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
        <item name="android:actionBarPopupTheme">@style/popupNew</item>
    </style>

    <style name="popupNew" parent="android:ThemeOverlay.Material.Light">
        <item name="android:colorBackground">@color/red</item>
    </style>

</resources>

This works correctly if the theme applied to the app is just this. If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.

Solution 4

Add the property popupTheme to your toolbar:

<android.support.v7.widget.Toolbar
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@color/color_primary"
  app:theme="@style/Theme.AppCompat.Light"
  app:popupTheme="@style/Theme.AppCompat" />

Or define a new style for your toolbar:

<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="android:background">@color/green</item>
    <item name="popupTheme">@style/Theme.AppCompat.Light</item>
    <item name="theme">@style/Theme.AppCompat</item>
</style>

Solution 5

This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.

First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:

<style name="Theme.MyTheme" parent="@style/Base.Theme.AppCompat.Light.DarkActionBar">
    ...other stuff here

    <item name="actionBarPopupTheme">@style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>

<style name="Theme.MyTheme.ActionBarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Light">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:background">@android:color/black</item>
</style>

Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):

• Open your App's style.xml in Android Studio
• On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in @style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.

• Within this style I saw this line:

  < item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light< /item>

  This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor Android developers documentation and found "Reference to a theme that should be used to inflate popups shown by widgets in the action bar". So this was worth playing with.

• I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.

• In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
• To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
• The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.

View more solutions

Comments

[animaonline]

I'm using an ActionBar, so it doesn't really help me much :(

[animaonline]

Why would I want to stop using the Actionbar? It's not like it has been deprecated.

[Derk-Jan]

@animaonline the Toolbar is a superset of the ActionBar (simply wrapped extracted layout) You can use anything you already did, and more. The ActionBar will ultimately replaced. The current support library has quite a few bugs when it comes to supporting the older actionbar, as you might have noticed.

[animaonline]

I'm aware of that, I have a really complex app with many fragments and custom navigation, ActionBar does the job just well, I don't need any of the new features from the toolbar, so I'm going to stick with the AB for now, I appreciate your recommendations but they won't help me much.

[Jonguo]

this works. but how to modify the shadow of the actionbar popup window?

[Brandon]

The correct answer is that your theme calls the style to the "actionBarPopupTheme" and then in the style you have to add the parent for "ThemeOverlay". I did this and it worked. Thank you for your answer!

[Mohammed Rampurawala]

Hi, Can we change the size of Pop up menu items?