webentwicklung-frage-antwort-db.com.de

So ändern Sie die Farbe und Höhe der neuen TabLayout-Anzeige

Ich habe mit dem neuen Android.support.design.widget.TabLayout Herumgespielt 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 Standardindikatorfarbe aus dem AppTheme stammt. Speziell von hier:

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

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

Gibt es jetzt eine Möglichkeit, die indicatorColor auf andere Werte als colorAccent zu ändern?

androidmaterial-designandroid-design-library
117
David_E

Nachdem ich das Problem hatte, dass das neue TabLayout die Indikatorfarbe aus dem Wert colorAccent verwendet, entschied ich mich, das Android.support.design.widget.TabLayout Implementierung, wobei festgestellt wird, dass es keine öffentlichen Methoden gibt, um dies anzupassen. Allerdings habe ich diese Style-Spezifikation des TabLayouts gefunden:

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

233
David_E

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

So ändern Sie das Farbe des TabLayout-Indikators:

app:tabIndicatorColor="@color/color"

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

app:tabIndicatorHeight="4dp"
91
Malek Hijazi

Da ich kein Follow-up zu Kommentar des Android-Entwicklers posten kann, ist hier eine aktualisierte Antwort für alle anderen, die die Farbe des ausgewählten Registerkartenindikators programmgesteuert festlegen 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 Soheil Setayeshis Antwort Reflektion verwendet.

32
jasonchen2
app:tabIndicatorColor="@Android:color/white"
17
Sanket Parchande

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

Verwenden Sie nur für die Höhe: 

TabLayout.setSelectedTabIndicatorHeight(int height)

Hier der offizielle Javadoc .

Nur für die Farbe verwenden: 

TabLayout.setSelectedTabIndicatorColor(int color)

Hier der offizielle Javadoc .

Hier finden Sie die Informationen im Google Tracker .

13
Gabriele Mariotti

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

        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 es dann mit der gewünschten Höhe auf

9
Soheil Setayeshi

Foto-Indikator verwenden Sie diese:

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

von xml:

app:tabIndicatorColor="#fff"

von Java:

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

Sie können dies mit xml ändern

app:tabIndicatorColor="#fff"
1
Ishan Fernando

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 ergibt eine normale blaue Farbe und eine ausgewählte violette 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);
0
SmulianJulian

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

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