How to change the background color of Action Bar's Option Menu in Android 4.2?

Question

I'd like to change the background color of the option (overflow) menu in Android 4.2. I have tried all the methods but it is still showing the default color set by the theme. I used the following code & XML configs.

MainActivity.java

public class MainActivity extends Activity {

@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    getActionBar().setIcon(R.drawable.ic_launcher);     
    getActionBar().setTitle("Sample Menu");
    getActionBar().setBackgroundDrawable(new 
               ColorDrawable(Color.parseColor("#33B5E5"))); 

    int titleId = Resources.getSystem().getIdentifier("action_bar_title", "id", "android");
    TextView titleText = (TextView)findViewById(titleId);
    titleText.setTextColor(Color.parseColor("#ffffff"));

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    setMenuBackground();
    return true;
}

protected void setMenuBackground(){                     
    // Log.d(TAG, "Enterting setMenuBackGround");  
    getLayoutInflater().setFactory( new Factory() { 

        @Override
        public View onCreateView(String name, Context context,
                AttributeSet attrs) {
            if ( name.equalsIgnoreCase( "com.android.internal.view.menu.IconMenuItemView" ) ) {
                try { // Ask our inflater to create the view  
                    LayoutInflater f = getLayoutInflater();  
                    final View view = f.createView( name, null, attrs );  
                    /* The background gets refreshed each time a new item is added the options menu.  
                    * So each time Android applies the default background we need to set our own  
                    * background. This is done using a thread giving the background change as runnable 
                    * object */
                    new Handler().post( new Runnable() {  
                        public void run () {  
                            // sets the background color   
                            view.setBackgroundResource( R.color.menubg);
                            // sets the text color              
                            ((TextView) view).setTextColor(Color.WHITE);
                            // sets the text size              
                            ((TextView) view).setTextSize(18);
            }
                    } );  
                return view;
            }
        catch ( InflateException e ) {}
        catch ( ClassNotFoundException e ) {}  
    } 
            return null;
        }});
}

}

Menu.xml

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

<item
    android:id="@+id/action_settings"
    android:icon="@drawable/menu"
    android:showAsAction="always"
    android:title="@string/action_settings">
    <menu>
        <item
            android:id="@+id/item1"             
            android:showAsAction="always"
            android:title="@string/item1" />
        <item
            android:id="@+id/item2"             
            android:showAsAction="always"
            android:title="@string/item2" />
        <item
            android:id="@+id/item3"
            android:showAsAction="always"
            android:title="@string/item3" />
        <item
            android:id="@+id/item4"
            android:showAsAction="always"
            android:title="@string/item4" />
    </menu>
</item>

</menu>

color.xml

<color name="menubg">#33B5E5</color>

The above setMenuBackground is not taking any effect:

Menu Sample

In the above picture, I want to change the menu background from black to the blue color in the Action Bar. How can I achieve this, and what I did do wrong?

Refer this below link http://stackoverflow.com/questions/27787890/android-optionsmenu-issue-background-is-always-transparent — Pavan Pyati, Aug 29 '15 at 13:39

score 95 · Answer 1 · edited May 23 '17 at 11:33

95

In case people are still visiting for a working solution, here is what worked for me:-- This is for Appcompat support library. This is in continuation to ActionBar styling explained here

Following is the styles.xml file.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <!--To change the text styling of options menu items</item>-->
        <item name="android:itemTextAppearance">@style/MyActionBar.MenuTextStyle</item>
        <!--To change the background of options menu-->
        <item name="android:itemBackground">@color/skyBlue</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="MyActionBar.MenuTextStyle"
        parent="style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/red</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">25sp</item>
    </style>
</resources>

and this is how it looks--MenuItem background color is skyblue and MenuItem text color is pink with textsize as 25sp:--

edited May 23 '17 at 11:33

Community

1
1

answered Sep 01 '15 at 05:45

Nicks

16,030
8
58
65

1

Thank you @Nicks, `android:itemBackground` works for me and `android:popupBackground` not. – Ninja Nov 19 '15 at 02:43
2

Yeah, app compatibility is full of trivia that I would have never figured out if not for this site. – user798719 Nov 22 '15 at 16:23
3

Thank you for stopping me from going crazy (AppCompat sucks) – SoliQuiD Dec 01 '15 at 16:18
Man it's about time I found one of these solutions that works. Feels like I've gone through about 20 of them. This one finally worked for me using the Material theme. That `android:itemBackground` was key. Thanks. – NoChinDeluxe Dec 23 '15 at 19:43
1

