Change the font of tab text in android design support TabLayout
Create a TextView from Java Code or XML like this
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@android:id/text1"
android:layout_width="match_parent"
android:textSize="15sp"
android:textColor="@color/tabs_default_color"
android:gravity="center"
android:layout_height="match_parent"
/>
Make sure to keep the id as it is here because the TabLayout check for this ID if you use custom textview
Then from code inflate this layout and set the custom Typeface on that textview and add this custom view to the tab
for (int i = 0; i < tabLayout.getTabCount(); i++) {
//noinspection ConstantConditions
TextView tv = (TextView)LayoutInflater.from(this).inflate(R.layout.custom_tab,null)
tv.setTypeface(Typeface);
tabLayout.getTabAt(i).setCustomView(tv);
}
Change tab font size when selected/unselected in TabLayout Android
To change the Tab font size based the selected/unselected state you have to use your custom tab view and use TabLayout.OnTabSelectedListener to change the size of selected/unselected tab.
1.TabLayout in xml can be like below:
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_light">
<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>
2.Initialise for each tab a CustomView using setCustomView method and use TabLayout.OnTabSelectedListener to listen which tab is currently selected and which one is now unselected and change the text size like below:
//get each tab from tabLayout
TabLayout.Tab tab0 = tabLayout.getTabAt(0);
TabLayout.Tab tab1 = tabLayout.getTabAt(1);
TabLayout.Tab tab2 = tabLayout.getTabAt(2);
//and set for each one a custom View
tab0.setCustomView(createCustomTabView("Tab 0", 30, android.R.color.holo_green_light)); //initially this tab is selected
tab1.setCustomView(createCustomTabView("Tab 1", 15, android.R.color.black));
tab2.setCustomView(createCustomTabView("Tab 2", 15, android.R.color.black));
//add OnTabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
@Override
public void onTabSelected(TabLayout.Tab tab) {
setTabTextSize(tab, 30, android.R.color.holo_green_light);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
setTabTextSize(tab, 15, android.R.color.black);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
with the below helper functions to create the Tab CustomView and to change the text size based the selected/unselected state:
private View createCustomTabView(String tabText, int tabSizeSp, int textColor){
View tabCustomView = getLayoutInflater().inflate(R.layout.tab_customview, null);
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setText(tabText);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
return tabCustomView;
}
private void setTabTextSize(TabLayout.Tab tab, int tabSizeSp, int textColor){
View tabCustomView = tab.getCustomView();
TextView tabTextView = tabCustomView.findViewById(R.id.tabTV);
tabTextView.setTextSize(tabSizeSp);
tabTextView.setTextColor(ContextCompat.getColor(tabCustomView.getContext(), textColor));
}
3.And the custom Tab layout R.layout.tab_customview can be like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="@+id/tabTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:textSize="15sp"
android:textAlignment="center"
android:textColor="@android:color/black"
android:maxLines="1"
tools:text="Tab"/>
</RelativeLayout>
Result:
Change font in Tablayout view
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.
How to change font size in Material Design TabLayout android?
Well, I was able to find a solution to my issue.
Adding the below line of code in dimens.xml somehow made it work for me.
<dimen name="design_tab_text_size_2line" tools:override="true">20sp</dimen>
How can I change the font on my tab view?
Add this in style.xml
<style name="CustomViewAllTab" parent="@android:style/TextAppearance.Widget.TabWidget">
<item name="android:textSize">20sp</item>
<item name="android:fontFamily">@string/fontHelveticaMed</item>
</style>
For your custom font
<item name="android:fontFamily">fontname</item>
Apply the style on TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/tabOrderType"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorViewAllTab"
app:tabBackground="@color/colorViewAllTab"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/colorSelectedText"
app:tabTextAppearance="@style/CustomViewAllTab"
app:tabTextColor="@color/colorUnselectedTabColor" />
This property is used for changing text style in TabLayout
app:tabTextAppearance="@style/CustomViewAllTab"
Change selected tab color for Tablayout with custom font
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"/>
Related Topics
Getintent() Extras Always Null
How to Handle Ontouch Event for Map in Google Map API V2
Android: Disable Soft Keyboard at All Edittexts
How to Display a Route Between Two Geocoords in Google Maps
How to Set Shadow to a View in Android
How to Get the Position Selected in a Recyclerview
Android Slidingdrawer from Top
Android:Fill Spinner from Java Code Programmatically
Android: Webview Inside Dialog or Popup
Android: How to Use Webcam in Emulator
Load an Image from Assets Folder
Using Listview:How to Add a Header View
How to Run Countdowntimer in a Service in Android
Rotating Phone Quickly 180 Degrees, Camera Preview Turns Upside Down