How can I set the titles of my tabs in a TabLayout to have the same font size?

Question

I am using a FragmentPagerAdapter with a ViewPager to create a TabLayout with 4 tabs. Everything is working fine except for the font size.

I have tried different solutions suggested in the following threads, but nothing has worked for me:

Text size of android design TabLayout tabs

How to increase icon size of tabs in TabLayout

android font size of tabs

Change the text size in tab in android

This is how my TabLayout looks like at the moment:

And these are my related classes:

MainActivity.class

private void setupUi() {
    final MainPagerAdapter mainPagerAdapter =
            new MainPagerAdapter(getSupportFragmentManager());
    viewPager.setAdapter(mainPagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}

MainPagerAdapter.class

public class MainPagerAdapter extends FragmentPagerAdapter {

    private static final String UPCOMING_TITLE = "UPCOMING";
    private static final String INTERESTS_TITLE = "INTERESTS";
    private static final String ABOUT_TITLE = "ABOUT";
    private static final String ACCOUNT_TITLE = "ACCOUNT";

    private static final Integer TAB_COUNT = 4;

    public MainPagerAdapter(final FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public Fragment getItem(final int position) {
        switch (position) {
        case 0:
        default:
            return new UpcomingFragment();
        case 1:
            return new InterestsFragment();
        case 2:
            return new AccountFragment();
        case 3:
            return new AboutFragment();
        }
    }

    @Override
    public int getCount() {
        return TAB_COUNT;
    }

    @Override
    public CharSequence getPageTitle(final int position) {
        switch (position) {
            case 0:
                return UPCOMING_TITLE;
            case 1:
                return INTERESTS_TITLE;
            case 2:
                return ACCOUNT_TITLE;
            case 3:
                return ABOUT_TITLE;
            default:
                return null;
        }
    }
}

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</android.support.v7.widget.Toolbar>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
    </style>

    <style name="AppTheme.TabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">0dp</item>
        <item name="tabPaddingTop">0dp</item>
        <item name="tabPaddingBottom">0dp</item>
        <item name="tabPaddingEnd">0dp</item>
        <item name="tabBackground">?attr/selectableItemBackground</item>
        <item name="tabSelectedTextColor">?android:textColorPrimary</item>
        <item name="android:background">@color/colorPrimary</item>
        <item name="tabTextAppearance">@style/TabLayoutTextAppearance</item>
    </style>

    <style name="TabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
        <item name="android:textSize">14sp</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"/>

</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" >

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view_filter"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="right|end"
        android:layout_marginTop="?attr/actionBarSize"
        android:background="@color/md_white_1000" />

</android.support.v4.widget.DrawerLayout>

PLEASE SAVE ME!

Answer 1

Try this in activity_main.xml

<android.support.design.widget.TabLayout
             android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabTextAppearance="@style/TabLayoutTextAppearance"
            app:tabMode="fixed"
            app:tabGravity="fill"/>