Thanks for `android:itemBackground`, it did the trick for me on Android M using appcompat 23.1.1. No other solution worked out. – JHH May 18 '16 at 11:37
3

This removes the ripple effect :( – David Velasquez May 28 '16 at 23:31
Not sure if this is correct. ItemBackground is something completely diferent than background color which is different form popupBackground. – f470071 Mar 30 '17 at 01:25
1

While this is effective, it removes default fonts and ripple effect, even the rounded edges.... – em_ Aug 01 '17 at 15:10

score 90 · Answer 2 · edited May 23 '17 at 12:34

The Action Bar Style Generator, suggested by Sunny, is very useful, but it generates a lot of files, most of which are irrelevant if you only want to change the background colour.

So, I dug deeper into the zip it generates, and tried to narrow down what are the parts that matter, so I can make the minimum amount of changes to my app. Below is what I found out.

In the style generator, the relevant setting is Popup color, which affects "Overflow menu, submenu and spinner panel background".

enter image description here

Go on and generate the zip, but out of all the files generated, you only really need one image, menu_dropdown_panel_example.9.png, which looks something like this:

enter image description here

So, add the different resolution versions of it to res/drawable-*. (And perhaps rename them to menu_dropdown_panel.9.png.)

Then, as an example, in res/values/themes.xml you would have the following, with android:popupMenuStyle and android:popupBackground being the key settings.

<resources>

    <style name="MyAppActionBarTheme" parent="android:Theme.Holo.Light">
        <item name="android:popupMenuStyle">@style/MyApp.PopupMenu</item>
        <item name="android:actionBarStyle">@style/MyApp.ActionBar</item>
    </style>

    <!-- The beef: background color for Action Bar overflow menu -->
    <style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@drawable/menu_dropdown_panel</item>
    </style>

    <!-- Bonus: if you want to style whole Action Bar, not just the menu -->
    <style name="MyApp.ActionBar" parent="android:Widget.Holo.Light.ActionBar.Solid">
        <!-- Blue background color & black bottom border -->
        <item name="android:background">@drawable/blue_action_bar_background</item>
    </style>   

</resources>

And, of course, in AndroidManifest.xml:

<application
    android:theme="@style/MyAppActionBarTheme" 
    ... >

What you get with this setup:

enter image description here

Note that I'm using Theme.Holo.Light as the base theme. If you use Theme.Holo (Holo Dark), there's an additional step needed as this answer describes!

Also, if you (like me) wanted to style the whole Action Bar, not just the menu, put something like this in res/drawable/blue_action_bar_background.xml:

<!-- Bonus: if you want to style whole Action Bar, not just the menu -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#FF000000" />
            <solid android:color="#FF2070B0" />                   
        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#FF2070B0" />
            <solid android:color="#00000000" />
            <padding android:bottom="2dp" />
        </shape>
    </item>

</layer-list>

Works great at least on Android 4.0+ (API level 14+).

Thanks Jonik. This worked for me to change the Popup background color with android:popupMenuStyle and android:popupBackground. Could you please guide me on the changing the text color in the popup menu? — VikramV, Jan 11 '14 at 08:45
@VikramV: I managed to change the menu text colour using `android:itemTextAppearance` & `android:textColor` [as described in this answer](http://stackoverflow.com/a/19212678/56285). — Jonik, Jan 11 '14 at 13:33
For some strange reason this is not working for me on android 4.4. Exact same setup... — DarkLeafyGreen, Mar 08 '14 at 18:16
@artworkadシ, curious; works fine on 4.4 for me. What base theme are you using? If Holo Dark, you could [try if this works](http://stackoverflow.com/a/22704653/56285). — Jonik, Apr 18 '14 at 08:29
How to make it to work for both older versions and latest versions, i need to change the background color of popup menu for both versions. @Jonik — AndroidDev, May 23 '14 at 12:21
GG for the answer, it helped me a lot. Unfortunately i'm using android:Theme.Holo.Light.DarkActionBar and popup won't change. It seems this is a bug :-/ . — JJ86, Jun 19 '14 at 16:20
If you need to customise **Spinner dropdown background**, I just found out that the same `menu_dropdown_panel` image [works great for that too](http://stackoverflow.com/a/25523712/56285). — Jonik, Aug 27 '14 at 09:40
@Jonik how I manage width of item? i mean is there maxwidth attr in style? — Bhavin Chauhan, Dec 31 '14 at 07:31

score 18 · Accepted Answer · answered Oct 29 '13 at 13:36

18

There is an easy way to change the colors in Actionbar Use ActionBar Generator and copy paste all file in your res folder and change your theme in Android.manifest file.

answered Oct 29 '13 at 13:36

Sunny

14,522
15
84
129

1

+1, the only way I found to make it work was indeed the Style Generator. If you don't want to add all of the dozens of files it creates to your project, [check out this](http://stackoverflow.com/a/20077381/56285). – Jonik Nov 19 '13 at 16:59
5

this doesnt answer the question of how exactly to do this, even though it solves the problem – Nlinscott Sep 24 '16 at 18:20

score 17 · Answer 4 · edited May 23 '17 at 11:55

17

If you read this, it's probably because all the previous answers didn't work for your Holo Dark based theme.

Holo Dark uses an additional wrapper for the PopupMenus, so after doing what Jonik suggested you have to add the following style to your 'xml' file:

<style name="PopupWrapper" parent="@android:style/Theme.Holo">
    <item name="android:popupMenuStyle">@style/YourPopupMenu</item>
</style>

Then reference it in your theme block:

<style name="Your.cool.Theme" parent="@android:style/Theme.Holo">
    .
    .
    .
    <item name="android:actionBarWidgetTheme">@style/PopupWrapper</item>
</style>

That's it!

edited May 23 '17 at 11:55

Community

1
1

answered Mar 28 '14 at 05:08

rupps

9,712
4
55
95

ohh what a pity, it was a pretty thorough explanation :( – rupps Nov 12 '14 at 05:25
Doesn't there really exist a less twisted method? ... Currently API28 there is still no system other than this to define the colors of an actionbar in a less crazy way ?. – Bronz Sep 22 '19 at 01:30
hmm that answer is 4 years old ! ActionBar is now deprecated, using ToolBar you can set any color you want. Only thing is the Popup Menu background and I don't know if situation has improved here, anyways it is just an style, it is not that twisted is it? – rupps Sep 24 '19 at 10:18

score 15 · Answer 5 · answered Jun 30 '14 at 13:20

My simple trick to change background color and color of the text in Popup Menu / Option Menu

<style name="CustomActionBarTheme"
       parent="@android:style/Theme.Holo">
    <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
    <item name="android:itemTextAppearance">@style/TextAppearance</item>
</style>
<!-- Popup Menu Background Color styles -->
<style name="MyPopupMenu" 
       parent="@android:style/Widget.Holo.ListPopupWindow">
    <item name="android:popupBackground">@color/Your_color_for_background</item> 
</style>
<!-- Popup Menu Text Color styles -->
<style name="TextAppearance">
    <item name="android:textColor">@color/Your_color_for_text</item>
</style>

score 6 · Answer 6 · answered Nov 04 '18 at 08:35

Within your app theme you can set the android:itemBackground property to change the color of the action menu.

For example:

<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/drk_colorPrimary</item>
        <item name="colorPrimaryDark">@color/drk_colorPrimaryDark</item>
        <item name="colorAccent">@color/drk_colorAccent</item>
        <item name="actionBarStyle">@style/NoTitle</item>
        <item name="windowNoTitle">true</item>
        <item name="android:textColor">@color/white</item>

        <!-- THIS IS WHERE YOU CHANGE THE COLOR -->
        <item name="android:itemBackground">@color/drk_colorPrimary</item>
</style>

Use `@color/colorAppWhite`, otherwise it will not change submenu titles. — Eugene Kartoyev, Oct 08 '20 at 01:48

score 4 · Answer 7 · answered Jun 30 '17 at 10:37

I'm also struck with this same problem, finally i got simple solution. just added one line to action bar style.

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

"android:colorBackground" is enough to change option menu background

score 4 · Answer 8 · answered Jan 19 '18 at 16:07

4

FAST way!

styles.xml

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

    <item name="android:background">@color/colorBackground</item>
    <item name="android:textColor">@color/colorItem</item>

</style>

Then add this specific styles to your AppTheme styles

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="popupTheme">@style/popupTheme</item>
</style>

DONE!

answered Jan 19 '18 at 16:07

Soon Santos

2,107
22
43

Instead of setting `android:background`, use `android:colorBackground` – tmm1 Aug 03 '18 at 23:32

score 3 · Answer 9 · answered Nov 06 '14 at 10:31

You can apply styles and Themes in Overflow MenuItem as per below. OverFlow Menu is ListView so, we can apply theme as per listview.

Apply below code in styles.xml

<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">@style/PopupMenuListView</item>
        <item name="android:actionBarWidgetTheme">@style/PopupMenuTextView</item>
        <item name="android:popupMenuStyle">@style/PopupMenu</item>
        <item name="android:listPreferredItemHeightSmall">40dp</item>
</style>

<!-- Change Overflow Menu ListView Divider Property -->
    <style name="PopupMenuListView" parent="@android:style/Widget.Holo.ListView.DropDown">
        <item name="android:divider">@color/app_navigation_divider</item>
        <item name="android:dividerHeight">1sp</item>
        <item name="android:listSelector">@drawable/list_selector</item>
    </style>

    <!-- Change Overflow Menu ListView Text Size and Text Size -->
    <style name="PopupMenuTextView" parent="@android:style/Widget.Holo.Light.TextView">
        <item name="android:textColor">@color/app_white</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">18sp</item>
        <item name="android:drawablePadding">25dp</item>
        <item name="android:drawableRight">@drawable/navigation_arrow_selector</item>
    </style>

    <!-- Change Overflow Menu Background -->
    <style name="PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@drawable/menu_overflow_bg</item>
    </style>

score 2 · Answer 10 · answered Jan 30 '14 at 13:45

I was able to change colour of action overflow by just putting hex value at:

    <!-- The beef: background color for Action Bar overflow menu -->
<style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
    <item name="android:popupBackground">HEX VALUE OF COLOR</item>
</style>

score 2 · Answer 11 · edited Jan 26 '18 at 21:43

2

Add following to your Styles.xml

<style name="Custom_Theme" parent="Theme.AppCompat.Light.DarkActionBar">

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

</style>

Change theme in activity_main.xml only.

android:theme="@style/Custom_Theme"

edited Jan 26 '18 at 21:43

Jules Dupont

7,259
7
39
39

answered Jan 26 '18 at 19:16

Keyur Sureliya

164
3
11

score 1 · Answer 12 · answered Oct 31 '14 at 10:09

Try this code. Add this snippet to your res>values>styles.xml

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:actionBarWidgetTheme">@style/Theme.stylingactionbar.widget</item>
</style>
<style name="PopupMenu" parent="@android:style/Widget.Holo.ListPopupWindow">
    <item name="android:popupBackground">@color/DarkSlateBlue</item>
 <!-- for @color you have to create a color.xml in res > values -->
</style>
<style name="Theme.stylingactionbar.widget" parent="@android:style/Theme.Holo">
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
</style>

And in Manifest.xml add below snippet under application

 <application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"

     android:theme="@style/AppTheme"  >

score 1 · Answer 13 · answered Sep 03 '17 at 14:42

<style name="customTheme" parent="any_parent_theme">
    <item name="android:itemBackground">#424242</item>
    <item name="android:itemTextAppearance">@style/TextAppearance</item>
</style>

<style name="TextAppearance">
    <item name="android:textColor">#E9E2BF</item>
</style>

score 0 · Answer 14 · answered Feb 21 '14 at 08:17

Following are the changes required in your theme for changing action bar & overflow menu background color. You need to configure "android:background" of actionBarStyle & popupMenuStyle

<application
            android:name="...."
            android:theme="@style/AppLightTheme">

<style name="AppLightTheme" parent="android:Theme.Holo.Light">      
        <item name="android:actionBarStyle">@style/ActionBarLight</item>
        <item name="android:popupMenuStyle">@style/ListPopupWindowLight</item>
</style>

<style name="ActionBarLight" parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/white</item>
</style>


<style name="ListPopupWindowLight"parent="@android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="android:background">@color/white</item>
</style>

score 0 · Answer 15 · answered Mar 06 '19 at 12:54

0

I used this and it works just fine.

Apply this code in the onCreate() function

val actionBar: android.support.v7.app.ActionBar? = supportActionBar
    actionBar?.setBackgroundDrawable(ColorDrawable(Color.parseColor("Your color code here")))

answered Mar 06 '19 at 12:54

user8397875

1

Carlos Jafet Neto · Answer 16 · 2020-02-26T00:28:38.947

0

To alter the color of the app bar only, you just have to change the colorPrimary value inside the colors.xml file and the colorPrimaryDark if you want to change the battery bar color as well:

<resources>
  <color name="colorPrimary">#B90C0C</color>
  <color name="colorPrimaryDark">#B90C0C</color>
  <color name="colorAccent">#D81B60</color>
</resources>

edited Feb 26 '20 at 00:28

answered Feb 26 '20 at 00:22

Carlos Jafet Neto

871
7
11

How to change the background color of Action Bar's Option Menu in Android 4.2?

16 Answers16

Linked