Tamanho do texto das guias TabLayout do design do Android


95

Tenho dificuldade em alterar o tamanho do texto das guias da biblioteca de design tablayout (android.support.design.widget.TabLayout).

Eu consegui mudar atribuindo tabTextAppearance em TabLayout

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

o seguinte estilo

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

mas tenho 2 efeitos colaterais:

1) Perdi a cor de destaque da guia selecionada

2) O texto da guia não é mais capitalizado.

Respostas:


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

O uso é TabLayoutassim

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

Trabalhando bem. Estou usando o suporte lib 25.1.0.
Sufian

Funciona na biblioteca de suporte 25.3.1
Luis

superb thax bro, você economiza meu tempo ... está funcionando na lib 25.1.0
Kunal Dharaiya

@Sufian, não está funcionando para mim e estou usando a mesma versão de suporte que você (25.1.0). Alguma ideia do porquê?
Sam

2
Se o texto da guia for multilinha. Em seguida, o tabLayout usa um campo diferente para definir o tamanho dos textos. Verifique minha resposta aqui para solução: stackoverflow.com/a/48797329/700693
Evren Ozturk

46

Continue usando tabTextAppearance como você fez, mas

1) para corrigir o efeito colateral de letras maiúsculas, adicione textAllCap em seu 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 corrigir o efeito colateral da cor da guia selecionada, adicione no TabLayout xml os seguintes atributos de biblioteca:

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

Espero que isto ajude.


Funciona perfeitamente agora. Obrigado u2gilles pela sua resposta rápida.
Malko

@ u2gilles eu usei o layout personalizado em guias que é linearlayout com 2 textviews, mas quero alterar apenas uma cor de textview na seleção da guia?
Erum

1
Se você deseja definir <item name = "android: textAllCaps"> false </item>, então deve haver mais uma string além de duas: <item name = "textAllCaps"> false </item>
CodeToLife

24

Trabalhe na API 22 e 23 Faça este estilo:

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

E aplique-o ao seu 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

Faça o seguinte.

1. Adicione o estilo ao XML

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

2. Aplicar estilo

Encontre o Layout que contém o TabLayout e adicione o estilo. A linha adicionada está em negrito.

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

17

Experimente o recortado que é mencionado abaixo, ele também funciona para mim.

No meu layout, xmlonde tenho o meu TabLayout, adicionei estilo ao TabLayoutseguinte:

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

e no meu style.xmleu defini o estilo que é usado no meu layout xml, verifique o código para os estilos adicionados abaixo:

<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 você .....


15

Tenho um problema semelhante e uma resolução semelhante:

1) Tamanho

no xml você tem TabLayout,

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

então em grande estilo,

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

Se você não quiser que os caracteres em maiúsculas, coloque falso em "android: textAllCaps"

2) Cor do texto das guias selecionadas ou não selecionadas,

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

depois em 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 funciona para mim usando tablayout. Isso mudará o tamanho das fontes e também o estilo da fonte.

Isso também vai ajudar vocês, por favor, verifique este link

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

Este código funciona para Tablayout alterar a cor do texto, tipo de rosto (estilo da fonte) e também o tamanho do texto.


0

Eu estava usando o Android Pie e nada parecia funcionar, então brinquei com o atributo app: tabTextAppearance. Eu sei que não é a resposta perfeita, mas pode ajudar alguém.

<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" />
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.