Размер текста вкладок TabLayout в дизайне Android


100

Мне сложно изменить размер текста вкладок библиотеки дизайна tablayout (android.support.design.widget.TabLayout).

Мне удалось его изменить, назначив tabTextAppearance в TabLayout

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

следующий стиль

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

но у меня есть 2 побочных эффекта:

1) Я потерял акцентный цвет выбранной вкладки

2) Текст табуляции больше не пишется с заглавной буквы.

Ответы:


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

Использование в TabLayoutтаком

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

Работает нормально. Я использую поддержку lib 25.1.0.
Суфьян

Работает над библиотекой поддержки 25.3.1
Луис

отлично, братан, ты экономишь мое время ,,, он работает над lib 25.1.0
Кунал Дхарайя

@Sufian, у меня это не работает, и я использую ту же версию поддержки, что и вы (25.1.0). Есть идеи, почему?
Сэм

3
Если ваш текст табуляции многострочный. Затем tabLayout использует другое поле для установки размера текста. Пожалуйста, ознакомьтесь с моим ответом здесь для решения: stackoverflow.com/a/48797329/700693
Evren Ozturk,

47

Продолжайте использовать tabTextAppearance, как и вы, но

1) чтобы исправить побочный эффект заглавной буквы, добавьте textAllCap в свой стиль:

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

2) чтобы исправить побочный эффект выбранного цвета вкладки, добавьте в TabLayout xml следующие атрибуты библиотеки:

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

Надеюсь это поможет.


Теперь это работает как шарм. Спасибо u2gilles за быстрый ответ.
Malko

@ u2gilles я использовал настраиваемый макет на вкладках, который является линейным макетом с двумя текстовыми окнами, но я хочу изменить только один цвет текста при выборе вкладки?
Erum

1
Если вы хотите установить <item name = "android: textAllCaps"> false </item>, то здесь должна быть еще одна строка в дополнение к двойкам: <item name = "textAllCaps"> false </item>
CodeToLife,

25

Работайте над api 22 и 23 Создайте этот стиль:

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

И примените его к своему макету вкладки:

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

22

Сделайте следующее.

1. Добавьте стиль в XML.

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

2. Применить стиль

Найдите макет, содержащий TabLayout, и добавьте стиль. Добавленная строка выделена жирным шрифтом.

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

18

Попробуйте отрывок, упомянутый ниже, у меня он тоже работает.

В моем макете, xmlгде у меня есть мой TabLayout, я добавил стиль, TabLayoutкак показано ниже:

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

и в моем style.xmlя определил стиль, который используется в моем макете xml, проверьте код для стилей, добавленных ниже:

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

Надеюсь, у вас это сработает .....


15

У меня аналогичная проблема и аналогичное решение:

1) Размер

в xml у вас есть TabLayout,

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

тогда в стиле,

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

Если вы не хотите, чтобы символы в верхнем регистре помещали false в "android: textAllCaps"

2) Цвет текста выбранных или невыбранных вкладок,

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

затем в 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);

            }
        }
    }
}

Этот код работает для меня с использованием tablayout. Это изменит размер шрифтов, а также изменит стиль шрифта.

Это также поможет вам, ребята, пожалуйста, проверьте эту ссылку

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

Этот код работает для изменения цвета текста Tablayout, начертания шрифта (стиля шрифта), а также размера текста.


0

Я использовал Android Pie, и, похоже, ничего не работало, поэтому я поигрался с атрибутом app: tabTextAppearance. Я знаю, что это не лучший ответ, но может кому-то помочь.

<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" />
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.