Bagaimana cara mengubah warna dan tinggi indikator TabLayout baru

124

Saya bermain-main dengan yang baru android.support.design.widget.TabLayout, dan menemukan masalah, dalam definisi kelas, tidak ada metode untuk mengubah warna indikator, dan ketinggian default.

Melakukan beberapa penelitian, ditemukan bahwa warna indikator default diambil dari AppTheme. Khususnya dari sini:

<item name="colorAccent">#FF4081</item>

Sekarang, dalam kasus saya, jika saya mengubah colorAccent, itu akan mempengaruhi semua tampilan lain yang menggunakan nilai ini sebagai warna latar belakang, misalnya ProgressBar

Sekarang apakah ada cara untuk mengubah indicatorColor menjadi hal lain selain colorAccent?

David_E
sumber

Jawaban:

250

Memiliki masalah bahwa TabLayout baru menggunakan warna indikator dari nilai colorAccent, saya memutuskan untuk menggali android.support.design.widget.TabLayoutimplementasinya, menemukan bahwa tidak ada metode publik untuk menyesuaikan ini. Namun saya menemukan spesifikasi gaya TabLayout ini:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Dengan spesifikasi gaya ini, sekarang kita dapat menyesuaikan TabLayout seperti ini:

<android.support.design.widget.TabLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@id/pages_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabIndicatorHeight="4dp"/>

Dan masalah terselesaikan, warna dan tinggi indikator tab dapat diubah dari nilai defaultnya.

David_E
sumber
5
apakah ada cara mengubah 'tabSelectedTextColor' (Bukan warna tabindicator atau tinggi) melalui kode java.
Prakash
2
atribut app: tabIndicatorColor di widget tabLayout xml adalah satu-satunya perubahan yang perlu saya lakukan untuk memperbaiki masalah ini. Terima kasih!
Braden Holt
Saya membuat ini sebagai gaya orang tua:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m
Solusi ini terbukti sah
Nikhil
101

Dengan pustaka dukungan desain, Anda sekarang dapat mengubahnya di xml:

Untuk mengubah warna indikator TabLayout:

app:tabIndicatorColor="@color/color"

Untuk mengubah ketinggian indikator TabLayout:

app:tabIndicatorHeight="4dp"
Malek Hijazi
sumber
4
Saya menempatkan garis ini, tetapi warna tetap warna aksen
Mahdi
@Kenji Anda yakin bahwa baris ini diletakkan di TabLayout dan bukan di bit Toolbar di xml? Mudah salah penempatan :)
Wes Winn
Solusi sempurna untuk ketinggian. Ini bekerja dengan baik. Terima kasih Malek.
Hardik Joshi
1
Bagaimana jika saya ingin menerapkan warna gradien?
hamza khan
35

Karena saya tidak dapat memposting tindak lanjut untuk komentar pengembang android , berikut adalah jawaban yang diperbarui untuk siapa pun yang perlu menyetel warna indikator tab yang dipilih secara terprogram:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));

Demikian pula untuk tinggi badan:

tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));

Metode ini baru saja ditambahkan ke revisi 23.0.0 dari Pustaka Dukungan , itulah sebabnya jawaban Soheil Setayeshi menggunakan refleksi.

jasonchen2
sumber
2
setSelectedTabIndicatorHeight sekarang tidak digunakan lagi, tahu apa yang harus digunakan sekarang?
Michalsx
17
app:tabIndicatorColor="@android:color/white"
Sanket Parchande
sumber
13

Dengan pustaka dukungan desing v23, Anda dapat menyetel warna dan tinggi secara terprogram.

Cukup gunakan untuk ketinggian:

TabLayout.setSelectedTabIndicatorHeight(int height)

Di sini javadoc resmi .

Gunakan saja untuk warna:

TabLayout.setSelectedTabIndicatorColor(int color)

Di sini javadoc resmi .

Di sini Anda dapat menemukan infonya di Google Tracker .

Gabriele Mariotti
sumber
Bilangan bulat apa yang seharusnya kita gunakan untuk warna?
the_prole
Anda dapat menggunakan kelas Warna misalnya Color.RED
Soumya
setSelectedTabIndicatorHeight sekarang tidak digunakan lagi
APP
9

Untuk mengubah warna dan ketinggian indikator secara terprogram Anda dapat menggunakan refleksi. misalnya untuk kode penggunaan warna indikator di bawah ini:

        try {
            Field field = TabLayout.class.getDeclaredField("mTabStrip");
            field.setAccessible(true);
            Object ob = field.get(tabLayout);
            Class<?> c = Class.forName("android.support.design.widget.TabLayout$SlidingTabStrip");
            Method method = c.getDeclaredMethod("setSelectedIndicatorColor", int.class);
            method.setAccessible(true);
            method.invoke(ob, Color.RED);//now its ok
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }

dan untuk mengubah tinggi indikator, gunakan "setSelectedIndicatorHeight" sebagai ganti "setSelectedIndicatorColor" lalu panggil sesuai ketinggian yang Anda inginkan

Soheil Setayeshi
sumber
1
Terima kasih! ini membantu saya! Saya kira Google lupa memberikan metode untuk ini di pustaka dukungan mereka.
Shinta S
1
Mengapa menggunakan refleksi, jika sudah tersedia sebagai fungsi publik? developer.android.com/reference/android/support/design/widget/…
android
@SoheilSetayeshi Oh, oke. Terima kasih. Mungkin Anda harus memperbarui jawabannya.
Pengembang android
1
Tapi ini adalah solusi sempurna untuk API di bawah pustaka dukungan 23.0.0. Maksud saya Whaao! Jawaban Hebat!
sud007
6

Indikator foto menggunakan ini:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
chry
sumber
6

dari xml:

app:tabIndicatorColor="#fff"

dari java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
Arthur Melo
sumber
1

Anda dapat mengubahnya menggunakan xml

app:tabIndicatorColor="#fff"
Ishan Fernando
sumber
0

Letakkan saja baris ini di kode Anda. Jika Anda mengubah warna maka ubah nilai warna dalam tanda kurung.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
saqib javeed
sumber
0

Android membuatnya mudah.

public void setTabTextColors(int normalColor, int selectedColor) {
    setTabTextColors(createColorStateList(normalColor, selectedColor));
}

Jadi, kami katakan saja

mycooltablayout.setTabTextColors(Color.parseColor("#1464f4"), Color.parseColor("#880088"));

Itu akan memberi kita warna normal biru dan warna ungu terpilih.

Sekarang kami mengatur ketinggian

public void setSelectedTabIndicatorHeight(int height) {
    mTabStrip.setSelectedIndicatorHeight(height);
}

Dan untuk tinggi badan kami katakan

mycooltablayout.setSelectedIndicatorHeight(6);
SmulianJulian
sumber