Kotlin定制TabLayout选中样式：背景与文字变色实现求助

云上老周

2026-8-21

实现TabLayout选中时背景与文字颜色切换

问题描述

使用Kotlin开发时，需要将默认TabLayout定制为选中Tab时切换背景色和文字颜色的样式，此前尝试用CardView实现但无法切换选中状态颜色，改用默认TabLayout后不清楚修改位置，相关代码如下：

ArtikelHome.kt（含ViewPager的Activity代码）

package com.example.senangumrah

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.example.senangumrah.artikel.ArtikelViewPagerAdapter
import com.google.android.material.tabs.TabLayoutMediator
import kotlinx.android.synthetic.main.activity_artikel_home.*
import kotlinx.android.synthetic.main.activity_artikel_home.navigation_button
import kotlinx.android.synthetic.main.activity_artikel_home.tabLayout
import kotlinx.android.synthetic.main.activity_persediaan_home.*
import kotlinx.android.synthetic.main.cover_home_artikel.*
import kotlinx.android.synthetic.main.cover_home_menu.*
import kotlinx.android.synthetic.main.cover_home_persediaan.*
import kotlinx.android.synthetic.main.cover_home_persediaan.navigationView
import kotlinx.android.synthetic.main.layout_side_menu.*

class ArtikelHome : AppCompatActivity(), View.OnClickListener {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.cover_home_artikel)
    onSetNavigationDrawerEvents()

    val adapter = ArtikelViewPagerAdapter(supportFragmentManager, lifecycle)
    viewPagerArtikel.adapter = adapter

    TabLayoutMediator(tabLayout, viewPagerArtikel) { tab, position -> 
        when (position) {
            0 -> {
                tab.text = "Semua"
            }
            1 -> {
                tab.text = "Kat 1"
            }
            2 -> {
                tab.text = "Kat 2"
            }
            3 -> {
                tab.text = "Kat 3"
            }
            4 -> {
                tab.text = "Kat 4"
            }
            5 -> {
                tab.text = "Kat 5"
            }
        }
    }.attach()

    val ButtonBack: ImageView = findViewById(R.id.back)
    ButtonBack.setOnClickListener {
        val intent = Intent(this, HomeMenu::class.java)
        startActivity(intent)
    }
    }
}

activity_artikel_home.xml布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ArtikelHome">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/artikel_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<ImageView
    android:id="@+id/back"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.043"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.027"
    app:srcCompat="@drawable/buttonback" />

<ImageView
    android:id="@+id/navigation_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.956"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.027"
    app:srcCompat="@drawable/menubutton" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/poppinsmedium"
    android:text="Artikel"
    android:textSize="18sp"
    android:textColor="#1A1B23"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.037" />

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    app:layout_constraintStart_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.116" />

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@android:color/darker_gray"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    app:layout_constraintStart_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.182" />


<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="377dp"
    android:layout_height="wrap_content"
    android:contentDescription="scrollabletab"
    app:tabMinWidth="105dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.47"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.125"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/tabtext"
    app:tabIndicatorColor="@color/tabtext"/>

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPagerArtikel"
    android:layout_width="match_parent"
    android:layout_height="600dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    app:layout_constraintStart_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

</LinearLayout>

ArtikelViewPagerAdapter适配器代码

package com.example.senangumrah.artikel

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.lifecycle.Lifecycle
import androidx.viewpager2.adapter.FragmentStateAdapter

class ArtikelViewPagerAdapter (fragmentManager: FragmentManager, lifecycle: Lifecycle): FragmentStateAdapter(fragmentManager, lifecycle ) {
override fun getItemCount(): Int {
    return 6
}

override fun createFragment(position: Int): Fragment {
    return when (position) {
        0->{
            KategoriSemuaFragment()
        }
        1->{
            Kategori1Fragment()
        }
        2->{
            Kategori2Fragment()
        }
        3->{
            Kategori3Fragment()
        }
        4->{
            Kategori4Fragment()
        }
        5->{
            Kategori5Fragment()
        }
        else->{
            Fragment()
        }

    }
}
}

期望实现选中Tab时背景色和文字颜色切换的效果（选中Tab显示高亮背景、文字同步变色）。

解决方案

核心是通过**Drawable选择器（Selector）**实现Tab的状态切换，无需修改Kotlin代码，只需调整XML配置：

1. 创建Tab背景选择器

在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/tab_selected_bg" android:state_selected="true"/>
    <!-- 未选中状态的背景 -->
    <item android:drawable="@color/tab_unselected_bg"/>
</selector>

如果需要圆角效果，把@color/tab_selected_bg换成带圆角的shape：

<!-- 示例：带圆角的选中背景shape -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_selected_bg"/>
    <corners android:radius="8dp"/>
</shape>

2. 创建文字颜色选择器

在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/tab_selected_text" android:state_selected="true"/>
    <!-- 未选中状态的文字颜色 -->
    <item android:color="@color/tab_unselected_text"/>
</selector>

3. 修改TabLayout的XML属性

更新activity_artikel_home.xml中的TabLayout配置，替换原有的文字颜色和指示器属性，添加背景选择器：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="377dp"
    android:layout_height="wrap_content"
    android:contentDescription="scrollabletab"
    app:tabMinWidth="105dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.47"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.125"
    app:tabMode="scrollable"
    <!-- 替换为文字颜色选择器 -->
    app:tabTextColor="@drawable/tab_text_color_selector"
    <!-- 设置Tab背景选择器 -->
    app:tabBackground="@drawable/tab_background_selector"
    <!-- 隐藏默认指示器（如果不需要的话） -->
    app:tabIndicatorHeight="0dp"/>

4. 补充颜色资源

在res/values/colors.xml中添加需要的颜色：

<color name="tab_selected_bg">#2563EB</color> <!-- 示例蓝色背景 -->
<color name="tab_unselected_bg">#FFFFFF</color> <!-- 示例白色背景 -->
<color name="tab_selected_text">#FFFFFF</color> <!-- 选中时白色文字 -->
<color name="tab_unselected_text">#6B7280</color> <!-- 未选中时灰色文字 -->

说明

不需要修改Kotlin代码，TabLayout会自动根据选中状态切换样式
如果需要调整Tab的内边距，可给TabLayout添加app:tabPaddingStart、app:tabPaddingEnd等属性
若要保留指示器，可去掉tabIndicatorHeight="0dp"，并设置tabIndicatorColor匹配选中背景色

内容的提问来源于stack exchange，提问作者Raja Azrol Alimi