CODEWITHSUNDEEP
androidandroid-tablelayout
vinay vyas
vinay vyas

Reputation: 491

Custom font for android.support.design.widget.TabLayout

How can i use custom font for Tablayout class belonging to android.support.design.widget package? I'm using it to implement Quick Return view functionality.

Upvotes: 6

Views: 12908

Answers (4)

aminography
aminography

Reputation: 22832

• Kotlin Version via Extension Function

To set a custom typeface to TabLayout try to add below code snippet as an extension function in a kotlin file (for example I've created a file named Extentions.tk):

fun TabLayout.applyFont(typeface: Typeface) {
    val viewGroup = getChildAt(0) as ViewGroup
    val tabsCount = viewGroup.childCount
    for (j in 0 until tabsCount) {
        val viewGroupChildAt = viewGroup.getChildAt(j) as ViewGroup
        val tabChildCount = viewGroupChildAt.childCount
        for (i in 0 until tabChildCount) {
            val tabViewChild = viewGroupChildAt.getChildAt(i)
            if (tabViewChild is TextView) {
                tabViewChild.typeface = typeface
            }
        }
    }
}

.

• Usage

Now you can use it simply as following:

val typeface = Typeface.createFromAsset(context.assets, "fonts/Roboto.ttf")
tabLayout.applyFont(typeface)

Upvotes: 0

JARP
JARP

Reputation: 1249

With android support library 26.2.0 you specify the font in the style

<style name="TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/TabText</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabIndicatorColor">@color/white</item>

</style>

<style name="TabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/lite</item>
    <!--Here below-->
    <item name="android:fontFamily">@font/gotham_medium</item>
</style>

Upvotes: 9

AlexEizenhart
AlexEizenhart

Reputation: 371

As of 23.2.0, setTabsFromPagerAdapter has been deprecated, however using a modified version of Andreyua's answer you can use setupWithViewPager instead.

    @Override
public void setupWithViewPager(ViewPager viewPager)
{
    super.setupWithViewPager(viewPager);

    if (mTypeface != null)
    {
        this.removeAllTabs();

        ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);

        PagerAdapter adapter = viewPager.getAdapter();

        for (int i = 0, count = adapter.getCount(); i < count; i++)
        {
            Tab tab = this.newTab();
            this.addTab(tab.setText(adapter.getPageTitle(i)));
            AppCompatTextView view = (AppCompatTextView) ((ViewGroup) slidingTabStrip.getChildAt(i)).getChildAt(1);
            view.setTypeface(mTypeface, Typeface.NORMAL);
        }
    }
}

All credit goes to Andreyua for their original code snippet with a minor modification.

Unfortunately, I don't have enough reputation to make comments or I would have responded directly :)

Upvotes: 27

ilw
ilw

Reputation: 2560

Try this CustomTabLayout 

public class CustomTabLayout extends TabLayout {
    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
            Typeface typeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/Roboto-Medium.ttf");

        this.removeAllTabs();

        ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);

        for (int i = 0, count = adapter.getCount(); i < count; i++) {
            Tab tab = this.newTab();
            this.addTab(tab.setText(adapter.getPageTitle(i)));
            AppCompatTextView view = (AppCompatTextView) ((ViewGroup)slidingTabStrip.getChildAt(i)).getChildAt(1);
            view.setTypeface(typeface, Typeface.NORMAL);
        }
    }
}

Upvotes: 18

Related Questions