AndroidデザインのTabLayoutタブのテキストサイズ


95

デザインライブラリtablayout(android.support.design.widget.TabLayout)のタブのテキストサイズを変更するのが困難です。

TabLayoutでtabTextAppearanceを割り当てることにより、なんとかそれを変更しました

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

次のスタイル

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

しかし、私には2つの副作用があります:

1)選択したタブのアクセントカラーを失った

2)タブのテキストは大文字になりません。

回答:


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

使い方はTabLayoutこんな感じ

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

正常に動作しています。サポートライブラリ25.1.0を使用しています。
スーフィアン2017

サポートライブラリ25.3.1で動作します
Luis

素晴らしいタックス仲間、あなたは私の時間を節約します、それ、lib 25.1.0での作業
Kunal Dharaiya

@Sufian、それは私にとっては機能せず、私はあなたと同じサポートバージョン(25.1.0)を使用しています。なぜだろう?
Sam

2
タブテキストが複数行の場合。次に、異なるフィールドを使用してtabLayoutにテキストサイズを設定します。解決策についてはここで私の答えをチェックアウトしてください:stackoverflow.com/a/48797329/700693
Evren Ozturk

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
Malko

@ u2gilles 2つのtextviewsを持つlinearlayoutであるタブでカスタムレイアウトを使用しましたが、タブ選択で1つのtextviewの色のみを変更したいですか?
2015

1
<item name = "android:textAllCaps"> false </ item>を設定する場合、ここに2つに加えてもう1つの文字列を指定する必要があります。<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" />

17

下記のスニップを試してみてください。

私がいる私のレイアウトxmlTabLayoutTabLayout以下のようにスタイルを追加しました:

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

大文字にしたくない場合は、「android:textAllCaps」にfalseを入力します

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" />
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.