Haroun SMIDA Haroun SMIDA - 3 months ago 124
Android Question

Change selected tab color for Tablayout with custom font

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

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"/>
Comments