Changing text size inside Tabs

Question

I am designing my app for various screen sizes,but I have a small problem. I can't change the size of the text inside the tabs. Here is what I did.

Firstly I created my own style.

<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">22sp</item>
</style>

And then I use this style to the appropriate xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="manutd.football.app.interviews.InterviewsActivity">

<manutd.football.app.SlidingTabLayout
    android:id="@+id/tabs"
    app:tabTextAppearance="@style/MineCustomTabText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="2dp"
    android:background="#656e99" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_below="@+id/tabs"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_weight="1"
    ></android.support.v4.view.ViewPager>

</RelativeLayout>

Any ideas? Thanks

Answer 1

Well i dnt know the reason why you choose manutd.football.app.SlidingTabLayout

you can use

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

by this you can change what you want in your tabs like

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">?android:textColorSecondary</item>
    <item name="textAllCaps">true</item>
</style>

Answer 2

Use tabTextAppearance to change the size of text inside tab.

app:tabTextAppearance="?android:attr/textAppearanceSmall"

Complete code of my TabLayout is

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/tabLayoutBGColor"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextAppearance="?android:attr/textAppearanceSmall"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

Hope this will help.

Answer 3

Change the parent in the Style file.

<style name="MineCustomTabText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">22sp</item>
</style>