Tamaño del texto de las pestañas TabLayout de diseño de Android


97

Tengo dificultades para cambiar el tamaño del texto de las pestañas de la biblioteca de diseño tablayout (android.support.design.widget.TabLayout).

Logré cambiarlo asignando tabTextAppearance en TabLayout

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

el siguiente estilo

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

pero tengo 2 efectos secundarios:

1) Perdí el color de acento de la pestaña seleccionada

2) El texto de la pestaña ya no está en mayúsculas.

Respuestas:


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

El uso es TabLayoutasí

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

Funcionando bien. Estoy usando el soporte lib 25.1.0.
Sufian

Funciona en la biblioteca de soporte 25.3.1
Luis

excelente hermano, gracias, me ahorras tiempo, está funcionando en la biblioteca 25.1.0
Kunal Dharaiya

@Sufian, no me funciona y estoy usando la misma versión de soporte que tú (25.1.0). ¿Alguna idea de por qué?
Sam

2
Si el texto de la pestaña es de varias líneas. Luego, la tabLayout usando un campo diferente para establecer el tamaño del texto. Consulte mi respuesta aquí para obtener una solución: stackoverflow.com/a/48797329/700693
Evren Ozturk

46

Continúe usando tabTextAppearance como lo hizo pero

1) para corregir el efecto secundario de la letra mayúscula, agregue textAllCap en su estilo:

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse">
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">true</item>
</style>

2) para corregir el efecto secundario del color de la pestaña seleccionada, agregue en TabLayout xml los siguientes atributos de biblioteca:

app:tabSelectedTextColor="@color/color1"
app:tabTextColor="@color/color2" 

Espero que esto ayude.


Funciona a las mil maravillas ahora. Gracias u2gilles por su pronta respuesta.
Malko

@ u2gilles he usado un diseño personalizado en pestañas que es un diseño lineal con 2 vistas de texto, pero quiero cambiar solo un color de vista de texto en la selección de pestañas.
Erum

1
Si desea establecer <item name = "android: textAllCaps"> false </item>, entonces debería haber una cadena más además de dos: <item name = "textAllCaps"> false </item>
CodeToLife

24

Trabaja en api 22 y 23 Haz este estilo:

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

Y aplícalo a tu tablayout:

<android.support.design.widget.TabLayout
            android:id="@+id/contentTabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/list_gray_border"
            app:tabTextAppearance="@style/TabLayoutStyle"
            app:tabSelectedTextColor="@color/colorPrimaryDark"
            app:tabTextColor="@color/colorGrey"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

21

Haz lo siguiente.

1. Agregue el estilo al XML

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

2. Aplicar estilo

Busque el diseño que contiene TabLayout y agregue el estilo. La línea agregada está en negrita.

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

18

Pruebe el recortado que se menciona a continuación, también funciona para mí.

En mi diseño xmldonde tengo mi TabLayout, he agregado estilo a lo TabLayoutsiguiente:

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

y en mi style.xmlhe definido el estilo que se usa en mi diseño xml, verifique el código para los estilos agregados a continuación:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">YOUR BACKGROUND COLOR</item>
    <item name="tabTextAppearance">@style/MyCustomTabText</item>
    <item name="tabSelectedTextColor">SELECTED TAB TEXT COLOR</item>
    <item name="tabIndicatorColor">SELECTED TAB INDICATOR COLOR</item>
</style>

<style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
    <item name="android:textSize">YOUR TEXT SIZE</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@android:color/white</item>
</style>

Espero que funcione para ti ...


15

Tengo un problema similar y una resolución similar:

1) tamaño

en el xml tienes TabLayout,

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

luego con estilo,

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

Si no quiere los caracteres en mayúsculas, ponga falso en "android: textAllCaps"

2) Color de texto de las pestañas seleccionadas o no seleccionadas,

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));
    }

luego en 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" />


8
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 < 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);

            }
        }
    }
}

Este código me funciona usando tablayout. Cambiará el tamaño de las fuentes y también cambiará el estilo de la fuente.

Esto también los ayudará, por favor revisen este enlace.

https://stackoverflow.com/a/43156384/5973946

Este código funciona para Tablayout cambiar el color del texto, el tipo de letra (estilo de fuente) y también el tamaño del texto.


0

Estaba usando Android Pie y nada parecía funcionar, así que jugué con el atributo app: tabTextAppearance. Sé que no es la respuesta perfecta, pero podría ayudar a alguien.

<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" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.