Firebase-UI only lets you override the theme of logging/sign up screens but not override the entire xml files

It would be good to be able to override the whole xml to give custom design to log in/sign up screens. Now it lets you only override the colors with settheme

AuthUI.getInstance().createSignInIntentBuilder().setProviders(
                        AuthUI.EMAIL_PROVIDER,
                        AuthUI.FACEBOOK_PROVIDER)
                        **.setTheme(R.style.SuperAppTheme)**
                        .build(),
                RC_SIGN_IN);

which makes it quite limited in terms of customization cause I can’t even put the logo of my up on my authentication screens…

[cutiko]

[UPDATE: 2017/05/11]

According to the improvements in the Firebase-Ui-auth I have updated this snippet to be use as a guide to customize the login SEE THE GIST

Sorry for taking so long.

[ORIGINAL POST BELOW]

@kumarkeviv you can change the EditText color, but it seems there is some clarification needed.

Material Design wraps EditText with a android.support.design.widget.TextInputLayout so the hint is animated and still visible on user focus. The TextInputLayout will take the color for the hint and for the underline using the colorAccent provided in the theme (also use other attributes such as control highlight, etc).

So you dont have to change the EditText color, what you have to do is provide the right theme. That will do half the job, the second part is to target the widget specific style, by overriding it. I have to test the following in the new release but it was working in the 0.3 version:

First provide a general theme, please notice how the attributes using the colorWhite, thoose are the ones the TextInputLayout will use. Also, notice how a drawable for login is used. I will come back to this right away. Also, this is the common FullscreenTheme Android Studio auto generates when the FullscreenActivity is created I just took advantage of it:

<style name="FullscreenTheme" parent="AppTheme">
        <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="android:windowBackground">@drawable/bg_login</item>
        <item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
        <item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorControlNormal">@color/colorWhite</item>
        <item name="colorControlActivated">@color/colorWhite</item>
        <item name="colorControlHighlight">@color/colorWhite</item>
    </style>

    <style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/colorPrimary</item>
    </style>

So you can create a beautiful background with a photo and a logo over it by using drawables, like this (name this file bg_login, is referenced above):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/cool_photo"/>

    <item android:top="120dp">
        <bitmap
            android:src="@mipmap/your_logo"
            android:gravity="top|center_horizontal" />
    </item>

</layer-list>

Then you have to target the specific styles for the widgets we are discussing. Here, the father theme for FirebaseUi is overwritten, then every other specific theme take it as a parent to inherit the appearance:

<style name="FirebaseUI.EditText">
        <item name="android:paddingBottom">14dp</item>
        <item name="android:paddingTop">14dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="colorControlActivated">@color/colorWhite</item>
        <item name="colorControlHighlight">@color/colorWhite</item>
        <item name="android:textColorHint">@color/colorWhite</item>
        <item name="android:textColor">@color/colorWhite</item>
    </style>

    <style name="FirebaseUI.Text.TextInputLayout" parent="@style/FirebaseUI.EditText" />

    <style name="FirebaseUI.Text.HintText" parent="@style/FirebaseUI.EditText" />

This is how my login looks like:

You will have to tweak the logo position or color to make it perfect, but this should give you a start.

Now that I have post this, I realize this maybe should be in StackOverflow, please @samtstern correct me if I have done something wrong.

Hope to help.

[kumarkeviv]

At-least could you please provide ability to change color of edit-text which comes by default black and is nearly invisible when we choose dark background. It makes signing up with EMAIL-ID as nightmare.