How to style the menu items on an Android action bar
Asked Answered
U

8

67

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 ?

Undetermined answered 20/5, 2011 at 12:58 Comment(0)
L
64

Instead of having the android:actionMenuTextAppearance item under your action bar style, move it under your app theme.

Littell answered 12/6, 2012 at 15:20 Comment(4)
it's not working for me :( only the primaryTextColor is used... but that is not a right solutionPetersham
To alter the color add <item name="android:actionMenuTextColor">@color/action_bar_red</item> to the app theme.Requital
By default the text is coming in caps. How to make the first letter in capital and rest in small case?Orthogenesis
What if I want to use it on item that is not an action? Because this seems to work only on items that have showAsAction="always"Indochina
L
7

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>
Lithosphere answered 23/4, 2013 at 17:8 Comment(0)
B
5

I think the code below

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

must be in MyAppTheme section.

Besot answered 19/12, 2011 at 14:10 Comment(1)
its very helpful, I was trying the same but didn't worked. Worked fine when applied in MyAppTheme.Linkman
A
5

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.

Armbrecht answered 5/3, 2012 at 16:51 Comment(0)
V
4

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>
Voyles answered 25/6, 2013 at 22:16 Comment(1)
This works for me for text size.. but not for color. How weird is that!Screed
R
3

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>
Rose answered 2/8, 2017 at 11:9 Comment(0)
T
1

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.

Trousseau answered 3/8, 2011 at 17:40 Comment(0)
S
0

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);
Shanna answered 6/7, 2018 at 8:59 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.