So ändern Sie die Farbe und Höhe des neuen TabLayout-Indikators

123

Ich habe mit dem Neuen android.support.design.widget.TabLayoutherumgespielt und ein Problem festgestellt. In der Klassendefinition gibt es keine Methoden zum Ändern der Indikatorfarbe und der Standardhöhe.

Bei einigen Nachforschungen wurde festgestellt, dass die Standard-Indikatorfarbe aus dem AppTheme stammt. Speziell von hier:

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

Wenn ich in meinem Fall das ändere colorAccent, wirkt sich dies auf alle anderen Ansichten aus, die diesen Wert als Hintergrundfarbe verwenden, z. B. ProgressBar

Gibt es jetzt eine Möglichkeit, die Indikatorfarbe in eine andere Funktion als die zu ändern colorAccent?

David_E
quelle

Antworten:

250

Da ich das Problem hatte, dass das neue TabLayout die Indikatorfarbe aus dem Wert verwendet colorAccent, entschied ich mich, mich mit der android.support.design.widget.TabLayoutImplementierung zu befassen und stellte fest, dass es keine öffentlichen Methoden gibt, um dies anzupassen. Ich fand jedoch diese Stilspezifikation des 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>

Mit dieser Stilspezifikation können wir das TabLayout jetzt wie folgt anpassen:

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

Wenn das Problem behoben ist, können sowohl die Farbe als auch die Höhe der Registerkartenanzeige von ihren Standardwerten geändert werden.

David_E
quelle
5
Gibt es eine Möglichkeit, die 'tabSelectedTextColor' (nicht tabindicator Farbe oder Höhe) über Java-Code zu ändern.
Prakash
2
Das Attribut app: tabIndicatorColor im XML-Widget tabLayout ist die einzige Änderung, die ich vornehmen musste, um dieses Problem zu beheben. Vielen Dank!
Braden Holt
Ich habe dies als übergeordneten Stil gemacht:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m
Diese Lösung hat sich als legitim erwiesen
Nikhil
100

Mit der Design-Support-Bibliothek können Sie sie jetzt in der XML ändern:

So ändern Sie die Farbe der TabLayout-Anzeige:

app:tabIndicatorColor="@color/color"

So ändern Sie die Höhe des TabLayout-Indikators:

app:tabIndicatorHeight="4dp"
Malek Hijazi
quelle
4
Ich habe diese Linie gesetzt, aber Farbe ist immer noch Akzentfarbe
Mahdi
@ Kenji Bist du sicher, dass diese Zeile in das TabLayout und nicht in das Toolbar-Bit der XML eingefügt wurde? Einfache Fehlplatzierung :)
Wes Winn
Perfekte Lösung für die Höhe. Es funktioniert gut. Danke Malek.
Hardik Joshi
1
Was ist, wenn ich stattdessen eine Verlaufsfarbe anwenden möchte?
Hamza Khan
35

Da ich keine Nachverfolgung des Kommentars des Android-Entwicklers veröffentlichen kann , ist hier eine aktualisierte Antwort für alle anderen, die die ausgewählte Tab-Indikatorfarbe programmgesteuert einstellen müssen:

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

Ebenso für die Höhe:

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

Diese Methoden wurden erst kürzlich zu Revision 23.0.0 der Support Library hinzugefügt, weshalb in der Antwort von Soheil Setayeshi Reflexion verwendet wird.

jasonchen2
quelle
2
setSelectedTabIndicatorHeight ist jetzt veraltet. Haben Sie eine Idee, was Sie jetzt verwenden sollen?
Michalsx
17
app:tabIndicatorColor="@android:color/white"
Sanket Parchande
quelle
13

Mit der Desing Support Library v23 können Sie Farbe und Höhe programmgesteuert einstellen.

Verwenden Sie einfach für die Höhe:

TabLayout.setSelectedTabIndicatorHeight(int height)

Hier der offizielle Javadoc .

Verwenden Sie einfach für die Farbe:

TabLayout.setSelectedTabIndicatorColor(int color)

Hier der offizielle Javadoc .

Hier finden Sie die Informationen im Google Tracker .

Gabriele Mariotti
quelle
Welche ganzen Zahlen sollen wir für Farbe verwenden?
the_prole
Sie können die Farbklasse zum Beispiel Color.RED
Soumya
setSelectedTabIndicatorHeight ist jetzt veraltet
APP
9

Um die Farbe und Höhe des Indikators programmgesteuert zu ändern, können Sie die Reflexion verwenden. Verwenden Sie zum Beispiel für die Indikatorfarbe den folgenden Code:

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

und um die Höhe des Indikators zu ändern, verwenden Sie "setSelectedIndicatorHeight" anstelle von "setSelectedIndicatorColor" und rufen Sie ihn dann mit der gewünschten Höhe auf

Soheil Setayeshi
quelle
1
Danke dir! das hilft mir! Ich denke, Google hat vergessen, eine Methode dafür in seiner Support-Bibliothek anzugeben.
Shinta S
1
Warum Reflektion verwenden, wenn es bereits als öffentliche Funktionen verfügbar ist? developer.android.com/reference/android/support/design/widget/…
Android-Entwickler
@ SoheilSetayeshi Oh, ok. Danke dir. Vielleicht sollten Sie die Antwort dann aktualisieren.
Android-Entwickler
1
Dies ist jedoch eine perfekte Lösung für APIs unterhalb der Unterstützungsbibliothek 23.0.0. Ich meine Whaao! Gute Antwort!
Sud007
6

Foto Indikator verwenden Sie diese:

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

von xml:

app:tabIndicatorColor="#fff"

von Java:

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

Sie können dies mit XML ändern

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

Fügen Sie einfach diese Zeile in Ihren Code ein. Wenn Sie die Farbe ändern, ändern Sie den Farbwert in Klammern.

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

Android macht es einfach.

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

Also sagen wir einfach

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

Das gibt uns eine blaue normale Farbe und eine lila ausgewählte Farbe.

Jetzt stellen wir die Höhe ein

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

Und für die Höhe sagen wir

mycooltablayout.setSelectedIndicatorHeight(6);
SmulianJulian
quelle