Search code examples
androidkotlinandroid-tablayout

Change size of Tabs in Android TabLayout In Kotlin


I am new to Android and Kotlin. I am trying to develop an app that contains a TabLayout with 2 tabs. The titles are rather large, and no matter what I do, I cannot get things to look right. The app displays in horizontal mode only and so there is plenty of space in the top bar for the titles, but the tab titles appear to be fixed. As a result of this, the text size is too small. I have tried to change the text size, change the Styles, and even tried to increase the size of the Tab Layout, but nothing helps. Nothing seems to change the text size in the tab itself. Can someone please help me with some code to make this change?
Thank you in advance for your help! Styles:

<style name="MyTabLayout" parent="Base.Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyTabTextAppearance</item>
    <item name="android:textSize">36sp</item>
</style>
<style name="MyTabTextAppearance">
    <item name="android:textSize">36sp</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="textAllCaps">true</item>
</style>

Tab Layout:

<com.google.android.material.tabs.TabLayout
                app:tabTextAppearance="@style/MyTabTextAppearance"
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="fill_horizontal"
                android:background="?attr/colorPrimary"
                android:textAlignment="center"
                android:textSize="36sp"
                app:tabGravity="fill" />

Solution

  • Try out with this style :

     <style name="MyTabStyle" parent="Base.Widget.Design.TabLayout">
     <item name="android:textSize">36sp</item>
     <item name="android:textAllCaps">true</item>
     </style>
    

    And apply in Tablayout :

     <com.google.android.material.tabs.TabLayout
                app:tabTextAppearance="@style/MyTabTextAppearance"
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="fill_horizontal"                             
                app:tabTextAppearance="@style/TabLayoutStyle"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill" />