Android开发：如何实现背景透明的底部TabLayout（附XML代码）

问题根源 #

你当前配置失效有两个核心原因：

• app:tabBackground属性仅控制TabLayout内部每个单独tab选项的背景，不会修改TabLayout控件本身的底色。Material组件库的TabLayout默认会读取主题里的colorSurface值作为自身背景，哪怕内部tab透明，控件本身的底色依然存在。
• 你的RelativeLayout没有给TabLayout设置底部对齐规则，当前TabLayout默认会停靠在布局顶部，不会出现在底部位置。另外你在根布局写的app:tabBackground属于无效属性，不会被子控件继承，可以直接删掉。

可直接落地的修复步骤 #

• 第一步：修改布局文件，给TabLayout补全自身透明属性和底部对齐规则，替换原有布局代码如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#90a0c020" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/transparent"
        app:tabBackground="@android:color/transparent"
        app:backgroundTint="@android:color/transparent"
        android:hapticFeedbackEnabled="true"
        android:elevation="0dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"/>

</RelativeLayout>

• 第二步：如果替换后依然有浅灰色底色，检查应用使用的主题父类：如果用的是Theme.MaterialComponents.DayNight系列主题，需要额外在TabLayout属性里加上app:tabIndicatorFullWidth="false"，避免指示器默认撑满宽度带来的视觉色块，同时确认没有在主题里给TabLayout设置全局background属性。
• 第三步（效果优化）：可以通过app:tabTextColor设置未选中tab的文字颜色，app:tabSelectedTextColor设置选中tab的文字颜色，app:tabIndicatorColor设置底部滑动指示器的颜色，完全匹配悬浮透明的预期效果。

避坑提示：如果你使用的是Material 1.2.0以上版本，不要给TabLayout单独设置半透明android:background，配合app:backgroundTint="@android:color/transparent"才能完全去掉组件默认的材质底色。

内容的提问来源于stack exchange，提问作者Anil Thakur