Use custom font on Action bar

Question

I'm trying to change the font on my action bar tabs but I can't make it work. I already tried a few things and this one looked like the best option. Unfortunately this does nothing and the font remains the same. I also know that the Typeface is ok because I use it in other parts of my code. This is what I've got:

 actionBar = getActionBar();
 actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    SpannableString s = new SpannableString("My Tab");
    Typeface tf = Typeface.createFromAsset(getAssets(), "my_font.ttf");
    s.setSpan(tf, 0, s.length(),
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    ActionBar.Tab myTab = actionBar.newTab();
    myTab.setText(s);
    myTab.setTabListener(this);

    actionBar.addTab(myTab);

Anyone knows how to do it?

Thanks in advance

score 1 · Answer 1 · answered Dec 22 '14 at 14:35

You can customized the text style of tab by defining the new Tab-Text-Style like that

<style name="TabTextStyle" parent="@style/Widget.AppCompat.ActionBar.TabText">
        <item name="android:textColor">@android:color/holo_blue_bright</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:fontFamily">sans-serif-light</item>
    </style>

Now set tabTextStyle like that

<style name="AppTheme" parent="AppBaseTheme">
        <item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
        <item name="actionBarTabTextStyle">@style/TabTextStyle</item>
    </style>

You can't do like this because I want to use a custom font. – Nuno Dec 22 '14 at 15:07 — Nuno, Dec 22 '14 at 15:07

MineConsulting SRL · Answer 2 · 2014-12-23T08:37:27.567

This is the code to use a custom text in actionbar:

        ActionBar act = ((ActionBarActivity) getActivity()).getSupportActionBar();

        LayoutInflater inflator = LayoutInflater.from(getActivity());
        View v = inflator.inflate(R.layout.action_bar_custom, null);

        ((MyCustomTextView) v.findViewById(R.id.title_text)).setText(title);
        act.setCustomView(v);

In this case we have a custom TextView into a normal layout we inflate to set as a view in the ActionBar, the layout will look like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ch.nuewsli.widget.TestoTextView 
    android:id="@+id/title_text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textColor="@color/WHITE_TEXTCOLOR"
    android:textSize="18sp"
    android:lines="1"
    android:gravity="center_vertical"/>

</LinearLayout>

Since it is not possible to change the ActionBar font from the xml (but only the font family) you have to extend a TextView, force it to use your font and put it into your ActionBar, remember to copy your font into the assets folder. The code below is capable to distinguish the style of your TextView specified by the android:textStyle attribute between bold and the others.

UPDATE Just put this code of your TextView :

   public MyTextView(Context context, AttributeSet attrs, int defStyle) {
    this(context, attrs);
  }

  public MyTextView(Context context) {
    super(context);

    this.mContext = context;
    init();
 }

 public void init() {

    Typeface typeface = getTypeface();

    if(typeface != null)
        style = typeface.getStyle();

    if(style != Typeface.BOLD) {
        typeface = Typeface.createFromAsset(mContext.getAssets(), "My-Font-Regular.ttf");
    }else {
        typeface = Typeface.createFromAsset(mContext.getAssets(), "My-Font-Bold.ttf");
    }
    this.setTypeface(typeface);
}

score -1 · Answer 3 · answered Dec 22 '14 at 10:34

Do you need to do it programatically? Otherwise you might be able to use a theme for it, i have however noticed that it works differently depending on build targets etc. Here is a sample though:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:actionBarStyle">@style/WorkoutLogActionBar</item>
    <item name="colorPrimary">#ffffa220</item>
</style>

<style name="WorkoutLogActionBar"
    parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:titleTextStyle">@style/WorkoutLogActionBarTitleText</item>
    <item name="android:icon">@android:color/transparent</item>
</style>

<style name="WorkoutLogActionBarTitleText">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">@dimen/title_text_size</item>
    <item name="android:fontFamily">"sans-serif-light"</item>
</style>

This changes font in title on my actionbar, but there seems to be a:

<item name="android:actionBarTabTextStyle"></item>

Hope this works in your build target version and is of help.

Best regards!

I think I need because otherwise you can't use custom fonts. — Nuno, Dec 22 '14 at 10:36
I see, have you tried using a custom view? As http://developer.android.com/reference/android/app/ActionBar.Tab.html#setCustomView(android.view.View) and http://stackoverflow.com/questions/17893664/how-to-customize-the-font-of-action-bar-tabs — nenne, Dec 22 '14 at 12:03
Yes, I can change the font like that but then I lose all the other customisation that I did — Nuno, Dec 22 '14 at 14:44

Use custom font on Action bar

3 Answers3