带有文本和图标的 Android TabLayout 在选定的选项卡上更改文本和图标的颜色答案

【问题标题】：Android TabLayout With Text and Icons Change color of both text and Icon on selected tab带有文本和图标的 Android TabLayout 在选定的选项卡上更改文本和图标的颜色
【发布时间】：2017-06-06 11:16:54
【问题描述】：

在我的应用程序中实现 tablayout，每个选项卡都有图标和文本。选择选项卡时，应选择同一选项卡的图标和文本，并且带有不同颜色文本和图标的未选中选项卡。

以下是我实现标签布局但无法更改标签选择时的文本颜色和图标颜色的代码。

private void setupTabIcons() {

    TextView tabOne = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabOne.setText("Home");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_home, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);

    TextView tabTwo = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabTwo.setText("Search");
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_search, 0, 0);
    tabLayout.getTabAt(1).setCustomView(tabTwo);

    TextView tabThree = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabThree.setText("WishList");
    tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_wishlist, 0, 0);
    tabLayout.getTabAt(2).setCustomView(tabThree);

    TextView tabFour = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabFour.setText("Cart");
    tabFour.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_cart, 0, 0);
    tabLayout.getTabAt(3).setCustomView(tabFour);

    TextView tabFive = (TextView) LayoutInflater.from(mContext).inflate(R.layout.custome_tab_with_icon, null);
    tabFive.setText("Account");
    tabFive.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.selector_accounts, 0, 0);
    tabLayout.getTabAt(4).setCustomView(tabFive);

}

请帮助如何在选择选项卡时更改文本颜色和图标。

TIA

【问题讨论】：

标签： android android-tablayout

【解决方案1】：

切换标签文本颜色 在您的 xml 中，将 linesapp:tabTextColor 和 app:tabSelectedTextColor 添加到 TabLayout 。

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            app:tabTextColor="#000000"
            app:tabSelectedTextColor="#FFFFFF"
            android:layout_height="wrap_content"/>

切换标签图标在你的fargment/activity中添加选择器drawable到每个标签。

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        //Set selector drawable to each tab
        tabLayout.addTab(tabLayout.newTab().setText("Warm Up").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_warmup_icon,null)));
        tabLayout.addTab(tabLayout.newTab().setText("Exercise").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_exercise_icon, null)));
        tabLayout.addTab(tabLayout.newTab().setText("Rest").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_rest_icon, null)));
        tabLayout.addTab(tabLayout.newTab().setText("Success").setIcon(ResourcesCompat.getDrawable(getResources(), R.drawable.selector_success_icon, null)));

selector_warmup_icon.xml（应该是这样的）

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

    <item android:drawable="@drawable/ic_human_white_48dp" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_human_grey600_24dp" android:state_selected="false"/>

</selector>

【讨论】：

tablayout 上不显示任何内容。应用上述代码后标签栏为空白无图标无文字。
使用 .setText("Tab name") 给出标签名称。现在检查更新的代码，就图标而言，文本将显示正确检查选择器文件
这不适用于 kit kat，因为所有选项卡都有相同的颜色，这是未选择选项卡的颜色
这可能对你有用stackoverflow.com/a/61884583/8889086@John

【解决方案2】：

您可以将Color State List resource 用于文本颜色以及图标的色调。我认为android:state_selected 应该可以工作。

【讨论】：

【解决方案3】：

您可以通过添加TabLayout.OnTabSelectedListener 来做到这一点，它具有onTabSelected()、onTabUnselected() 和onTabReselected() 三个方法，您可以使用它们来更改图标和文本的颜色。这里是link，你可以参考一下。

【讨论】：