Change the text size in tab in android

Question

I've been facing the issue of text size in tab bar. Below is the image,

enter image description here

And here is my code,

MainActivity.java

public class MainActivity extends Activity implements OnTabChangeListener, OnPageChangeListener{  
    private TabHost tabHost;  
    private ViewPager pager; 

 @Override  
 public void onCreate(Bundle savedInstanceState) {  
   super.onCreate(savedInstanceState);  
   setContentView(R.layout.activity_main);  
   tabHost = (TabHost)findViewById(android.R.id.tabhost);  
   pager = (ViewPager) findViewById(R.id.pager);  

   tabHost.setup();  
   TabWidget tabwidget=tabHost.getTabWidget();

   TabSpec spec = tabHost.newTabSpec("tab1");  
   spec.setContent(R.id.tab1);  
   spec.setIndicator("Check In");  
   tabHost.addTab(spec);  

   spec = tabHost.newTabSpec("tab2");  
   spec.setContent(R.id.tab2);  
   spec.setIndicator("Buddies");  
   tabHost.addTab(spec);  

   spec = tabHost.newTabSpec("tab3");  
   spec.setContent(R.id.tab3);  
   spec.setIndicator("Recommendation");  
   tabHost.addTab(spec); 

   spec = tabHost.newTabSpec("tab4");  
   spec.setContent(R.id.tab4);  
   spec.setIndicator("Feed");  
   tabHost.addTab(spec); 

   spec = tabHost.newTabSpec("tab5");  
   spec.setContent(R.id.tab5);  
   spec.setIndicator("Last");  
   tabHost.addTab(spec);

   pager.setAdapter(new MyPagerAdapter(this));  
   pager.setOnPageChangeListener(this);  
   tabHost.setOnTabChangedListener(this);  

 }  
    @Override  
    public void onTabChanged(String tabId){  
         int pageNumber = 0;  
         if(tabId.equals("tab1"))
         {  
              pageNumber = 0;  

         }

         else if(tabId.equals("tab2"))
         {  
              pageNumber = 1;

         }

         else if(tabId.equals("tab3"))
         {  
              pageNumber = 2;  

         }

         else if(tabId.equals("tab4"))
         {  
              pageNumber = 3;  


         }

         else if(tabId.equals("tab5"))
         {  
              pageNumber = 4;  

         }
         else
         {  
              pageNumber = 0;  

         }  

         pager.setCurrentItem(pageNumber);  
    } 

    @Override  
    public void onPageSelected(int pageNumber) {  
         tabHost.setCurrentTab(pageNumber); 

    }
    @Override
    public void onPageScrollStateChanged(int arg0) {


    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {


    }
    }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <FrameLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />

            <FrameLayout
                android:id="@+id/tab5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:visibility="gone" />
        </FrameLayout>

        <android.support.v4.view.ViewPager
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</TabHost>

I want whole text to be set in each tab, how can I do that?

I've been trying this code to change the text size and getting this result,

code

 TextView x = (TextView) tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.title);
   x.setTextSize(10);
   tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 100;

   TextView x1 = (TextView) tabHost.getTabWidget().getChildAt(1).findViewById(android.R.id.title);
   x1.setTextSize(10);
   tabHost.getTabWidget().getChildAt(1).getLayoutParams().width = 90;

   TextView x2 = (TextView) tabHost.getTabWidget().getChildAt(2).findViewById(android.R.id.title);
   x2.setTextSize(10);
   tabHost.getTabWidget().getChildAt(2).getLayoutParams().width = 100;

   TextView x3 = (TextView) tabHost.getTabWidget().getChildAt(3).findViewById(android.R.id.title);
   x3.setTextSize(10);
   tabHost.getTabWidget().getChildAt(3).getLayoutParams().width = 40;

   TextView x4 = (TextView) tabHost.getTabWidget().getChildAt(4).findViewById(android.R.id.title);
   x4.setTextSize(10);
   tabHost.getTabWidget().getChildAt(4).getLayoutParams().width = 40;

Image of result

enter image description here

But I want the output as this image

enter image description here

As per above image, my tab widget should be movable, how can I do this?

