如何自定义Firebase UI手机号认证Spinner样式 实现深色弹窗白字并兼容低版本？

在定制Firebase UI手机号认证相关的Spinner样式时，我们长期没有找到清晰的官方实现路径——翻遍官方代码仓库，既没有梳理明确的样式实现链路，也没有发布关于自定义Spinner的规范文档。我们的核心需求非常明确：仅通过重写FirebaseUI现有样式资源，实现Spinner弹出对话框为深色背景、下拉列表项文字为白色的效果，不做任何侵入式的源码修改。

第一次尝试的无效实现 #

我们最初编写了如下XML样式代码：

<style name="FirebaseUI.CountrySpinner">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:drawablePadding">10dp</item>
    <item name="android:spinnerDropDownItemStyle">@style/CustomSpinnerItemStyle</item>
</style>

<style name="CustomSpinnerItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
    <item name="android:textColor">@android:color/white</item>
    <item name="backgroundColor">@color/colorPrimaryDark</item>
</style>

这套实现完全达不到预期，下拉弹窗的样式没有任何变更。

第二次尝试的半成功实现 #

之后我们调整了样式覆写的层级，编写了如下代码：

<style name="AuthStyle" parent="FirebaseUI">
    <!-- 覆盖全局主题配色 -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!-- Spinner下划线颜色配置 -->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <item name="android:windowBackground">@color/colorPrimary</item>

    <item name="android:textColorTertiary">@android:color/white</item>
    <item name="android:buttonStyle">@style/AuthButton</item>
    <item name="android:spinnerStyle">@style/AuthSpinner</item>
</style>

<style name="AuthSpinner" parent="FirebaseUI.CountrySpinner">
    <item name="android:textColor">@android:color/white</item> <!-- Spinner占位文本颜色 -->
    <item name="itemTextColor">@android:color/white</item>
    <item name="android:popupBackground">@color/colorPrimaryDark</item>
    <item name="android:colorBackground">@color/colorPrimaryDark</item>
</style>

完成样式编写后，我们通过如下代码将自定义主题绑定到AuthUI的登录流程中：

AuthUI.SignInIntentBuilder builder = AuthUI.getInstance().createSignInIntentBuilder()
            .setTheme(R.style.AuthStyle)
            .setIsSmartLockEnabled(true)
            .setAvailableProviders(getProviderList());

这套方案的效果已经接近预期，但存在两个待解决的问题：

• 样式覆写后Spinner自带的下划线消失
• 下拉箭头与相邻文本的间距过近，需要调整到合适的距离

另外补充一个兼容性踩坑记录：之前我们尝试让AuthStyle直接继承ThemeOverlay.AppCompat.Dark，可以快速达到目标样式效果，但这种方案的兼容性极差，仅在SDK 30及以上版本的设备上正常生效，SDK 21等低版本设备依旧会出现样式异常。

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