在操作栏中更改选项卡指示器颜色

Question

我知道这个问题之前被问过很多次，但我尝试了所有的解决方案，但没有任何作用。所以我决定遵循官方文档：https://developer.android.com/training/basics/actionbar/styling.html 我创建了themes.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
        parent="@android:style/Theme.Holo.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
        parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>

    <!-- ActionBar tabs styles -->
    <style name="MyActionBarTabs"
        parent="@android:style/Widget.Holo.ActionBar.TabView">
        <!-- tab indicator -->
        <item name="android:background">@drawable/actionbar_tab_indicator</item>
    </style>
</resources>

actionbar_background只是一个简单的形状，具有实心填充，并且它有效。
然而指示器仍然是蓝色的：
actionbar_tab_indicator - 这是从http://jgilfelt.github.io/android-actionbarstylegenerator/生成的文件。 我还将生成的图像复制粘贴到drawable文件夹中。第一个问题是9-patch文件出了一些问题，但我已经手动修复了它们。

我在AndroidManifest.xml中设置主题：android:theme="@style/CustomActionBarTheme"

我也尝试过通过编程方式更改颜色的解决方案，但它并不像预期的那样工作。它被拉伸以适应整个选项卡，而不是成为小矩形。

任何在最新的Android Studio中工作的解决方案（无论是程序化还是在xml中）都将很好。但它必须看起来像原始选项卡一样，只是颜色不同-在我的情况下是红色。

问候

- Makalele

---

你的最小SDK版本是多少？ - Mounir Elfassi

@MounirElfassi 它是15。(Android 4.0.3) - Makalele

你在使用任何指标库吗？ - Sebastiano

不，我只想使用普通的TabHost（带有片段），并且仅更改指示器颜色。 - Makalele

Answer 1

我一直觉得使用Android Asset Studio工具最容易，因为我不擅长图形设计。这个特定的工具非常相关于你想要实现的目标：http://jgilfelt.github.io/android-actionbarstylegenerator/。完整的工具套件可以在http://romannurik.github.io/AndroidAssetStudio/找到。只需选择您想要的颜色/样式，下载zip文件，并将文件复制/粘贴到您的项目中。然后，在您的AndroidManifest.xml文件中，引用生成器中选择的任何“Style name”（网站上填写的第一个文本框）在包含ActionBar的活动中。例如，如果您在生成器中称之为“Custom_action_bar”，则应在活动中添加它如下：

<activity
    android:name="com.company.appname.ActivityName"
    android:label="@string/somename"
    android:theme="@style/Theme.Custom_action_bar">
    <!--the above line is all you need to add-->
</activity>

- esme_louise

---

http://android-holo-colors.com/ 这个救了我的一天，谢谢！虽然常见问题解答并没有明确说明这一点，但我结合了@AliMephpour的回答，一起解决了它！文件数量很大，但它正在工作。 - Makalele

Answer 2

在你的 .xml 文件中，你可以使用以下代码来改变 tabIndicator 的高度。

<android.support.design.widget.TabLayout`
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="62dp"
    android:background="#001e8b"
    android:elevation="6dp"
    app:tabSelectedTextColor="@android:color/white"
    app:tabIndicatorHeight="5dp"
    app:tabIndicatorColor="@android:color/white"
    app:tabTextColor="@android:color/darker_gray"`
    />

- Mubashar Javed

Answer 3

首先，在drawable文件夹中定义一个选择器（tab_indicator.xml）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true" android:drawable="@drawable/background_tab_selected" />

<item android:state_selected="false" android:drawable="@drawable/background_tab_unselected" />

</selector>

@drawable/background_tab_selected和@drawable/background_tab_unselected是九宫格图片，分别表示选中和未选中的标签状态。

注意：background_tab_selected九宫格图片的可缩放区域应该只包含与正常背景匹配的像素。就像这样：（我指左侧和顶部的九宫格指示器）

然后在您的活动的onCreate()方法中，找到TabWidget对象并设置它们的背景：

final TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);

tabs.getChildTabViewAt(0).setBackgroundResource(R.drawable.tab_indicator);

tabs.getChildTabViewAt(1).setBackgroundResource(R.drawable.tab_indicator);

tabs.getChildTabViewAt(2).setBackgroundResource(R.drawable.tab_indicator);

tabs.setDividerDrawable(R.drawable.tab_divider);

同时，您可以通过setDividerDrawable()方法设置分隔线的可绘制对象。

希望能对您有所帮助。

- Ali Mehrpour

---

我已经尝试了相同的解决方案。在我的情况下，setBackgroundResource会将9-patch拉伸到整个选项卡而不是绘制小指示器（如蓝色指示器）。 - Makalele

这段代码对我来说运行良好。您可以在https://play.google.com/store/apps/details?id=tv.clippit.android上检查应用程序并查看其外观。注意：background_tab_selected可缩放区域的九宫格图像应仅包含与正常背景匹配的像素。请参见我的答案中嵌入的图像（顶部和左侧的九宫格指示器）。 - Ali Mehrpour

我尝试了你的图片，这是结果（第四个选项卡没有使用setBackgroundResource以显示差异）：http://imgur.com/49Wd1Wy - Makalele

Answer 4

你能试试吗：

<style name="MyActionBarTabs"  
              parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/actionbar_tab_indicator</item>

</style>

由于您在CustomActionBarTheme中使用了parent="@android:style/Theme.Holo.Light.DarkActionBar"

- Xcihnegn

---

刚刚检查了一下，没有任何区别。 - Makalele

也许你的选择器有问题，你应该附上选择器的XML。 - Xcihnegn

这会改变整个选项卡的背景。你如何仅更改指示器的颜色？ - CodeMonkey

Answer 5

修改操作栏选项卡指示器颜色很困难，但您可以使用SlidingTabLayout，通过它您可以动态地改变指示器的颜色，还可以改变指示器的高度。

要获取SlidingTabLayout类（和小部件），请在Android Studio中导入示例项目：

1. SlidingTabBasic：用于指示器颜色始终保持一致。
2. SlidingTabBasic：用于实现动态选项卡指示器颜色。

在SlidingTabLayout中，有各种选项可用于自定义选项卡、指示器及其文本。

将此内容用于您的项目，并享受它带来的便利吧！

- Rishabh Maltare