Android TabLayout无法读取colorPrimary 背景显示白色而非透明

问题表现 #

TabLayout 预期设置为透明背景，实际渲染显示为白色，无法正确读取colorPrimary属性的配置值，效果如下：
#

现有代码与配置 #

1. TabLayout 布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:backgroundTint="#5C328A"
    app:tabTextColor="@color/button_material_light"
    app:tabSelectedTextColor="@android:color/black"
    app:tabIndicatorColor="@android:color/white"
    app:tabGravity="fill"
    app:tabMode="fixed" />

2. colors.xml 配置 #

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="launcher_background">#FFFFFF</color>
    <color name="colorPrimary">@android:color/transparent</color>
    <color name="colorPrimaryDark">#E3E31E</color>
    <color name="colorAccent">#FF4081</color>
</resources>

3. 页面 XAML 布局代码 #

<Grid
    BackgroundColor="black"
    ColumnSpacing="0"
    HorizontalOptions="FillAndExpand"
    RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="8" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
    <!-- 下方为闭合标签 -->

4. MainActivity.cs 核心逻辑 #

protected override void OnCreate(Bundle savedInstanceState)
{
    AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.SetTheme(Resource.Style.MainTheme);

    base.OnCreate(savedInstanceState);

    global::Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
    global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);
    global::Xamarin.FormsMaps.Init(this, savedInstanceState);

    LoadApplication(new App(new AndroidInitializer()));
}

问题根因 #

三个容易忽略的配置冲突导致问题：

• android:backgroundTint属性优先级高于android:background，代码中在此属性设置了不透明色值，会直接覆盖透明背景的渲染效果，旧版Support库中即使tint设为透明也可能出现不透明底色bug。
• 给TabLayout直接设置的@style/ThemeOverlay.AppCompat.Dark.ActionBar主题自带不透明的ActionBar默认背景，会中断?attr/colorPrimary的属性查找链，导致读不到colors中配置的透明值，转而读取主题内置的默认底色。
• 引入的Xamarin.FormsMaterial库会在渲染层代码里强制给TabLayout设置Material规范的白色默认背景，优先级高于XML布局中配置的属性。

修复步骤 #

1. 移除TabLayout布局中的android:backgroundTint属性，不要通过tint设置背景相关效果。
2. 移除TabLayout上直接设置的android:theme属性，如果需要深色文字/状态栏效果，将主题设置到外层父布局，或单独通过TabLayout的tabTextColor、tabSelectedTextColor属性配置文字颜色即可。
3. 在styles.xml中新增TabLayout自定义样式，强制覆盖默认背景：

<style name="TransparentTabLayout" parent="Widget.Design.TabLayout">
    <item name="android:background">@android:color/transparent</item>
    <item name="backgroundTint">@android:color/transparent</item>
    <item name="android:elevation">0dp</item>
    <item name="tabIndicatorColor">@android:color/white</item>
</style>

4. 在TabLayout布局中引用该样式：style="@style/TransparentTabLayout"，同时加上app:elevation="0dp"去掉低版本下elevation渲染生成的白色阴影层。
5. 检查MainTheme样式配置，确认主题中没有额外覆盖colorPrimary属性，主题parent需使用Theme.AppCompat或Theme.MaterialComponents系列主题，避免属性查找失败。

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