使用TabLayout时如何更改标签的背景色?


119

这是我主要活动中的代码

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>

我想更改一个选项卡的背景色

Answers:


285

最终对我有用的东西类似于@如果我是DJ提出的建议,但是tabBackground应当在layout文件中而不是style,因此看起来像:

res/layout/somefile.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>

2
您还可以向该属性添加颜色值:即:app:tabBackground:@ color / colorAccent
Val Martinez,

谢谢您的解决方案。但是,我失去了默认的波纹效果。
Ken Ratanachai S.

4
如何以编程方式执行此操作?
TSR

1
@TSR,如果每个标签不需要不同的颜色,则可以执行tabLayout.setBackgroundColor(colorInt)。如果每个标签都需要它,则可以从TabLayout中提取子级
karl

1
为了改善外观,我认为我们还应该添加state_pressed<item android:drawable =“ @ color / tab_background_selected” android:state_pressed =“ true” />
两次代码

21

您可以尝试以下方法:

<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>

以及如何实施呢?
TSR

13

在xml中添加属性:

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

并在可绘制文件夹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>

5

您是否尝试过检查API

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


是的,我已经尝试过了,但是tabLayout更改了整个选项卡小部件的颜色,并且在tabLayout.Tab上找不到仅更改选项卡颜色的方法,而其他选项卡则保持相同的颜色。
乔尔·拉拉

我不是100%知道你要干什么。如果您只想为一个标签的主体着色,则可以在该标签内添加容器/视图,那么您应该能够像通常一样在XML中设置容器/视图的背景色,例如,以下将设置背景变红android:background=FF0000
sorifiend 2015年


3

您可以在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"/>

2

当我找到最适合自己的选项时,它也可以与动画一起使用。

您可以将indicator其自身用作背景。

您可以设置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>

希望对您有帮助。


这是自动采用强调色。如何在不改变强调色的情况下赋予其他颜色。谢谢
MindRoasterMir

1
您可以使用app:tabIndicatorColor@MindRoasterMir
Pratik Butani

1

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

    //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));
            }
        }
    }

1

经过一番弄乱之后,这就是我获得所需外观的方式(至少在模拟器中),并且保持了涟漪效果。

具有颜色参数的选项卡选择器的选项卡布局

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@drawable/tab_selector"
    app:tabIconTint="@drawable/tab_selector"
    app:tabIconTintMode="src_atop"
    app:tabTextColor="@drawable/tab_selector" />

@drawable/tab_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary" android:drawable="@color/colorPrimaryDark" android:state_selected="true" />
    <item android:color="@color/colorPrimaryDark" android:drawable="@color/colorPrimary" />
</selector>

仅供参考:这是模拟器在将color参数添加到之前显示的内容@drawable/tab_selector

选项卡选择器的选项卡布局,不带颜色参数


0

您可以通过此属性更改标签的背景色

<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"/>'

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.