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.

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

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.


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

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

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


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


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.


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

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