Jak zmienić nowy kolor i wysokość wskaźnika TabLayout

124

Bawiłem się nowym android.support.design.widget.TabLayouti znalazłem problem w definicji klasy, nie ma metod zmiany koloru wskaźnika i domyślnej wysokości.

Po przeprowadzeniu pewnych badań okazało się, że domyślny kolor wskaźnika pochodzi z AppTheme. Konkretnie stąd:

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

Teraz w moim przypadku, jeśli zmienię colorAccent, wpłynie to na wszystkie inne widoki, które używają tej wartości jako koloru tła, na przykład ProgressBar

Czy jest jakiś sposób na zmianę koloru wskaźnika na inną rzecz oprócz colorAccent?

David_E
źródło

Odpowiedzi:

250

Mając problem z tym, że nowy TabLayout używa koloru wskaźnika z wartości colorAccent, zdecydowałem się zagłębić w android.support.design.widget.TabLayoutimplementację, stwierdzając, że nie ma publicznych metod dostosowywania tego. Jednak znalazłem tę specyfikację stylu TabLayout:

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

Mając tę ​​specyfikację stylu, możemy teraz dostosować TabLayout w następujący sposób:

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

Po rozwiązaniu problemu zarówno kolor wskaźnika karty, jak i wysokość można zmienić z wartości domyślnych.

David_E
źródło
5
czy istnieje sposób na zmianę „tabSelectedTextColor” (nie koloru ani wysokości tabindicatora) za pomocą kodu java.
Prakash
2
atrybut app: tabIndicatorColor w widżecie XML tabLayout to jedyna zmiana, jaką musiałem wprowadzić, aby rozwiązać ten problem. Dzięki!
Braden Holt
Zrobiłem to jako styl rodzicielski:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m
To rozwiązanie okazało się uzasadnione
Nikhil
101

Dzięki bibliotece wsparcia projektowania możesz teraz zmienić je w xml:

Aby zmienić kolor wskaźnika TabLayout:

app:tabIndicatorColor="@color/color"

Aby zmienić wysokość wskaźnika TabLayout:

app:tabIndicatorHeight="4dp"
Malek Hijazi
źródło
4
Umieściłem tę linię, ale kolor nadal jest akcentem kolorystycznym
Mahdi,
@Kenji czy jesteś pewien, że ta linia została umieszczona w TabLayout, a nie w bitu paska narzędzi w pliku XML? Łatwe zgubienie :)
Wes Winn
Idealne rozwiązanie na wysokość. To działa dobrze. Dzięki Malek.
Hardik Joshi
1
A jeśli zamiast tego chcę zastosować kolor gradientu?
hamza khan
35

Ponieważ nie mogę opublikować uzupełnienia komentarza programisty Androida , oto zaktualizowana odpowiedź dla każdego, kto musi programowo ustawić kolor wskaźnika wybranej karty:

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

Podobnie w przypadku wysokości:

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

Metody te zostały dopiero niedawno dodane do wersji 23.0.0 Biblioteki wsparcia , dlatego odpowiedź Soheila Setayeshiego wykorzystuje refleksję.

jasonchen2
źródło
2
setSelectedTabIndicatorHeight jest teraz przestarzałe, masz pojęcie, czego teraz użyć?
Michalsx
17
app:tabIndicatorColor="@android:color/white"
Sanket Parchande
źródło
13

Dzięki bibliotece wsparcia projektowania v23 możesz programowo ustawić kolor i wysokość.

Po prostu użyj do wysokości:

TabLayout.setSelectedTabIndicatorHeight(int height)

Tutaj oficjalny plik javadoc .

Po prostu użyj do koloru:

TabLayout.setSelectedTabIndicatorColor(int color)

Tutaj oficjalny plik javadoc .

Tutaj możesz znaleźć informacje w Google Tracker .

Gabriele Mariotti
źródło
Jakich liczb całkowitych mamy używać dla koloru?
the_prole
Można użyć klasy kolor dla przykładu Color.RED
Soumya
setSelectedTabIndicatorHeight jest teraz przestarzałe
APP,
9

Aby programowo zmienić kolor i wysokość wskaźnika, możesz użyć odbicia. na przykład dla koloru wskaźnika użyj kodu poniżej:

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

i aby zmienić wysokość wskaźnika użyj "setSelectedIndicatorHeight" zamiast "setSelectedIndicatorColor", a następnie wywołaj go o żądaną wysokość

Soheil Setayeshi
źródło
1
Dziękuję Ci! to mi pomaga! Chyba Google zapomniał podać metody na to w swojej bibliotece pomocy.
Shinta S
1
Po co używać refleksji, skoro jest już dostępna jako funkcje publiczne? developer.android.com/reference/android/support/design/widget/ ...
Androida
@SoheilSetayeshi Oh, ok. Dziękuję Ci. Może powinieneś wtedy zaktualizować odpowiedź.
programista Androida
1
Ale jest to idealne rozwiązanie dla interfejsów API poniżej biblioteki obsługującej 23.0.0. Mam na myśli Whaao! Świetna odpowiedź!
sud007
6

Wskaźnik Foto używa tego:

 tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.colorWhite));//put your color
chry
źródło
6

z xml:

app:tabIndicatorColor="#fff"

z java:

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
tabLayout.setSelectedTabIndicatorHeight((int) (2 * getResources().getDisplayMetrics().density));
Arthur Melo
źródło
1

Możesz to zmienić za pomocą XML

app:tabIndicatorColor="#fff"
Ishan Fernando
źródło
0

Po prostu umieść tę linię w swoim kodzie. Jeśli zmienisz kolor, zmień wartość koloru w nawiasach.

tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FFFFFF"));
saqib javeed
źródło
0

Android to ułatwia.

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

Więc po prostu mówimy

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

To da nam niebieski normalny kolor i fioletowy wybrany kolor.

Teraz ustawiamy wysokość

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

Mówimy o wysokości

mycooltablayout.setSelectedIndicatorHeight(6);
SmulianJulian
źródło