Set Android Custom Font on Tab Title

Question

I am trying to set a custom font to the titles ("Tab Item 1", "Tab Item 2", "Tab Item 3") from the code below. I am really new to Android Studio and Java and am just learning by doing and kind materials that has been over the internet.

Assuming I have a font named "abc.ttf" already in my assets folder, how do I cahange the font for tab title? Below are my TabFragment.java

import android.graphics.Typeface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.AppCompatTextView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class TabFragment extends Fragment {

    TabLayout mTabLayout;
    ViewPager mViewPager;
    private static final int int_items = 3;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        /**
         *Inflate tab_layout and setup Views.
         */
        View x = inflater.inflate(R.layout.tabbed_layout, null);
        mTabLayout = (TabLayout) x.findViewById(R.id.tabs);
        mViewPager = (ViewPager) x.findViewById(R.id.viewpager);

        /**
         *Set an Apater for the View Pager
         */
        mViewPager.setAdapter(new MyAdapter(getChildFragmentManager()));

        /**
         * Now , this is a workaround ,
         * The setupWithViewPager dose't works without the runnable .
         * Maybe a Support Library Bug .
         */

        mTabLayout.post(new Runnable() {
            @Override
            public void run() {
                mTabLayout.setupWithViewPager(mViewPager);
            }
        });

        return x;

    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        /**
         * Return fragment with respect to Position .
         */

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new TabOneFragment();
                case 1:
                    return new TabTwoFragment();
                case 2:
                    return new TabThreeFragment();
            }
            return null;
        }

        @Override
        public int getCount() {

            return int_items;

        }

        /**
         * This method returns the title of the tab according to the position.
         */



        @Override
        public CharSequence getPageTitle(int position) {

            switch (position) {
                case 0:

                    return "Tab Item 1";
                case 1:
                    return "Tab Item 2";
                case 2:
                    return "Tab Item 3";
            }
            return null;
        }
    }

}

and here is my tabbed_layout.xml

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


<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="@color/white"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/black"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.v4.view.ViewPager>


</LinearLayout>

Answer 1

Shorter answer: You don't need to create a custom TabLayout class, simply provide a theme to your TabLayout in the xml like below:

xml file

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="@color/white"
app:tabIndicatorColor="@color/colorPrimary"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabTextColor="@color/black"
android:layout_width="match_parent"
android:theme="@style/AppTheme.YourThemeName" <!-- This is the change -->
android:layout_height="wrap_content" />

styles.xml file

<style name="AppTheme.YourThemeName" parent="ThemeOverlay.AppCompat.Light">
    <item name="fontFamily">@font/your_font</item>
</style>

Answer 2

Create a CustomTabLayout class which will drive from Tablayout Then use this CustomTablayout in xml instead of Tablayout

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomTabLayout extends TabLayout {
    private Typeface mTypeface;

    public CustomTabLayout(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        mTypeface = Typeface.createFromAsset(getContext().getAssets(), "your fonts"); // here you will provide fully qualified path for fonts
    }

    @Override
    public void addTab(Tab tab) {
        super.addTab(tab);

        ViewGroup mainView = (ViewGroup) getChildAt(0);
        ViewGroup tabView = (ViewGroup) mainView.getChildAt(tab.getPosition());

        int tabChildCount = tabView.getChildCount();
        for (int i = 0; i < tabChildCount; i++) {
            View tabViewChild = tabView.getChildAt(i);
            if (tabViewChild instanceof TextView) {
                ((TextView) tabViewChild).setTypeface(mTypeface, Typeface.NORMAL);
            }
        }
    }

}

That's what you'd have to do in the xml.

<yourpackagename.CustomTabLayout
    android:id="@+id/tabs"
    app:tabGravity="fill"
    app:tabMode="fixed"
    android:background="@color/white"
    app:tabIndicatorColor="@color/colorPrimary"
    app:tabSelectedTextColor="@color/colorPrimary"
    app:tabTextColor="@color/black"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

EDIT

This custom class

package com.ifavaz.kulli;

/**
 * Created by ifawaz on 12/11/16.
 */

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CustomTabLayout extends TabLayout {
    private Typeface mTypeface;

    public CustomTabLayout(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        mTypeface = Typeface.createFromAsset(getContext().getAssets(), "fonts/AmazingDayEveryday.ttf"); // here you will provide fully qualified path for fonts
    }

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

}

Here is working screenshot

I hope this will help you