Change selected tab color for Tablayout with custom font

Question

I am using Calligraphy library to apply custom font. I have a problem with TabLayout where the font does not apply. So I have to set it manually with the follow code :

        mViewPager.setAdapter(pagerAdapter);
        tabLayout.setupWithViewPager(mViewPager);
        for (int i = 0; i < pagerAdapter.getCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(R.layout.tab_text);
                tab.setText(pagerAdapter.getPageTitle(i));
            }
        }

The XML file to the custom tab view

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center"
        android:textSize="@dimen/item_txt_size"
        android:textColor="@color/progress_color"
        android:maxLines="2"
        app:fontPath="fonts/font_regular.ttf"
        tools:ignore="MissingPrefix"
        tools:text="User Profile" />
</FrameLayout>

The XML of the view :

    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_below="@id/map_google"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorColor="@color/progress_color"
    app:tabIndicatorHeight="@dimen/indicator_height"
    android:background="@color/actionbar_home"
    app:tabMode="fixed"
    app:tabTextColor="@android:color/white"
    app:tabSelectedTextColor="@color/progress_color"
    app:tabGravity="fill"/>

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_below="@id/tabs"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

The problem is the selected color and the unselected do not apply, it's always the same color.

Answer 1

Use the below method to change Tabs font:

 protected void changeTabsFont(TabLayout tabLayout) {
        Logger.print("In change tab font");
        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        Logger.print("Tab count--->"+tabsCount);
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof AppCompatTextView) {
                    Logger.print("In font");
                    Typeface type = Typeface.createFromAsset(getContext().getAssets(),"Helvetica_57_Condensed.otf");
                    TextView viewChild = (TextView) tabViewChild;
                    viewChild.setTypeface(type);
                    viewChild.setAllCaps(false);
                }
            }
        }
    }

To change tab text color use define the following style in styles.xml

 <style name="tab_layout">
        <item name="android:background">@color/background_blue</item>
        <item name="tabTextColor">@color/tab_unselected</item>
        <item name="tabSelectedTextColor">@color/white</item>
        <item name="android:actionBarDivider">@color/background_blue</item>
        <item name="tabTextAppearance">?android:textAppearanceMedium</item>
        <item name="tabIndicatorHeight">4dp</item>
    </style>

and set this style to your tab layout:

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

Answer 2

tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
           @Override
           public void onTabSelected(TabLayout.Tab tab) {
            if (tab != null && tab.getCustomView() != null)
                    // set unselected color
           }
           @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab != null && tab.getCustomView() != null)
                    // set unselected color
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                onTabSelected(tab);
            }
        });