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


123

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

做一些研究,发现默认的指示器颜色取自AppTheme。具体是从这里:

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

现在,就我而言,如果更改colorAccent,它将影响使用该值作为背景色的所有其他视图,例如ProgressBar

现在,除了之外,还有什么方法可以将indicatorColor更改为其他内容colorAccent

Answers:


250

遇到新的TabLayout使用值中的指示器颜色的问题时colorAccent,我决定深入研究android.support.design.widget.TabLayout实现,发现没有公共方法可以对此进行自定义。但是我发现了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"/>

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


5
有没有办法通过Java代码更改'tabSelectedTextColor'(不是tabindicator颜色或高度)。
Prakash

2
tabLayout xml小部件中的app:tabIndicatorColor属性是我要解决此问题所需的唯一更改。谢谢!
布雷登·霍尔特

我将其作为父样式设置了:parent="@style/Base.Widget.Design.TabLayout"
Ultimo_m

发现此解决方案是合法的
Nikhil

100

使用设计支持库,您现在可以在xml中进行更改:

更改TabLayout指示器的颜色

app:tabIndicatorColor="@color/color"

更改TabLayout指示器的高度

app:tabIndicatorHeight="4dp"

4
我把这个线,但颜色仍然强调色
迈赫迪

@Kenji您确定这一行是放在TabLayout中,而不是在xml的工具栏中吗?容易放错位置:)
Wes Winn

高度的完美解决方案。它工作正常。谢谢Malek。
Hardik Joshi

1
如果我想应用渐变颜色怎么办?
hamza khan,

35

由于我无法发布有关android开发人员评论的后续信息,因此这是需要以编程方式设置所选标签指示符颜色的其他用户的更新答案:

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

同样,对于高度:

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

这些方法只是最近才添加到支持库的23.0.0版中,这就是Soheil Setayeshi的答案使用反射的原因。


2
setSelectedTabIndicatorHeight现在已弃用,知道现在使用什么吗?
Michalsx


13

使用desing支持库v23,您可以以编程方式设置颜色和高度。

只需使用高度即可:

TabLayout.setSelectedTabIndicatorHeight(int height)

这里是官方的javadoc

仅用于颜色:

TabLayout.setSelectedTabIndicatorColor(int color)

这里是官方的javadoc

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


我们应该为颜色使用什么整数?
the_prole

您可以使用Color类,例如Color.RED
Soumya

setSelectedTabIndicatorHeight现在已弃用
APP

9

要以编程方式更改指示器的颜色和高度,可以使用反射。例如,下面的指示器颜色使用代码:

        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”,然后按所需的高度调用它


1
谢谢!这对我有帮助!我猜Google忘记了在他们的支持库中提供此方法。
Shinta S

1
如果反射已经可以用作公共功能,为什么还要使用它呢?developer.android.com/reference/android/support/design/widget/...
Android开发者

@SoheilSetayeshi哦,好的。谢谢。也许您应该然后更新答案。
Android开发人员

1
但这对于支持库23.0.0以下的API是一个完美的解决方案。我是说哇 好答案!
sud007 '16

6

Foto指示器使用此:

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

6

从xml:

app:tabIndicatorColor="#fff"

从java:

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


0

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

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

0

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);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.