Text size of android design TabLayout tabs

Question

I have difficulties changing the text size of the tabs of design library tablayout  android support design widget TabLayout    I managed to change it by assigning tabTextAppearance in TabLayout   app tabTextAppearance   style MyTabLayoutTextAppearance    the following style    lt style name  MyTabLayoutTextAppearance  parent  TextAppearance AppCompat Widget ActionBar Title Inverse  gt       lt item name  android textSize  gt 14sp lt  item gt   lt  style gt    but I have 2 side effects    1  I lost the accent color of the selected tab   2  The tab text is not capitalized any more

User · Answer

I have similar problem and similar resolution:

1) Size

in the xml you have TabLayout,

        <android.support.design.widget.TabLayout
            ...
            app:tabTextAppearance="@style/CustomTextStyle"
            ...
        />

then in style,

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

If you do not want the characters in uppercase put false in "android:textAllCaps"

2) Text color of selected or unselected Tabs,

TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector,null));
    } else {
        tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector));
    }

then in res/color/tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/white" android:state_selected="true" />
<item android:color="@color/white" />

User · Answer

Work on api 22  amp  23 Make this style    lt style name  quot TabLayoutStyle quot  parent  quot Base Widget Design TabLayout quot  gt       lt item name  quot android textSize quot  gt 12sp lt  item gt       lt item name  quot android textAllCaps quot  gt true lt  item gt   lt  style gt   And apply it to your tablayout    lt android support design widget TabLayout     android id  quot   id contentTabs quot      android layout width  quot match parent quot      android layout height  quot wrap content quot      android layout marginTop  quot 10dp quot      android background  quot  drawable list gray border quot      app tabTextAppearance  quot  style TabLayoutStyle quot      app tabSelectedTextColor  quot  color colorPrimaryDark quot      app tabTextColor  quot  color colorGrey quot      app tabMode  quot fixed quot      app tabGravity  quot fill quot   gt

User · Answer

gt      create custom style in styles xml     lt style name  quot customStylename quot   gt  parent  quot Theme AppCompat quot  gt   gt           lt item name  quot android textSize quot  gt 22sp lt  item gt    lt item name  quot android color quot  gt colors primarydark lt  item gt   gt       lt  style gt   gt    gt      link to your material same name       gt   lt android support design widget TabLayout    gt  android layout width  quot match parent quot   gt          android layout height  quot wrap content quot    gt          android id  quot   id tabs quot   gt          app tabTextAppearance  quot  style customStylename quot    gt          gt    this is my solution

User · Answer

Try the snipped which is mentioned below  it works for me also   In my layout xml where I have my TabLayout  have added style to the TabLayout like below     lt android support design widget TabLayout     android id    id tab layout      style   style MyCustomTabLayout      android layout width  match parent      android layout height  wrap content      app tabGravity  fill      app tabMode  fixed    gt    and in my style xml I have defined the style that is used in my layout xml  check code for styles added below     lt style name  MyCustomTabLayout  parent  Widget Design TabLayout  gt       lt item name  android background  gt YOUR BACKGROUND COLOR lt  item gt       lt item name  tabTextAppearance  gt  style MyCustomTabText lt  item gt       lt item name  tabSelectedTextColor  gt SELECTED TAB TEXT COLOR lt  item gt       lt item name  tabIndicatorColor  gt SELECTED TAB INDICATOR COLOR lt  item gt   lt  style gt    lt style name  MyCustomTabText  parent  TextAppearance AppCompat Button  gt       lt item name  android textSize  gt YOUR TEXT SIZE lt  item gt       lt item name  android textStyle  gt bold lt  item gt       lt item name  android textColor  gt  android color white lt  item gt   lt  style gt    I hope it will work for you

User · Answer

Go on using tabTextAppearance as you did but  1  to fix the capital letter side effect add textAllCap in your style     lt style name  MyTabLayoutTextAppearance  parent  TextAppearance AppCompat Widget ActionBar Title Inverse  gt       lt item name  android textSize  gt 14sp lt  item gt       lt item name  android textAllCaps  gt true lt  item gt   lt  style gt    2  to fix the selected tab color side effect add in TabLayout xml the following library attributes    app tabSelectedTextColor   color color1  app tabTextColor   color color2     Hope this helps

User · Answer

lt style name  MineCustomTabText  parent  TextAppearance Design Tab  gt       lt item name  android textSize  gt 16sp lt  item gt   lt  style gt    Use is in TabLayout like this   lt android support design widget TabLayout             app tabTextAppearance   style MineCustomTabText                                gt

User · Answer

XML FILE IN VALUES    lt style name  quot tab quot  gt       lt item name  quot android textSize quot  gt  dimen  10ssp lt  item gt       lt item name  quot android textColor quot  gt  FFFFFF lt  item gt   lt  style gt    TAB LAYOUT  lt com google android material tabs TabLayout     android layout width  quot match parent quot      android layout height  quot  dimen  27sdp quot      android layout marginLeft  quot  dimen  10sdp quot      android layout marginRight  quot  dimen  10sdp quot      app layout constraintEnd toEndOf  quot parent quot      app tabTextAppearance  quot  style tab quot      app tabGravity  quot fill quot      android layout marginTop  quot  dimen  10sdp quot      app layout constraintStart toStartOf  quot parent quot      gt        lt com google android material tabs TabItem         android layout width  quot wrap content quot          android layout height  quot wrap content quot          android text  quot TAB 1 quot          android scrollbarSize  quot  dimen  4sdp quot            gt        lt com google android material tabs TabItem         android layout width  quot wrap content quot          android layout height  quot wrap content quot          android scrollbarSize  quot  dimen  6sdp quot          android text  quot TAB 2 quot    gt        lt com google android material tabs TabItem         android layout width  quot wrap content quot          android layout height  quot wrap content quot          android scrollbarSize  quot  dimen  4sdp quot          android text  quot TAB 3 quot    gt   lt  com google android material tabs TabLayout gt

User · Answer

I was using Android Pie and nothing seemed to worked so I played around with app tabTextAppearance attribute  I know its not the perfect answer but might help someone    lt android support design widget TabLayout         android id    id tabs          android layout width  match parent          android layout height  wrap content          app tabMode  fixed          app tabTextAppearance   style TextAppearance AppCompat Caption    gt

User · Answer

TabLayout  tab layout    TabLayout findViewById R id tab Layout     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  lt  tabsCount  j              ViewGroup vgTab    ViewGroup  vg getChildAt j           int tabChildsCount   vgTab getChildCount            for  int i   0  i  lt  tabChildsCount  i                  View tabViewChild   vgTab getChildAt i               if  tabViewChild instanceof TextView                      TextView  tabViewChild  setTypeface font                     TextView  tabViewChild  setTextSize 15                                      This code is works for me using tablayout  It will change size of fonts and also change font style   This will also help you guys please check this link  https   stackoverflow com a 43156384 5973946  This code works for Tablayout change text color type face  font style  and also text size

User · Answer

Do as following   1  Add the Style to the XML       lt style name  MyTabLayoutTextAppearance  parent  TextAppearance Design Tab  gt           lt item name  android textSize  gt 14sp lt  item gt       lt  style gt    2  Apply Style  Find the Layout containing the TabLayout and add the style  The added line is bold        lt android support design widget TabLayout         android id    id tabs          app tabTextAppearance   style MyTabLayoutTextAppearance           android layout width  match parent          android layout height  wrap content    gt

[android] Text size of android design TabLayout tabs

Examples related to android

Examples related to text-size

Examples related to android-tablayout