Change font to tabs of a TabLayout

If you want to divide your content into subcategories you should use tabs or tabs in your Android application. The TabLayout is a component that facilitates switching between contents of a section.

There are many other blog post where they talk about how to add this component to your application and how to style. The purpose of this post is to explain that there are possible ways to change the font of text for each tab.

The first and the fastest way is to run the following method to change the text font for all tabs from the children of TabLayout.

private void changeTabsFont() {
  ViewGroup childTabLayout = (ViewGroup) tabLayout.getChildAt(0);
  for (int i = 0; i < childTabLayout.getChildCount(); i++) {
    ViewGroup viewTab = (ViewGroup) childTabLayout.getChildAt(i);
    for (int j = 0; j < viewTab.getChildCount(); j++) {
      View tabTextView = viewTab.getChildAt(j);
      if (tabTextView instanceof TextView) {
        Typeface typeface = Typeface.createFromAsset(getAssets(), "fonts/gotham-ultra.ttf");
        ((TextView) tabTextView).setTypeface(typeface);
        ((TextView) tabTextView).setTextSize(TypedValue.COMPLEX_UNIT_DIP, getResources().getDimension(R.dimen.text_small));
      }
    }
  }
}

With this method we can easily change the font of all tabs of TabLayout component.

Second way is customizing our custom tabs defining our own xml.
We need to define our custom TextView and set the font with the ‘setTypeface’ method.


public class TabTextView extends TextView {

  private final Context context;

  public TabTextView(Context context) {
    super(context);
    this.context = context;

    init();
  }

  public TabTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;

    init();
  }

  public TabTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.context = context;

    init();
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public TabTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    this.context = context;

    init();
  }

  private void init() {
    setTypeface(Typeface.createFromAsset(context.getAssets(),"fonts/gotham-ultra.ttf"));
  }
}

To define the view of each tab we have to create a xml with out custom TextView.


<?xml version="1.0" encoding="utf-8"?>
<com.example.ui.textviews.TabTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab_item" android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="@color/white" android:gravity="center" android:textSize="@dimen/text_14" />

At the end, in our activity we inflate our custom view and add it to the TabLayout as a Tab. The following code shows how to add a custom tab.


TabTextView tabTextView = (TabTextView) inflater.inflate(R.layout.tab_toolbar_item, null);
tabTextView.setText(titleTab);

TabLayout.Tab tab = tabLayout.newTab().setCustomView(tabTextView);
tabLayout.addTab(tab, isFirstSelectedTab);

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s