如何更改新的 TabLayout 指示器颜色和高度

Question

我在玩新的 android.support.design.widget.TabLayout，发现一个问题，在 class 定义中，没有更改指示器颜色和默认高度的方法。

做了一些研究，发现默认指示器颜色取自 AppTheme。具体来自这里：

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

现在，在我的例子中，如果我更改 colorAccent，它将影响所有其他使用此值作为背景颜色的视图，例如 ProgressBar

除了 colorAccent 之外，现在还有什么方法可以将 indicatorColor 更改为其他东西吗？

Answer 1

由于新的 TabLayout 使用值 colorAccent 的指示器颜色的问题，我决定深入研究 android.support.design.widget.TabLayout 实现，发现没有 public 方法来定制这个。但是我发现了 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>

有了这个样式规范，现在我们可以像这样自定义TabLayout：

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

问题已解决，选项卡指示器的颜色和高度都可以从默认值更改。

Answer 2

要以编程方式更改指示器颜色和高度，您可以使用反射。例如，对于指示器颜色使用以下代码：

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

要更改指标高度，请使用 "setSelectedIndicatorHeight" 而不是 "setSelectedIndicatorColor"，然后按您想要的高度调用它

Answer 3

由于我无法 post 的后续行动，这里有一个更新的答案，供需要以编程方式设置所选选项卡指示器颜色的任何其他人使用：

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

同样，对于身高：

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

这些方法最近才添加到 revision 23.0.0 of the Support Library, which is why 使用反射。

Answer 4

借助 设计支持库 v23，您可以通过编程方式设置颜色和高度。

仅用于高度：

TabLayout.setSelectedTabIndicatorHeight(int height)

这里是official javadoc.

仅用于颜色：

TabLayout.setSelectedTabIndicatorColor(int color)

这里是official javadoc.

在这里您可以找到 Google Tracker 中的信息。

Answer 5

使用设计支持库，您现在可以在 xml 中更改它们：

要更改 TabLayout 指示器的颜色：

app:tabIndicatorColor="@color/color"

要更改 TabLayout 指示器的高度：

app:tabIndicatorHeight="4dp"

Answer 6

您可以使用 xml

更改此设置

app:tabIndicatorColor="#fff"

Answer 7

只需将这一行放入您的代码中即可。如果更改颜色，则更改括号中的颜色值。

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

Answer 8

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

Answer 9

来自 xml :

app:tabIndicatorColor="#fff"

来自 java :

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

Answer 10

Foto 指标使用这个：

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

Answer 11

Android 让一切变得简单。

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

所以，我们就说

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

这将为我们提供蓝色的正常颜色和紫色的选定颜色。

现在我们设置高度

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

对于身高我们说

mycooltablayout.setSelectedIndicatorHeight(6);

如何更改新的 TabLayout 指示器颜色和高度

How to change the new TabLayout indicator color and height

android

material-design

android-design-library