TabWidget当前选项卡底部线条颜色

Question

我有一个TabWidget，在其中启用并设置了stripLeft和stripRight...

mTabHost.getTabWidget().setStripEnabled(true);
mTabHost.getTabWidget().setRightStripDrawable(R.drawable.redline);
mTabHost.getTabWidget().setLeftStripDrawable(R.drawable.redline);

如下图所示，这并不会改变当前选定选项卡（TAB 2）的底部线条颜色。

我该如何更改当前选定选项卡的底部线条颜色？目前默认为蓝色（我猜测蓝色是在styles.xml中的默认AppTheme样式中设置的）。

我查看了这个答案，但它没有说明如何更改颜色...

- neo108

Answer 1

选项卡指示器的颜色是由一个选择器drawable设置的，可以在这里找到它，它的外观如下：

<!-- AOSP copyright notice can be found at the above link -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />
</selector>

选择器使用的可绘制对象都是那种浅蓝色的颜色。您可以用自己重新着色的版本替换这些可绘制对象。原始图像如下（原始图像很小，链接包括在内）：

• tab_unselected_holo
• tab_selected_holo
• tab_unselected_focused_holo
• tab_selected_focused_holo
• tab_unselected_pressed_holo
• tab_selected_pressed_holo

您需要将上述选择器与可绘制对象一起复制到自己的项目中。然后，您需要将可绘制对象重新着色为您想要的任何颜色。然后，您需要将您的选择器设置为选项卡指示符的背景。您可以像这样做（在设置选项卡后）：

TabHost host = (TabHost)view.findViewById(R.id.tab_host);
TabWidget widget = host.getTabWidget();
for(int i = 0; i < widget.getChildCount(); i++) {
    View v = widget.getChildAt(i);

    // Look for the title view to ensure this is an indicator and not a divider.
    TextView tv = (TextView)v.findViewById(android.R.id.title);
    if(tv == null) {
        continue;
    }
    v.setBackgroundResource(R.drawable.your_tab_selector_drawable);
}

也许有更简单的方法，通过设置自己的客户指示器布局和背景选择器来完成，但对我来说，这是最容易实现的方法。

- Michael Celey

---

嘿@MCeley，谢谢你的回答。我现在也在尝试让它工作，关于tab_unselected_holo，tab_selected_holo等等，它们都是png格式的，所以要替换它们，我得用不同的颜色自己制作，但我不知道默认的png尺寸是多少，也不知道是否能正常工作。 - Michael Nana

将答案回滚到最初状态。虽然 http://android-holo-colors.com/ 是一个有用的网站，可以创建整个主题并更改选项卡颜色，但这个问题不是关于创建主题的。 - Michael Celey

这太疯狂了，只是指示器的颜色而已，要做的工作太多了。 - Tomasz Mularczyk

谢谢。我正在按照此链接（http://jgilfelt.github.io/android-actionbarstylegenerator/#name=bar&compat=holo&theme=light&actionbarstyle=solid&texture=1&hairline=0&neutralPressed=0&backColor=E4E4E4%2C100&secondaryColor=fff%2C100&tabColor=ffc800%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100）来添加图像。在应用程序中，我使用的是**Theme.Holo.Light.NoActionBar.Fullscreen**，这不允许我在选项卡底部使用**黄色**颜色。它只显示浅蓝色。有什么建议吗？ - CoDe

抱歉 @Shubh，我脑海中没有任何想法。我建议您将此作为单独的问题发布，并查看是否有人可以帮助您解决它。 - Michael Celey

Answer 2

您可以使用app:tabIndicatorColor来实现此目的。它将根据您的要求更改所选选项卡指示线的颜色。

<android.support.design.widget.TabLayout
                    android:id="@+id/tabs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:tabIndicatorColor="@android:color/white"
                    app:tabMode="fixed" />

- Nidhi

---

我认为他正在使用TabHost和TabWidget，而不是TabLayout。 - James

Answer 3

这是我如何更改我的标签页：

private void changetabs(TabWidget tabWidget) {
    // Change background
    for(int i=0; i < tabWidget.getChildCount(); i++)
        tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tab_selector);
}

还有我的tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" />

<!-- Pressed -->
<!--    Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

<!--    Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

希望能帮助到某些人。

- Basim Sherif

---

“changetabs” 函数会在什么时候被调用？ - Name is Nilay

Answer 4

如果有人不知道如何制作绘图（9 patch）选项卡的话，这里有一个在线工具可以快速构建。只需选择颜色并按下按钮即可完成...

感谢Jeff Gilfelt

---

Android操作栏样式生成器可以为您的Android应用程序轻松创建简单、美观且无缝的自定义操作栏样式。它将生成所有必要的九宫格资源以及相关的XML绘图和样式，您可以直接将其复制到您的项目中。

http://jgilfelt.github.io/android-actionbarstylegenerator/

- Ash

---

这绝对是最简单的方法。谢谢Jeff！:D - Sean Beach

太好了！这真是一个简单的方法来改变tabwidget底部线条的颜色。 - imthegiga

尝试使用了这个，但它并没有改变选项卡的颜色，只有选项卡栏的颜色；有什么建议吗？ - John

是的，我尝试添加它，但它只更改选项卡指示器颜色，而不是选项卡栏和选项卡指示器颜色（选项卡栏颜色默认为透明）。 - John

Answer 5

您可以使用滤镜，
它将应用于不透明区域。

tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).getBackground().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);

一行代码 - 无需更改状态。

- Alexey O.

---

很好，但是怎么改变文本颜色？在设置指示符("TAB_A")之后。 - Criss

你救了我的一天。我不明白为什么这没有被标记为正确答案。 - Nivil Boban

Answer 6

默认情况下，强调色被用作活动选项卡的颜色。您可以在style.xml文件中设置/更改它:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">

    <item name="colorAccent">@color/myAccentColor</item>

</style>

- dzikovskyy

---

非常简单，无需添加任何额外的XML。 - Jcorretjer

Answer 7

我解决这个问题的方法是使用setBackgroundResource。首先，您必须创建完全相同的背景

line_label_1_pressed.xml

<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
    <shape>
        <size android:height="50dp"/>
        <solid android:color="@android:color/transparent"/>
        <stroke android:color="@color/myColor" android:width="6dp"/>
    </shape>
</item>

line_label_1.xml

<item>
    <shape>
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

然后按照以下方式创建tab_selector.xml文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/line_label_1_pressed" android:state_selected="true"/>
<item android:drawable="@drawable/line_label_1"/>

然后使用tab_selector.xml设置背景资源

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tab_selector"
android:gravity="center_horizontal|center_vertical" />

- Ted_Liang

Answer 8

我找到了其他的解决方案，打开styles.xml文件并更改其中一行：

res -> values -> styles.xml

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@android:color/holo_orange_light</item> <!-- set the color in this line -->
    <item name="windowNoTitle">true</item>
</style>

- skajar

Answer 9

只需使用类似以下的内容：

tabHost.setSelectedTabIndicatorColor(Color.WHITE);

- Nick Fedorov