did you try shouldExpand from the library? https://github.com/LordZoltan/PagerSlidingTabStrip.Net/wiki/Using-and-customising-PagerSlidingTabStrip.Net — Radu, Apr 09 '14 at 16:06

score 4 · Answer 1 · edited May 23 '17 at 11:46

4

TextView x = (TextView) tabHost.getTabWidget().getChildAt(0).findViewById(android.R.id.title);
    x.setTextSize(25);

refer the below link for more detail

Change text size on tabHost

How to change the font size of tabhost in android

edited May 23 '17 at 11:46

Community

1
1

answered Oct 18 '13 at 05:23

Dinesh Raj

664
12
30

how can we change the width of each tab? – thumber nirmal Oct 18 '13 at 05:24
2

tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 50; – Dinesh Raj Oct 18 '13 at 05:25
BlueG... Check my edited question, I want outout as I described. – thumber nirmal Oct 18 '13 at 05:51

score 4 · Answer 2 · answered Dec 23 '15 at 20:08

You can use the TabLayout and Viewpager instead, and set the tabMode to scrollable, see code below:

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="scrollable" />

score 2 · Answer 3 · answered Mar 27 '17 at 05:48

2

 app:tabMode="scrollable"
 app:tabGravity="fill"

Use this line in your tab xml and it will do it.

answered Mar 27 '17 at 05:48

ravalrocks

21
3

score 0 · Answer 4 · answered Oct 18 '13 at 05:26

0

You can also customize the text and background of a your tabs. See this blog for a very good tutorial on how to do it.

answered Oct 18 '13 at 05:26

Jitender Dev

6,907
2
24
35

score 0 · Answer 5 · answered Oct 18 '13 at 05:38

Easy wasy to do Just add style to ur xml file declare the size in which you want.

<style name="CustomTheme" parent="@android:style/Theme">
    <item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
    <item name="android:textAppearance">@style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText" 
    parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textSize">100sp</item>
    <item name="android:textStyle">**strong text**</item>
</style>

Dont forget to add theme with style name in manifast file.

score 0 · Answer 6 · answered Dec 02 '16 at 11:43

0

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

Use app:tabMode="scrollable"

answered Dec 02 '16 at 11:43

Rahul

1
1

score 0 · Answer 7 · answered Feb 21 '17 at 21:02

Just put the TabLayout inside a HorizontalScrollView:

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

Raihan Mahamud · Answer 8 · 2021-11-14T06:57:26.220

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

<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>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="@dimen/welcome_menu_icon_height_10"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="@dimen/margin_15"
    android:background="@android:color/transparent"
    android:nestedScrollingEnabled="true"
    android:scrollbarThumbVertical="@color/white"
    android:textAlignment="center"
    app:tabGravity="center"
    app:tabIndicatorAnimationDuration="1"
    app:tabIndicatorColor="@color/white"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/white"
    app:tabTextAppearance="@style/MyTabTextAppearance"
    app:tabTextColor="@color/white" />

 tabLayout.addTab(tabLayout.newTab().setText(R.string.casa))
    tabLayout.addTab(tabLayout.newTab().setText(R.string.fdr_dps))
    tabLayout.addTab(tabLayout.newTab().setText(R.string.loan))

You Just try it i hope it works

score -1 · Answer 9 · edited Apr 02 '17 at 06:16

<TabHost
     android:id="@+id/tabhost"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentTop="true"
     android:layout_alignParentLeft="true">

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical" >

         <TabWidget
             android:id="@android:id/tabs"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             >

         </TabWidget>


         <FrameLayout
             android:id="@android:id/tabcontent"
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:layout_weight="0" />

         <android.support.v4.view.ViewPager
             android:id="@+id/viewpager"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             />
     </LinearLayout>
 </TabHost>

Code:

for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
{
    TextView tv = (TextView) tabhost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
    tv.setTextColor(Color.parseColor(SM.getTheme_colour()));
    tv.setTypeface(font_k);
}

This code works for tabhost change text color, type face (font style) and also text size.

Change the text size in tab in android

MainActivity.java

activity_main.xml

code

Image of result

9 Answers9

Linked