The email enter field in FirebaseUI is not visible when not focused, either when using the default or custom theme.

[bhuvnesh123]

Step 2: Describe your environment

• Android device: Sansung Galaxy F22
• Android OS version: Android 13
• Google Play Services version:4.3.8
• FirebaseUI version:8.0.2

Step 3: Describe the problem:

I have recently updated the Firebase versions in my project to recent versions:

"com.google.firebase:firebase-firestore-ktx:24.4.5"
"com.google.firebase:firebase-analytics:21.2.1"
"com.firebaseui:firebase-ui-auth:8.0.2"
"com.google.firebase:firebase-bom:31.4.0"

After updating, I am getting a UI issue in Firebase AuthUI. The email enter field, when not focused, is not visible, as shown in the screenshot, even though I have colour controls in styles. It's visible only when I tap on it to activate it.Even if i don't use custom theme ,but use default theme through setTheme(AuthUI.getDefaultTheme()) I got same issue

When using custom theme ,I am using below style :

<style name="LoginTheme" parent="FirebaseUI">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorPrimaryVariant">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorButtonNormal">@color/colorAccent</item>
    <item name="colorControlNormal">@android:color/black</item>
    <item name="colorControlActivated">@android:color/black</item>
    <item name="colorControlHighlight">@android:color/black</item>
    <item name="android:textColor">@android:color/black</item>
    <item name="android:textColorPrimary">@android:color/black</item>
    <item name="android:textColorSecondary">@android:color/black</item>
    <item name="android:windowBackground">@android:color/white</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:textColorHint">@android:color/black</item>
    <item name="android:statusBarColor">@color/colorPrimaryDark</item>
</style>

Code:

   // Choose authentication providers
        val providers = arrayListOf(
            AuthUI.IdpConfig.EmailBuilder().build(),
            AuthUI.IdpConfig.GoogleBuilder().build()
        )

        // Create and launch sign-in intent
        val signInIntent = AuthUI.getInstance()
            .createSignInIntentBuilder()
            .setAvailableProviders(providers)
            .setTheme(R.style.LoginTheme)
            .setLogo(R.drawable.handshake) // Set logo drawable               
            .build()
        signInLauncher.launch(signInIntent)

When not focused

When focused

Steps to reproduce:

1. Add latest firebase auth ui to project
2. Click on Sign In With Email button

[MikeSim1]

This is the solution that sort of worked for me. I'm sure there are fixes to be made, but this got the field showing properly with a custom theme. Obviously change the colors as needed.

    <style name="FirebaseUI" parent="Theme.MaterialComponents">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/orange</item>
        <item name="colorPrimaryVariant">@color/black</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:windowBackground">@android:color/black</item>
        <item name="android:textColorHint">@android:color/darker_gray</item>
    </style>

    <style name="FirebaseUI.EditText" parent="FirebaseUI">
        <item name="android:editTextColor">@color/white</item>
        <item name="android:textColorHint">@color/white</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="FirebaseUI.TextInputLayout" parent="Widget.Design.TextInputLayout">
        <item name="android:textColorHint">@color/white</item>
    </style>

    <style name="FirebaseUI.Button" parent="FirebaseUI">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_gravity">end</item>
        <item name="android:textColor">@color/white</item>
    </style>