android - 如何在使用TabLayout时更改选项卡背景颜色?

这是我在主要活动中的代码

public class FilterActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_filter);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PageAdapter pageAdapter = new PageAdapter(getSupportFragmentManager(), FilterActivity.this);
    viewPager.setAdapter(pageAdapter);

    // Give the TabLayout the ViewPager
    final TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);



  }
}

这是我在XML中的代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        android:id="@+id/app_bar"
        layout="@layout/app_bar">
    </include>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="fill_parent"
        style="@style/MyCustomTabLayout"
        android:layout_height="48dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

我想在选中一个标签时更改背景颜色

Joel Lara asked 2019-08-13T11:41:59Z
9个解决方案
232 votes

最终对我有用的是类似于@如果我是DJ建议的,但tabBackground应该在res/drawable/tab_color_selector.xml文件中,而不是在style内,所以它看起来像:

res/drawable/tab_color_selector.xml

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

和选择器res/drawable/tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Tako answered 2019-08-13T11:42:27Z
19 votes

你可以试试这个:

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabBackground">@drawable/background</item>
</style>

在你的后台xml文件中:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@color/white" />
    <item android:drawable="@color/black" />
</selector>
如果我是DJ answered 2019-08-13T11:42:54Z
11 votes

在xml中添加属性:

<android.support.design.widget.TabLayout
    ....
    app:tabBackground="@drawable/tab_color_selector"
    ...
    />

并在drawable文件夹中创建tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>
Hai Rom answered 2019-08-13T11:43:26Z
3 votes

您是否尝试过检查API?

您将需要为tabLayout.setBackgroundColor(int color)事件创建一个侦听器,然后当用户选择任何选项卡时,您应该检查它是否正确,然后使用tabLayout.setBackgroundColor(int color)更改背景颜色,或者如果它不是正确的选项卡,请确保您更改回来 用同样的方法再次恢复正常颜色。

sorifiend answered 2019-08-13T11:43:58Z
2 votes

你可以在xml中拥有它。

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        app:tabTextColor="@color/colorGray"
        app:tabSelectedTextColor="@color/colorWhite"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
XurajB answered 2019-08-13T11:44:23Z
1 votes

因为我找到了最适合我的选项,它也适用于动画。

你可以使用app:tabIndicatorGravity="stretch"作为背景。

您可以将app:tabIndicatorGravity="stretch"属性设置为用作背景。

例:

   <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorGravity="stretch"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/colorAccent">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chef" />


        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="User" />

    </android.support.design.widget.TabLayout>

希望它能帮到你。

Pratik Butani AndroidDev answered 2019-08-13T11:45:13Z
0 votes

您可以像这样更改每个Tab的背景或波纹颜色:

    //set ripple color for each tab
    for(int n = 0; n < mTabLayout.getTabCount(); n++){

        View tab = ((ViewGroup)mTabLayout.getChildAt(0)).getChildAt(n);

        if(tab != null && tab.getBackground() instanceof RippleDrawable){
            RippleDrawable rippleDrawable = (RippleDrawable)tab.getBackground();
            if (rippleDrawable != null) {
                rippleDrawable.setColor(ColorStateList.valueOf(rippleColor));
            }
        }
    }
José Maurício answered 2019-08-13T11:45:39Z
0 votes

您可以通过此属性更改选项卡的背景颜色

<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/CategoryTab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
'android:background="@color/primary_color"/>'
Owais answered 2019-08-13T11:46:05Z
-2 votes

最简单的解决方案之一是从colors.xml文件中更改colorPrimary。

Ahmad Sadiq answered 2019-08-13T11:46:36Z
translate from https://stackoverflow.com:/questions/31640563/how-do-i-change-a-tab-background-color-when-using-tablayout