Changing the font on ActionBar tabs

Question

I'm trying to figure out how to change the font on actionbar tabs to some custom font, and for the life of me I can't figure it out. IT doesn't seem like there is any way to access the underlying TextView of a Tab object.

The other solution of course, is to define my own custom ActionBar tab layout, and set it as a custom view on the ActionBar.Tab object, but this seems quite tricky to get working also.

If I were to use the following XML layout file as my custom tab layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text_tab"
        style="@style/Widget.Sherlock.ActionBar.TabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"/>

</LinearLayout>

The actionbar tab seems to be ignoring all of my gravity requests, and positioning the text at the top of the tab view -- which is quite different to a standard actionbar tab which has the text centered vertically by default.

If anyone could suggest either a) an easier way of supplying a custom Typeface for an actionbar tab or b) the correct layout for a custom tab view I would be very grateful.

Thanks.

Try this...http://stackoverflow.com/questions/12665186/change-font-style-in-action-bar-tabs-using-sherlock — Aaron McIver, Mar 29 '13 at 23:28
It still leaves the ActionBar.Tab text top-aligned, which is not what I want. The standard actionbar tab text is centered vertically. — stork, Mar 29 '13 at 23:36

score 3 · Answer 1 · answered Nov 26 '13 at 00:06

I don't think it's possible unfortunately. Here's why: Like you, I tried using aTextViewcentered in aRelativeLayoutas a custom view for my tabs usingActionBar.Tab.setCustomView()method. I usedandroid:layout_width="fill_parent"andandroid:layout_height="fill_parent"on theRelativeLayoutso normally theTextViewshould be centered in it. So then I tried with only aTextViewnot wrapped in aRelativeLayoutlike so:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_title"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:text="TAB_TITLE" />

So normally theTextViewshould completely fill the Tab and the text should be centered inside it. However that's still not the case: the text is still not centered vertically. So I decided to addandroid:background="#ffffff" to theTextViewso I can see what's happening. Thanks to the background, I realized that theActionBar.Tab.setCustomView()method does not set a custom layout for the tab, but rather sets a custom view inside another layout to which we do not have access (AFAIK). It makes sense thatandroid:layout_width="fill_parent"andandroid:layout_height="fill_parent"are ignored in myTextViewsince I usenullas the parent when inflating the tab layout. So to center the text in theTextViewI programmatically set the height of theTextViewto a very high value so it fills its parent. Then the text is centered vertically. Note that you could also use top padding to create the same effect. Here's my code:

custom_tab.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_title"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:text="TAB_TITLE" />

Code in my activity to set the custom view:

for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
    Tab tab = actionBar.newTab();
    TextView customTabView = (TextView)getLayoutInflater().inflate(R.layout.custom_tab, null);
    customTabView.setText(mSectionsPagerAdapter.getPageTitle(i));
    // set the height to a really high value to fill the parent
    customTabView.setHeight(999);
    tab.setCustomView(customTabView);
    tab.setTabListener(this);
    actionBar.addTab(tab);
}

If anyone knows how to access the parent view of the set custom view, let me know. Hope this helps.

score 0 · Answer 2 · answered Mar 30 '13 at 00:18

0

Use a relative layout. The linear layout dont let to use android:layout_gravity="center_vertical".... It only lets using center horizontal..

If you use relative layout, you could use

android:layout_centerInParent="true"

answered Mar 30 '13 at 00:18

BamsBamx

4,139
4
38
63

Unfortunately this doesn't work either, I tried setting the `RelativeLayout` to `match_parent` and setting `layout_centerInParent` to true, but it didn't have any effect. – stork Mar 30 '13 at 17:46

score 0 · Answer 3 · answered Jul 27 '13 at 01:35

0

I think you should set your layout_width and layout_height to "fill_parent" not to wrap_content such:

android:layout_width="fill_parent"
android:layout_height="fill_parent"

so that your text can be centered.

answered Jul 27 '13 at 01:35

deeplop

83
1
5

farhad.kargaran · Answer 4 · 2014-12-25T09:09:51.110

First look at this example: [http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/][1]

then create a layout and name it tab_title with the following code:

<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 simply in onCreate() method of MainActivity of Androidhive project, just change:

 // Adding Tabs
    for (String tab_name : tabs) {
        actionBar.addTab(actionBar.newTab().setText(tab_name)
                .setTabListener(this));
    }

To:

// Adding Tabs
    for (String tab_name : tabs) {

        Tab tab = actionBar.newTab();
        TextView customTabView = (TextView)getLayoutInflater().inflate(R.layout.tab_title, null);
        customTabView.setText(tab_name);
        Typeface typface2=Typeface.createFromAsset(getAssets(),"fonts/titr.TTF");
        customTabView.setTypeface(typface2);            
        tab.setTabListener(this);           
        tab.setCustomView(customTabView);
        actionBar.addTab(tab);
    }

(No need to say that you have to change fonts/titr.TTF to your asset directory and filename) Joint it!!

Changing the font on ActionBar tabs

4 Answers4