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

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?

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.

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"

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.

app:tabIndicatorColor="@android:color/white"

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 .

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

Foto Indikator verwenden Sie diese:

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

von xml:

app:tabIndicatorColor="#fff"

von Java:

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

Sie können dies mit XML ändern

app:tabIndicatorColor="#fff"

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

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