Firebase UI Phone Auth Spinner styling

Question

We're having a difficult time for so long working with how to style Firebase UI. We tried to look in the repo but it seems there is no clean solution nor proper documentation on customizing Spinner.

We need to make Spinner background pop up dialog dark while text color of items is white by just overriding the existing style of FirebaseUI.

This is our XML code

 <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>

The above styling will give you this

Then tried other approach as well

<style name="AuthStyle" parent="FirebaseUI">

    <!--Override action bar and status bar-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!--Spinner underline color-->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <!--Override action bar and status bar-->
    <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 placeholder text color-->
    <item name="itemTextColor">@android:color/white</item>
    <item name="android:popupBackground">@color/colorPrimaryDark</item>
    <item name="android:colorBackground">@color/colorPrimaryDark</item>
</style>

Then apply the theme

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

The above styling will give you this

The only difference is the underline in spinner disappear when directly overriding it. It is good also to if we can adjust the down arrow as it seems really close to the text.

PS

Originally AuthStyle extends ThemeOverlay.AppCompat.Dark giving us the required style but only to newer devices with SDK 30 and above while leaving the older version such as here SDK 21 with the same issue.

Answer 1

After a long battle and frustration I came to a solution where it works on API 21, API 26, API 29 and possibly above by extending Theme.AppCompat as parent.

<style name="AuthStyle" parent="Theme.AppCompat">

    <!--Override action bar and status bar-->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!--Spinner or non focus field underline color-->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <!--Override main background-->
    <item name="android:windowBackground">@color/colorPrimary</item>

    <!--Description text color-->
    <item name="android:textColorTertiary">@android:color/white</item>

</style>

<!--Override-->
<style name="FirebaseUI.TextInputEditText.PhoneField">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">14sp</item>
    <item name="android:inputType">number</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorHint">@android:color/white</item>
</style>

<!--Override-->
<style name="FirebaseUI.CountrySpinner">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@android:color/white</item> <!--Spinner placeholder text color-->
    <item name="android:backgroundTint">@color/colorAccent</item> <!--Spinner underline and arrow color-->
</style>

The above style if applied will look like this depending on you color values.

Though I cannot change the pop up background and the item list no matter what attempts, this will serve well as long as the country that will be added in Spinner is readable across all API version.