[android] How to style the menu items on an Android action bar

There's been many questions on styling on action bars, but the ones I've found either are relating to styling the tabs, or have answers that don't work for me.

The question is really quite simple. I want to be able to change the text styling (even just colour) of the menu items in the action bar.

I've read this: http://android-developers.blogspot.com/2011/04/customizing-action-bar.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+blogspot%2FhsDu+%28Android+Developers+Blog%29

And this question: Style an Action Bar in Android Honeycomb

From which I have put together a test application that I am using to try and get the menu items to change. It uses all the default values for an app created in the eclipse android plugin, except for the following.

A styles file:

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

<style name="MyAppTheme" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:titleTextStyle">@style/MyActionBar.TitleTextStyle</item>
    <item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item>
</style>

<style name="MyActionBar.TitleTextStyle"
    parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">#F0F</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">24dip</item>
</style>

<style name="MyActionBar.MenuTextStyle"
    parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">#F0F</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">24dip</item>
</style>
</resources>

A menu for the action bar:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:showAsAction="always|withText" android:icon="@android:drawable/ic_menu_edit"
    android:id="@+id/menu_item1" android:title="menu_item1"></item>

<item android:showAsAction="always|withText" android:icon="@android:drawable/ic_menu_edit"
    android:id="@+id/menu_item2" android:title="menu_item2"></item>

</menu>

The main activity:

public class Main extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

/**
 * Create the options menu that is shown on the action bar
 */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_menu, menu);
    return true;
}
}

The application compiles and runs. The styling for the action bar title text works perfectly (is that lovely shade of pink #F0F I've defined). The menu items do not change appear but with default styling (holo light).

What am I doing wrong ?

This question is related to android android-actionbar

The answer is


You have to change

<style name="MyActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">

to

<style name="MyActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Menu">

as well. This works for me.


BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);

    TextView textView = (TextView) navigation.findViewById(R.id.navigation_home).findViewById(R.id.smallLabel);
    textView.setTypeface(Typeface.DEFAULT_BOLD);
    textView = (TextView) navigation.findViewById(R.id.navigation_home).findViewById(R.id.largeLabel);
    textView.setTypeface(Typeface.DEFAULT_BOLD);

I know its an old post, but just in case anyone is looking here. I added this to my style.xml and it worked for me.

<!-- This is the main theme parent -->
<style name="MyTabStyle">
    <item name="android:actionBarTabTextStyle">@style/MyTabTextStyle</item>
</style>

<style name="MyTabTextStyle" parent="@android:style/Widget.ActionBar.TabText">
    <item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/pressed_skylogtheme</item>
</style>

I think the code below

<item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item> 

must be in MyAppTheme section.


Chris answer is working for me...

My values-v11/styles.xml file:

<resources>
<style name="LightThemeSelector" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/ActionBar</item>
    <item name="android:editTextBackground">@drawable/edit_text_holo_light</item>
    <item name="android:actionMenuTextAppearance">@style/MyActionBar.MenuTextStyle</item>
</style>

<!--sets the point size to the menu item(s) in the upper right of action bar-->
<style name="MyActionBar.MenuTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textSize">25sp</item>
</style>

<!-- sets the background of the actionbar to a PNG file in my drawable folder. 
displayOptions unset allow me to NOT SHOW the application icon and application name in the upper left of the action bar-->
<style name="ActionBar" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="android:displayOptions"></item>
</style>

<style name="inputfield" parent="android:Theme.Holo.Light">
    <item name="android:textColor">@color/red2</item>
</style>  
</resources>

My guess is that you have to also style the views that are generated from the menu information in your onCreateOptionsMenu(). The styling you applied so far is working, but I doubt that the menu items, when rendered with text use a style that is the same as the title part of the ActionBar.

You may want to look at Menu.getActionView() to get the view for the menu action and then adjust it accordingly.


I did this way:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionMenuTextAppearance">@style/MenuTextAppearance</item>
    <item name="android:actionMenuTextAppearance">@style/MenuTextAppearance</item>
    <item name="actionMenuTextColor">@color/colorAccent</item>
</style>

<style name="MenuTextAppearance" >
    <item name="android:textAppearance">@android:style/TextAppearance.Large</item>
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
</style>