how to custom font for android.support.design.widget.TabLayout using Calligraphy

Question

I've used Calligraphy to customize my app font... my app contains android.support.design.widget.TabLayout... fonts of my app changed and it works except tabLayout title and the tab titles in TabLayout use the device font instead of the custom font. tabs have text and icon. i have mFragmentTitleList array for titles and tabIcons array... i've tried to use style and theme in the way explained here: calligraphy but none of them worked...

Answer 1

answer is to use custom view...i've applied a custom XML layout for each tab...To achieve this, should iterate over all the TabLayout.Tabs after attaching the sliding tabs to the pager:

// Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    MyFragmentPagerAdapter pagerAdapter = 
        new MyFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
    viewPager.setAdapter(pagerAdapter);

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);

    // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }

next we should add the getTabView(position) method to the MyFragmentPagerAdapter class:

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String tabTitles[] = new String[] { "Tab1", "Tab2","Tab3" };
 private int[] tabIcons = {
        R.drawable.ic_one,
        R.drawable.ic_two,
        R.drawable.ic_three
};

public View getTabView(int position) {
    // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView
    View view= LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
    TextView textView= (TextView) view.findViewById(R.id.textView);
    textView.setText(getPageTitle(position));
    ImageView imageView = (ImageView) view.findViewById(R.id.imgView);
    imageView .setImageResource(tabIcons[position]);
    return view;
}

}

and this is the layout for custom view:

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

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="New Text"
    android:gravity="center"
    android:textColor="@drawable/sel_tab_text"
    android:id="@+id/textView" />