Android – Change font style in Action Bar Tabs using Sherlock

actionbarsherlockandroidtabs

I've read this:

Android – customizing actionbar sherlock tabs

And many more links, I've figured out what is StackedBackground and what is Background, but I can't find how to remove All Caps from Tabs and get regular fonts, or change font size in action bar tabs.

Beside that, I'd love to change color of my blue underline, and If I use 9 patch graphics, I get similar situation as on the link above, I get my line below text, but not below on the tab bottom, and the original blue line remains so I get two lines.

So far I have this but I've tried text sizes and all sort of colors, but nothing:

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

<style name="MyActionBar" parent="@android:style/Widget.Holo.ActionBar">
    <item name="android:background">@drawable/grey</item>
    <item name="android:backgroundStacked">@drawable/ab_transparent_example</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">10dp</item>
</style>

Edit:
I just figured out that I can remove all caps using "android:actionBarTabTextStyle", but it now takes background color from "MyActionBar" … So How to set actionBarTabTextStyle and actionBarStyle lists in some hierarchy, that text is downsized and not in Caps, but that it does not background from "MyActionBar" style.

Edit 2:
I've tried some more 9patch images, and it looks ugly but I just can't get rid off the blue lines…

UglyBluelines

Best Answer

I know this was asked ages ago but I've spent a while trying to sort this out so this is for anybody who has found this question and still wants to know the answer.

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);
}

Hope this helps anybody who was having trouble like me.

//update 1/6/2015

if you are using TabLayout in android M preview and you want to change the font you have to add a new for loop to the previous solution like this:

 private void changeTabsFont() {

        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(Font.getInstance().getTypeFace(), Typeface.NORMAL);
                }
            }
        }
    }