android font size of tabs

Question

i ask this quest for a few time ago , but i get no solutions :( my problem is, that i have an android app with a tab activity, where i have to set the font size of my tabs, but i don't know how.

in my activity i set my tabs programmatically:

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.addTab(tabLayout.newTab().setText("MY TAB 1"));
    tabLayout.addTab(tabLayout.newTab().setText("MY TAB 2"));
    tabLayout.addTab(tabLayout.newTab().setText("MY TAB 3"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

Problem is, that the last 1 - 2 letters will be cut, so i have to set the font size smaller, but how?

i hope anyone can help me.

Nigam Patro · Accepted Answer · 2017-01-17T04:49:44.837

37

Write these below codes in styles.xml

<style name="MyTabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyTabTextAppearance</item>
</style>

<style name="MyTabTextAppearance" parent="TextAppearance.AppCompat.Button">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="textAllCaps">true</item>
</style>

And in your tablayout, set the style like below.

<android.support.design.widget.TabLayout
     style="@style/MyTabLayout"
     android:layout_width="width"
     android:layout_height="height"/>

edited Jan 17 '17 at 04:49

answered Dec 09 '15 at 07:54

Nigam Patro

2,760
1
18
33

You should not use `dp` in fonts. Use `sp` – Neon Warge Jan 13 '17 at 07:01
1

If this solution doesn't work for you & your tab text is multiline; Check out my answer here for solution : https://stackoverflow.com/a/48797329/700693 – Evren Ozturk Feb 14 '18 at 22:41

score 2 · Answer 2 · answered Nov 07 '17 at 09:59

try this

Create an xml layout named custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/tab"
android:textColor="@color/colorAccent"/>

than in your activity set text size programaticlly like below code

TextView tabOne = (TextView) 
LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("ONE");
tabOne.setTextSize(14); // set font size as per your requirement 
tabLayout.getTabAt(0).setCustomView(tabOne);

score 2 · Answer 3 · answered Feb 22 '19 at 06:57

If you want to change the font size programmatically, you can use java reflection to access the integer field tabTextSize in the TabLayout class and set the font size as per your requirement.

public static void updateTabLayoutFontSize(TabLayout tabLayout, int textSizeInPixel) {
  try {
     Field mCursorDrawableRes = TabLayout.class.getDeclaredField("tabTextSize");
     mCursorDrawableRes.setAccessible(true);
     mCursorDrawableRes.set(tabLayout, textSizeInPixel);
  } catch (Exception e) {
    Log.d("TAG1", "Failed to update tablayout font using reflection");
  }
}

score 2 · Answer 4 · answered May 10 '19 at 14:04

if you set text_size directly in style of tab layout, it doesn't work!! you have to set it into a style which has parent="@android:style/TextAppearance.Widget.TabWidget"

<style name="tab_text" parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:fontFamily">@fonts/iransans_b</item>
    <item name="android:textSize">@dimen/textSize_Large</item>
    <item name="textAllCaps">false</item>
</style>

<style name="Tab" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/tab_text</item>
</style>


 <com.google.android.material.tabs.TabLayout
                 android:id="@+id/item_tabs"
                 android:layout_width="match_parent"
                 android:layout_height="@dimen/margin_dp_65"
                 style="@style/Tab"/>

and also this is a full style for tab:

 <style name="Tab_WithBackground" parent="Widget.Design.TabLayout">
    <item name="tabSelectedTextColor">@color/purple</item>
    <item name="tabTextColor">@drawable/tab_text_color</item>
    <item name="tabIndicatorColor">@color/white</item>
    <item name="tabGravity">fill</item>
    <item name="tabIndicatorHeight">4dp</item>
    <item name="android:tabStripEnabled">true</item>
    <item name="android:padding">0dp</item>
    <item name="tabMaxWidth">0dp</item>
    <item name="android:minHeight">@dimen/margin_dp_80</item>
    <item name="tabTextAppearance">@style/tab_text</item>
</style>

score 0 · Answer 5 · answered Apr 01 '17 at 11:40

#If you dont want to use style.xml and do by prgramatically the Use this in your xml layout. #
<android.support.design.widget.TabLayout
                android:id="@+id/tab_Layout_dashboard"
                android:layout_below="@id/ll_profile"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.15"
                style="@style/Base.Widget.Design.TabLayout"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                />

            <android.support.v4.view.ViewPager
                android:layout_below="@id/tab_Layout_dashboard"
                android:id="@+id/pager_tutor"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="0.85"
                />


#In your activity or fragment use this method#

 private void changeTabsFont() {
        Typeface font = Typeface.createFromAsset(getActivity().getAssets(), "fonts/"+ Constants.FontStyle);
        ViewGroup vg = (ViewGroup) tab_layout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        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 TextView) {
                    ((TextView) tabViewChild).setTypeface(font);
                    ((TextView) tabViewChild).setTextSize(15);

                }
            }
        }
    }

