Android中TabLayout图标颜色异常还原及图标尺寸调整问题求助

一、恢复SVG图标的原始颜色 #

你遇到的图标变灰问题，本质是TabLayout默认会对图标应用tint（着色器）——尤其是未选中状态下会套用灰色滤镜，而SVG作为矢量图会完全继承这个着色规则，导致原始颜色丢失。这里给你两种解决思路：

方法1：完全取消图标着色（保留原始颜色）

在TabLayoutMediator的回调中，给每个Tab设置图标后直接清除着色列表，让图标显示原本的SVG颜色：

TabLayoutMediator(tablayout, viewpager) { tab, position ->
    tab.text = tabTitles[position]
    val icon = ContextCompat.getDrawable(this, tabIcons[position])
    // 清除默认着色，恢复SVG原始颜色
    icon?.setTintList(null)
    tab.icon = icon
}.attach()

方法2：自定义选中/未选中的颜色（保留状态区分）

如果你希望选中和未选中的图标有颜色差异，但不想用默认灰色，可以自定义状态颜色列表：

1. 先在res/color目录下创建tab_icon_color.xml：

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

2. 然后在代码中应用这个颜色列表：

TabLayoutMediator(tablayout, viewpager) { tab, position ->
    tab.text = tabTitles[position]
    val icon = ContextCompat.getDrawable(this, tabIcons[position])
    icon?.setTintList(ContextCompat.getColorStateList(this, R.color.tab_icon_color))
    tab.icon = icon
}.attach()

二、调整TabLayout图标的尺寸 #

TabLayout默认图标尺寸受系统限制，最可靠的自定义方式是使用自定义Tab布局：

步骤1：创建自定义Tab布局（比如tab_custom_layout.xml）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="28dp" <!-- 这里设置你想要的宽度 -->
        android:layout_height="28dp" <!-- 这里设置你想要的高度 -->
        android:layout_marginBottom="4dp"/>

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"/>
</LinearLayout>

步骤2：在代码中加载自定义布局并设置到Tab

TabLayoutMediator(tablayout, viewpager) { tab, position ->
    // 加载自定义布局
    val customView = LayoutInflater.from(this).inflate(R.layout.tab_custom_layout, null)
    // 设置图标和标题
    val tabIcon = customView.findViewById<ImageView>(R.id.tab_icon)
    val tabTitle = customView.findViewById<TextView>(R.id.tab_title)
    
    val icon = ContextCompat.getDrawable(this, tabIcons[position])
    icon?.setTintList(null) // 可按需取消着色或自定义颜色
    tabIcon.setImageDrawable(icon)
    tabTitle.text = tabTitles[position]
    
    // 将自定义View绑定到Tab
    tab.customView = customView
}.attach()

关于SVG在ImageView正常、TabItem变灰的疑问 #

没错，这就是TabLayout的默认行为导致的：ImageView默认不会对SVG应用tint，但TabLayout的TabItem会自动给图标加上默认的状态着色（选中为主题色，未选中为灰色），所以才出现显示差异——解决上面的tint问题就能让图标在Tab中恢复正常显示。

内容的提问来源于stack exchange，提问作者Aagam Shah