Розмір тексту на вкладках Android TabLayout


97

У мене виникають труднощі зі зміною розміру тексту на вкладках розкладки бібліотеки дизайну (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) Текст вкладки більше не пишеться великими літерами.

Відповіді:


187
<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
Kunal Dharaiya

@Sufian, у мене це не працює, і я використовую ту саму версію підтримки, що і ти (25.1.0). Будь-яка ідея чому?
Сем

2
Якщо текст на вкладці багаторядковий. Потім tabLayout це, використовуючи інше поле, щоб встановити розмір текстів. Будь ласка, перевірте мою відповідь тут для рішення: stackoverflow.com/a/48797329/700693
Еврен Озтюрк

46

Продовжуйте використовувати 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 за швидку відповідь.
Малко

@ u2gilles я використовував власний макет на вкладках, який має лінійний макет із 2 переглядами тексту, але я хочу змінити лише один колір перегляду тексту на виділенні вкладки?
Ерум

1
Якщо ви хочете встановити <item name = "android: textAllCaps"> false </item>, тоді t тут має бути ще один рядок на додаток до двох: <item name = "textAllCaps"> false </item>
CodeToLife

24

Робота над 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"/>

21

Виконайте наступні дії.

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

            }
        }
    }
}

Цей код працює для мене за допомогою розкладки. Це змінить розмір шрифтів, а також змінить стиль шрифту.

Це також допоможе вам, хлопці, перевірте це посилання

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.