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
2 Answers
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 = 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);
}
}