How to change the background color of Action Bar's Option Menu in Android 4.2?
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:
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?
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:--
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".
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:
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:
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+).
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.
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!
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>