Custom font for ActionBarSherlock tabs

Question

I want to set font for the "Video" and "Image" tabs in ActionBarSherlock. I have used the following code to do so. Its showing accurately in ICS but not in the lower version device but I have shown accurate output in the other part of this application by setting TYPE FACE like ...

a.settypeface("ab.tttf");
a.settext("VIDEO");

But how to do I set a TypeFace in the ActionBar in this code:

mTabsAdapter.addTab(bar.newTab().setText("IMAGE"), AFragment.class, null);
mTabsAdapter.addTab(bar.newTab().setText("VIDEO"), BFragment.class, null);

Answer 1

Okay . I found it myself some where on SO.

First make an xml file with this in it: tab_title.xml

<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/action_custom_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Custom title"
android:textColor="#fff"
android:textSize="18sp"
android:paddingTop="5dp" />

Then in the class where you in instantiate your ActionBar use this code to set the text on each of the tabs. (This example is using ActionBarSherlock.)

ActionBar bar = getSupportActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

String[] tabNames = {"Tab 1","Tab 2","Tab 3"};

for(int i = 0; i<bar.getTabCount(); i++){
    LayoutInflater inflater = LayoutInflater.from(this);
    View customView = inflater.inflate(R.layout.tab_title, null);

    TextView titleTV = (TextView) customView.findViewById(R.id.action_custom_title);
    titleTV.setText(tabNames[i]);
    //Here you can also add any other styling you want.

    bar.getTabAt(i).setCustomView(customView);
}

Answer 2

Try this:

String s = "VIDEO";
SpannableString mSS = new SpannableString(s);
mSS.setSpan(new StyleSpan(Typeface.BOLD), 0, s.length(), 0);
mTabsAdapter.addTab(bar.newTab().setText(mSS),
                BFragment.class, null);

Answer 3

To solve this you could create a Special Actionbar class. Simply create a Class myBar extends Sherlockactionbar and put in the settypeface. If you now create that Bar in your view it will have the Typeface as you whish. For example here is an button with a new Typeface.

public class ChangedButton extends Button{

    public ChangedButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        Typeface font = Typeface.createFromAsset(context.getAssets(), "fonts/viking2.TTF");
        this.setTypeface(font);
    }
}

regards

Answer 4

First create following custom TypefaceSpan class in your project.Bit changed version of Custom TypefaceSpan to enable to use both .otf and .ttf fonts.

import java.util.StringTokenizer;

import android.content.Context;
import android.graphics.Typeface;
import android.support.v4.util.LruCache;
import android.text.TextPaint;
import android.text.style.MetricAffectingSpan;

public class TypefaceSpan extends MetricAffectingSpan{

    /*Cache to save loaded fonts*/
    private static LruCache<String, Typeface> typeFaceCache= new LruCache<String, Typeface>(12);
    private Typeface mTypeface;
    public TypefaceSpan(Context context,String typeFaceName)
    {
        StringTokenizer tokens=new StringTokenizer(typeFaceName,".");
        String fontName=tokens.nextToken();
        mTypeface=typeFaceCache.get(fontName);

        if(mTypeface==null)
        {
            mTypeface=Constants.getFont(context, typeFaceName);
            //cache the loaded font
            typeFaceCache.put(fontName, mTypeface);
        }
    }
    @Override
    public void updateMeasureState(TextPaint p) {
        p.setTypeface(mTypeface);
    }

    @Override
    public void updateDrawState(TextPaint tp) {
        tp.setTypeface(mTypeface);
    }

}

Now apply code like this:(I used this on one of my Bangla apps successfully)

        SpannableString mstKnwTitle=new SpannableString(getString(R.string.e_mustknow_tab));
        SpannableString cntctsTitle=new SpannableString(getString(R.string.e_number_tab));


        TypefaceSpan span=new TypefaceSpan(this, "solaimanlipi.ttf");

        mstKnwTitle.setSpan(span, 0, mstKnwTitle.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);     
        cntctsTitle.setSpan(span, 0, mstKnwTitle.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        Tab tab= actionBar.newTab();
        tab.setText(mstKnwTitle);
        tab.setTabListener(tabListener);

        actionBar.addTab(tab);


        tab= actionBar.newTab();
        tab.setText(cntctsTitle);
        tab.setTabListener(tabListener);

        actionBar.addTab(tab);

Original inspiration of my answer was:Styling the Android Action Bar title using a custom typeface

Answer 5

It seems like you are not getting any guidance. I am not sure with my answer's result but yes you can defiantly get idea to make it as you want.

Let me try to help you. I think you have to somewhat play with the in-built default resources of the android sdk.

You have to create custom style:

<style name="MyActionBarTabText" parent="Widget.ActionBar.TabText">
    <item name="android:textAppearance">@style/TextAppearance.Holo.Medium</item>
    <item name="android:textColor">?android:attr/textColorPrimary</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:maxLines">2</item>
</style>

 <style name="Widget.ActionBar.TabText" parent="Widget">
    <item name="android:textAppearance">@style/TextAppearance.Widget.TextView.PopupMenu</item>
    <item name="android:textColor">?android:attr/textColorPrimaryInverse</item>
    <item name="android:textSize">18sp</item>
    <item name="android:fontFamily">HERE YOU CAN GIVE YOUR FONT</item>
</style>

You can also refer this SO.

Now just apply that theme to your activity and you will get Font of the TabText as you want.

Comment me if have any query.

Enjoy coding... :)

In EXTRA

Another solution could be to modify the tab image to include the text, with GIMP or photoshop something, and then just set those images in the tabs, instead of images and text. It is a bit of an awkward way of doing it but it would work.

Hope this helps!