2

I want to change font family on my tabs, depends on which tab is selected. I want set fon bold for selected tabs and light font for unselected I have this fonts in my package /font

enter image description here

2 Answers 2

4

You can change the font family for selected/unselected tab only programmatically. You can listen which Tab is selected and unselected with TabLayout.OnTabSelectedListener and on onTabSelected(TabLayout.Tab tab) callback you can change the Typeface for the selected Tab and on onTabUnselected(TabLayout.Tab tab) callback you can change the Typeface for the unselected Tab (the Previous Selected Tab).

This can be achieve in code like below:

tabLayout = findViewById(R.id.tabLayout);

//initial selected Tab
TabLayout.Tab selectedTab = tabLayout.getTabAt(0);
setTabTypeface(selectedTab, ResourcesCompat.getFont(this, R.font.roboto_mono));

//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
   @Override
   public void onTabSelected(TabLayout.Tab tab) {
      setTabTypeface(tab, ResourcesCompat.getFont(tab.view.getContext(), R.font.roboto_mono));
   }

   @Override
   public void onTabUnselected(TabLayout.Tab tab) {
      setTabTypeface(tab, ResourcesCompat.getFont(tab.view.getContext(), R.font.extra_light_italic));
  }

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

with the helper function setTabTypeface(TabLayout.Tab tab, Typeface typeface) to change the typeface for the Tab like below:

private void setTabTypeface(TabLayout.Tab tab, Typeface typeface){

        for(int i=0; i<tab.view.getChildCount(); i++)
        {
            View tabViewChild = tab.view.getChildAt(i);
            if (tabViewChild instanceof TextView)
                ((TextView) tabViewChild).setTypeface(typeface);
        }
    }

Of Course you have to set for all Tabs the initial/default state (the unselected font family) which can be set in xml using the app:tabTextAppearance attribute of TabLayout like in the below example:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:tabTextAppearance="@style/MyCustomTextAppearance"
        app:tabGravity="fill"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabSelectedTextColor="@android:color/holo_red_dark"
        app:tabTextColor="@android:color/holo_blue_dark" >

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 3" />

    </com.google.android.material.tabs.TabLayout>

where @style/MyCustomTextAppearance is your custom initial TextAppearance Style for all Tabs like below:

<style name="MyCustomTextAppearance" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textSize">16sp</item>
    <item name="android:textAllCaps">true</item>
    <item name="fontFamily">@font/extra_light_italic</item>
    <item name="android:fontFamily">@font/extra_light_italic</item>
</style>

To change also the Text Color for the selected/unselected Tab you can use the xml attributes app:tabSelectedTextColor and app:tabTextColor of your TabLayout.

Result of the above example will be like below. I have set Roboto Mono typeface for the selected Tab and an Extra Light Italic typeface for the unselected tab retrieved from Font folder. tablayout

0
0
tabLayout = findViewById(R.id.tabLayout);
//to update color
tabLayout.setSelectedTabIndicatorColor(Color.RED);
tabLayout.setTabTextColors(Color.RED,Color.GREEN);
            
        //once you set the view pager to tablayout then add below loop
        tabLayout.setupWithViewPager(viewPager);       
        
            for (int a = 0; a < tabLayout.getTabCount(); a++){
                     TabLayout.Tab selectedTab = tabLayout.getTabAt(a);
                     setTabTypeface(selectedTab, ResourcesCompat.getFont(this, R.font.roboto_bold));           
                }
       //add this Function to your class     
                private void setTabTypeface(TabLayout.Tab tab, Typeface typeface){    
                        for(int i=0; i<tab.view.getChildCount(); i++){
                            View tabViewChild = tab.view.getChildAt(i);
                            if (tabViewChild instanceof TextView)
                                ((TextView) tabViewChild).setTypeface(typeface);
                        }
                    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.