Ukuran teks tab desain android TabLayout

104

Saya mengalami kesulitan mengubah ukuran teks pada tab pustaka desain tablayout (android.support.design.widget.TabLayout).

Saya berhasil mengubahnya dengan menetapkan tabTextAppearance di TabLayout 

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

gaya berikut 

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

tetapi saya memiliki 2 efek samping:

1) Saya kehilangan warna aksen dari tab yang dipilih

2) Teks tab tidak lagi menggunakan huruf besar.

android  text-size  android-tablayout 
— Malko
sumber

Jawaban:

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

Gunakan TabLayoutseperti ini

<android.support.design.widget.TabLayout
            app:tabTextAppearance="@style/MineCustomTabText"
            ...
            />
— hnrain
sumber
Bekerja dengan baik. Saya menggunakan dukungan lib 25.1.0.
— Sufian
Bekerja pada pustaka dukungan 25.3.1
— Luis
luar biasa, bro, Anda menghemat waktu saya ,,, ini bekerja pada lib 25.1.0
— Kunal Dharaiya
@Sufian, ini tidak berfungsi untuk saya dan saya menggunakan versi dukungan yang sama dengan Anda (25.1.0). Tahu kenapa?
— Sam
3
Jika teks tab Anda multiline. Kemudian tabLayout-nya menggunakan field yang berbeda untuk mengatur ukuran teks. Silakan periksa jawaban saya di sini untuk solusinya: stackoverflow.com/a/48797329/700693
— Evren Ozturk
48

Lanjutkan menggunakan tabTextAppearance seperti yang Anda lakukan tetapi

1) untuk memperbaiki efek samping huruf kapital tambahkan textAllCap dalam gaya Anda:

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

2) untuk memperbaiki efek samping warna tab yang dipilih tambahkan di TabLayout xml atribut perpustakaan berikut:

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

Semoga ini membantu.

— u2gilles.dll
sumber
Ini bekerja seperti pesona sekarang. Terima kasih u2gilles atas jawaban Anda yang cepat.
— Malko
@ u2gilles Saya telah menggunakan tata letak kustom di tab yang linearlayout dengan 2 tampilan teks tetapi saya ingin mengubah hanya satu warna tampilan teks pada pemilihan tab?
— Erum
1
Jika Anda ingin menyetel <item name = "android: textAllCaps"> false </item>, maka t di sini harus ada satu string lagi selain dua: <item name = "textAllCaps"> false </item>
— CodeToLife
26

Bekerja pada api 22 & 23 Buat gaya ini:

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

Dan terapkan ke tablayout Anda:

<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"/>
— Luidgi Gromat
sumber
22

Lakukan sebagai berikut.

1. Tambahkan Style ke XML

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

2. Terapkan Gaya

Temukan Layout yang berisi TabLayout dan tambahkan gayanya. Garis yang ditambahkan dicetak tebal.

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

Coba snipped yang disebutkan di bawah, ini juga berfungsi untuk saya.

Dalam tata letak saya di xmlmana saya memiliki saya TabLayout, telah menambahkan gaya TabLayoutseperti di bawah ini:

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

dan di saya, style.xmlsaya telah menentukan gaya yang digunakan dalam tata letak xml saya, periksa kode untuk gaya yang ditambahkan di bawah ini:

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

Saya berharap ini akan berhasil untuk Anda .....

— malaikat
sumber
15

Saya memiliki masalah yang sama dan resolusi yang serupa:

1) Ukuran

di xml Anda memiliki TabLayout,

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

lalu dengan gaya,

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

Jika Anda tidak ingin karakter dalam huruf besar diletakkan di salah "android: textAllCaps"

2) Warna teks dari Tab yang dipilih atau tidak dipilih,

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

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

— Martín Huergo
sumber
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);

            }
        }
    }
}

Kode ini berfungsi untuk saya menggunakan tablayout. Ini akan mengubah ukuran font dan juga mengubah gaya font.

Ini juga akan membantu kalian, silakan periksa tautan ini

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

Kode ini berfungsi untuk mengubah warna teks Tablayout, jenis wajah (gaya font) dan juga ukuran teks.

— viral 9966
sumber
0

Saya menggunakan Android Pie dan sepertinya tidak ada yang berhasil, jadi saya bermain-main dengan atribut app: tabTextAppearance. Saya tahu ini bukan jawaban yang sempurna tetapi mungkin bisa membantu seseorang.

<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" />
— Surbhit Rao
sumber
0

FILE XML DALAM NILAI

<style name="tab">
    <item name="android:textSize">@dimen/_10ssp</item>
    <item name="android:textColor">#FFFFFF</item>
</style>

TABEL TAB

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/_27sdp"
    android:layout_marginLeft="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_10sdp"
    app:layout_constraintEnd_toEndOf="parent"
    app:tabTextAppearance="@style/tab"
    app:tabGravity="fill"
    android:layout_marginTop="@dimen/_10sdp"
    app:layout_constraintStart_toStartOf="parent"
   >

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TAB 1"
        android:scrollbarSize="@dimen/_4sdp"
        />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbarSize="@dimen/_6sdp"
        android:text="TAB 2" />

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbarSize="@dimen/_4sdp"
        android:text="TAB 3" />
</com.google.android.material.tabs.TabLayout>
— Laksh Lathiya
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.