This code works for Tablayout change text color,type face(Font style) and also Text size. IF this works for you also then make correct so other user can easily solve his/her problem

score 0 · Answer 6 · answered Jun 09 '18 at 09:45

also try:

<style name="MyCustomTabText" parent="TextAppearance.Design.Tab">
   <item name="android:textSize">14sp</item>
    <item name="android:textColor">?android:textColorSecondary</item>
    <item name="textAllCaps">false</item>
</style>

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabTextAppearance="@style/MyCustomTabText" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

score 0 · Answer 7 · answered May 14 '19 at 05:53

I've done the following:

Create a attrs.xml entry like this

<resources>
  <declare-styleable name="SegmentedTabLayout">
    <attr name="fontSize" format="dimension" />
  </declare-styleable>
</resources>

Then create a font size property and initialise method that you'll call in the constructor like this

public float FontSize { get; set; }

private void InitializeAttrs(Context context, IAttributeSet attrs)
{
    if (context == null || attrs == null)
            return;

    var styleAttributes = context.ObtainStyledAttributes(attrs, Resource.Styleable.SegmentedTabLayout);

    if (styleAttributes == null)
        return;

    FontSize = styleAttributes.GetDimension(Resource.Styleable.SegmentedTabLayout_fontSize, -1);

    styleAttributes.Recycle();
}

Then I used the method of viral 9966 (improved it a little) and called it in the override NewTab method like this

public override Tab NewTab()
{
    var tab = base.NewTab();

    ChangeFontSize(tab);

    return tab;
}

private void ChangeFontSize(Tab tab)
{
    if (FontSize < 0)
        return;

    var tabViewGroup = (ViewGroup)tab.View;
    for (int i = 0; i < tabViewGroup.ChildCount; i++)
    {
        if (tabViewGroup.GetChildAt(i) is TextView textView)
        {
            textView.TextSize = FontSize;
        }
    }
}

And that's it :)

score 0 · Answer 8 · answered Dec 05 '22 at 06:10

100% Working Code

fun TabLayout.customizeTabDesign() {
    val viewGroup = this.getChildAt(0) as ViewGroup
    for (i: Int in 0..viewGroup.childCount) {
        val tabViewGroup = viewGroup.getChildAt(i) as ViewGroup?
        tabViewGroup?.let {
            for (j: Int in 0..tabViewGroup.childCount) {
                val tab = tabViewGroup.getChildAt(j)
                if (tab is TextView) {
                    tab.typeface = Typeface.createFromAsset(context.assets, "font.ttf")
                    tab.setTextSize(TypedValue.COMPLEX_UNIT_SP, 21f)
                }
            }
        }
    }
}

android font size of tabs

8 Answers8

This code works for Tablayout change text color,type face(Font style) and also Text size. IF this works for you also then make correct so other user can easily solve his/her problem

100% Working Code

Linked