如何修改Android TabLayout中选中标签的背景颜色?
给TabLayout选中标签单独设置背景色的几种实用方法
嘿,这个需求我平时碰到挺多的,下面给你几个靠谱的实现思路,你可以根据项目场景选最合适的:
方法一:自定义Tab布局(最灵活可控)
这种方式能完全掌控每个Tab的样式,不管是背景、文字样式还是额外控件都能自定义,适合需要复杂样式的场景。
- 先创建一个自定义Tab的布局文件,比如
res/layout/tab_item.xml:
<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab_text" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingVertical="12dp" android:textColor="@drawable/tab_text_color_selector" android:background="@drawable/tab_background_selector"/>
- 创建文字颜色选择器
res/drawable/tab_text_color_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/colorAccent" android:state_selected="true"/> <item android:color="#000000" android:state_selected="false"/> </selector>
- 创建背景颜色选择器
res/drawable/tab_background_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/your_selected_bg_color" android:state_selected="true"/> <item android:drawable="@android:color/transparent" android:state_selected="false"/> </selector>
- 最后在代码中给每个Tab绑定自定义布局:
// Kotlin示例 val tabLayout = findViewById<TabLayout>(R.id.tabLayout) // 添加标签 tabLayout.addTab(tabLayout.newTab().setText("标签1")) tabLayout.addTab(tabLayout.newTab().setText("标签2")) // 给每个Tab设置自定义布局 for (i in 0 until tabLayout.tabCount) { val tab = tabLayout.getTabAt(i) tab?.customView = LayoutInflater.from(this).inflate(R.layout.tab_item, null) tab?.customView?.findViewById<TextView>(R.id.tab_text)?.text = tab?.text } // 设置默认选中第一个标签 tabLayout.getTabAt(0)?.select()
方法二:直接给TabLayout设置背景选择器(快速实现)
如果不需要复杂自定义,这种方式最省心,不用写太多代码就能实现效果:
- 先创建背景选择器
res/drawable/tab_background_selector.xml(和方法一的一样):
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/your_selected_bg_color" android:state_selected="true"/> <item android:drawable="@android:color/transparent" android:state_selected="false"/> </selector>
- 在布局文件的TabLayout中配置属性,注意把原来的整体背景改成透明,避免和Tab背景冲突:
<com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/transparent" app:tabBackground="@drawable/tab_background_selector" app:tabTextColor="#000000" app:tabSelectedTextColor="@color/colorAccent"/>
方法三:通过Tab选中监听动态设置(动态场景)
如果需要在运行时动态修改背景色,或者有特殊逻辑(比如根据业务切换颜色),可以用这种方式:
// Kotlin示例 val tabLayout = findViewById<TabLayout>(R.id.tabLayout) tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab) { // 设置选中Tab的背景和文字颜色 tab.view.setBackgroundColor(resources.getColor(R.color.your_selected_bg_color)) tab.view.findViewById<TextView>(com.google.android.material.R.id.tab_text) .setTextColor(resources.getColor(R.color.colorAccent)) } override fun onTabUnselected(tab: TabLayout.Tab) { // 恢复未选中Tab的样式 tab.view.setBackgroundColor(resources.getColor(android.R.color.transparent)) tab.view.findViewById<TextView>(com.google.android.material.R.id.tab_text) .setTextColor(resources.getColor(R.color.black)) } override fun onTabReselected(tab: TabLayout.Tab) { // 重复选中时的逻辑,按需添加 } })
注意:这里用了Material库内置的Tab文字View的IDcom.google.android.material.R.id.tab_text,如果你的TabLayout是自定义的,可能需要调整这个ID。
内容的提问来源于stack exchange,提问作者Nabeel Nazir




