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

[juanlet]

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

[samtstern]

Thanks for the feedback. We want to allow more customization but it's also important to make sure the UI is predictable so that the library can have consistent behavior.

For your particular request of showing your company's icon, try the setLogo function which is demonstrated in the sample app.

On Sun, Jul 31, 2016, 1:49 PM juanlet notifications@github.com wrote:

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/firebase/FirebaseUI-Android/issues/229, or mute the thread https://github.com/notifications/unsubscribe-auth/AIEw6sHS__LF9IUvxCiU5R2otB5ytgurks5qbOAvgaJpZM4JZFQa .

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

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

Thanks @cutiko , You are a life saver.

[FahadSaleem]

@cutiko you said you can create a beautiful background with a photo and a logo over it by using drawables, like this:

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

I can't figure out what is this file that you're referring to? I mean to say is this an xml in drawables folder? If so how can I use it in the main activity itself

[cutiko]

@FahadSaleem yes it is a file in the drawables folder, since it is the same for every screen density just create it in the general drawable folder.

Let me give a brief explanation about the content in the file, maybe that will help. The layer-list element will put every child over each other from bottom to top, this means the last child have the higher z-index. In this case there are two childs, the first is an item using the drawable property to call a .png file in the mipmap folder. Since it is gonna change depending on screen density this cool_photo file will have different versions in each mipmap folder. This item cool_photo is the background. Then the next child in the layer-list is an item using the property top, which is margin-top, to position it. Inside this item you can find the logo (another png with different versions for dps). This second item is over the first. I have had some hard times learning about the xml properties for Android but a good start is this old hack.

It is a good idea to use it in the activity intended for the login, since you have to execute the firebase code somewhere. Go to the login activity layout and in the root view, add the property background referencing it. This way if for any reason there is a small span of time while the firebase ui code is being executed the user wont see the change.

But to make this file the firebase background, you have to set it in the theme that is pass to the firebase method, in this line:

<item name="android:windowBackground">@drawable/bg_login</item>

I have fix the original answer so now the reference is explicitly.

[FahadSaleem]

Thanks, I have another question. When I try to run the code

    <item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
    <item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>

It gives an error saying no resource found for the given name metaButtonBarStyle ..

I am new to android development, so apology in advance if this seems like a very beginner question.

[cutiko]

Greetings again

This is reported here https://github.com/firebase/FirebaseUI-Android/issues/145 The solution is, add this in your style.xml:

<style name="FirebaseUI.Button" parent="@style/FullscreenTheme">
        <item name="android:background">@drawable/bg_btn_accent</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_gravity">right</item>
        <item name="android:layout_height">36dp</item>
        <item name="android:layout_margin">8dp</item>
        <item name="android:textColor">@color/colorWhite</item>
        <item name="android:textAllCaps">true</item>
        <item name="android:radius">2dp</item>
    </style>

Im glad to help, but please do some search before asking,

[FahadSaleem]

Apologies. I didn't fully research.

Lastly, what is the way to position/edit the Facebook, Google and Email sign in buttons on the AuthUI activity?

[sipersso]

@cutiko how do you get the background image to scale properly? What does the xml of the cool photo look like?

[cutiko]

@sipersso The xml for the cool_photo is bg_login, here is a snippet with the real assets so you can put some hands on and then adapt what you need https://gist.github.com/cutiko/9942f76504cbb67c8d04ee6632286dbc

[sipersso]

@cutiko But that solution does not take care of different aspect ratios right? It should work if screen has the aspect ratio of the image. Tried with an image that doesn't have the same aspect ratio as the screen and then it gets squashed. Not sure if it is possible to make a background drawable to be centered and fill/crop without distorting proportions.

[sipersso]

Looking at other resources available for creating a splash, it seems as if using the windowBackground with a drawable is not the best, since it does not allow for scaling up without distorting the aspect ratio. You would need to use an ImageView with scaleType set to cropCenter to scale the image in a good way and this is, as far as I know, not possible to do via themes and android:windowBackground as in the example by @cutiko.

As far as customization support I think you would get very far by just having the option to add a logo (which already exists) and just be able to set a background image, like for example.

AuthUI.getInstance().createSignInIntentBuilder()
.setBackgroundImage(R.drawable.my_background_image)

[cutiko]

I have to disagree, part of Android development is using the right images. If you look at the gist, there are images for every density and image ratio is optimized for portrait. Actually, this is a common practice in development in general. HTML/CSS will also deform images if the width or height is not adequate for the allocated space.

Since the images must always be optimized, can I suggest adding orientation portrait for the activity in the manifest. I did it, cause it make sense to me that a login activity is always portrait, considering the user can choose to type mail and password it would be uncomfortable to do it so in landscape.

[sipersso]

Sure, you need to use the right images, and yes the images in the gist is optimized for portrait, but not all portrait devices have the same aspect ratio. That is why you can add different images for long and not-long devices, but even then you can't really be sure. In addition, the images in the gist only work if they are larger than the screen in pixels. If you have a device that has a higher resolution than 1440x2560 for the xxxhdpi, it will just be centered and not cover the edges. So I don't think the solution is bulletproof without support for scaling.

[cutiko]

It seems we are in a pikle then, centerCrop and center properties of ImageView neither solve the problem, if the image don't fit the designated space then the image is not shown perfectly (neither does, matrix or fit, etc.).

I would like to illustrate my case with Spotify. The next image is taken from the Spotify app, they have to set albums images but that doesn't mean it is gonna fit perfectly.

So I think, asking for more to Firebase-ui is not right since this is a generalized Android problem not a specific library problem.

[sipersso]

It is not an Android problem. A full screen image that is scaled up and crops the edges is trivial to do. All you need to have is an ImageView and use centerCrop and you will get a full screen that is full screen and keeps the aspect ratio.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/background_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop" 
    android:src="@drawable/your_image" />

<LinearLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>

It will crop either the sides or the top/bottom if the aspect ratio of the screen is not the same as the image, but I think that is ok. It's just like the css background-size cover, the standard way to provide full screen background images in the html world.

The Spotify example is not a full screen image and it doesn't use centerCrop. Not sure how it is related to this.

[cutiko]

"crops the edges" and "It will crop either the sides or the top/bottom" that is exactly my point, you need to have good images to display them correctly.

And I want to add, the objective of firebase-ui is to provide a simple implementation of Firebase services with some partial customization. If you use firebase-ui-auth then you get the simplest login using social networks, password recovery and smartlock. If the constraint involving it doesn't fit your case then you have to use firebase-auth and do everything by yourself. In any dependency there is a trade off.

So I will insist, your suggestion is out of scope.

[sipersso]

But your solution simply isn't bullet proof. You can't provide the correct images for all possible sizes. It's just not possible. Either you get cropping or distorted images in some cases. There is no other way.

But yeah, with firebase-ui-auth you are pretty much stuck with only having a backgroundcolor, and maybe thats fine.

[samtstern]

Hey all. Wanted to chime in. I love the discussion going on here, great to see users supporting each other and coming up with solutions/workarounds.

In the short term (v1.0.0) our main goal is stability. For this reason we won't be adding more UI customization right away, as they sort of move us in the opposite direction (it's harder to stabilize if it is more customizable).

That said I am listening to this thread and threads like it, once we have stabilized the library sufficiently we can go back to this sort of proposal and try to give more customization.

Thanks for the patience!

[newmskywalker]

What about just creating an xml layout with the same name as the layout for the login view? For example, auth_method_picker_layout.xml.

I just copied that layout into my app's layouts and changed the styling and added the elements I needed.

[samtstern]

@j-mateo that will work but will be very fragile! We don't consider the XML layout to be a public API so we could make breaking changes to layout names / view IDs between versions without notice. If you do take that route, make sure to be very careful when upgrading.

[cutiko]

Greetings, sorry for bringing back to life this old topic.

Im working in a new app using auth and I want to create an immersive full screen, which I did for my activity... but then I remembered that wont work with ui-auth cause I have to pass the theme. I know there will be more customization options in the future, so I want to share this as feedback, and maybe somebody can give me some help :)

I started with the provided FullscreenActivity and then removed the animations, leaving me with this:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        getSupportActionBar().hide();
        View mContentView = findViewById(R.id.loginRoot);
        mContentView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LOW_PROFILE
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
    }

Android documentation lead me to the same path

I know I can hide the menu with:

    <style name="FullscreenTheme.LoginTheme">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@color/colorPrimaryDark</item>
    </style>

And then inside onCreate call the auth, with this:

startActivityForResult(
                AuthUI.getInstance()
                        .createSignInIntentBuilder()
                        .setProviders(Arrays.asList(
                                new AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build(),
                                new AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build(),
                                new AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build(),
                                new AuthUI.IdpConfig.Builder(AuthUI.TWITTER_PROVIDER).build()))
                        .setTheme(R.style.FullscreenTheme_LoginTheme)
                        .build(),
                RC_SIGN_IN);

But that won't be immersive as the Activity

Can I do this in somehow but in the style? Please consider this for future visual customizations, thanks.

[r3dm4n]

How can we set the orientation to vertical ? It does't seem to listen in the Manifest.

[cutiko]

@r3dm4n can you explained yourself further please?

If you want to set the orientation exclusively to portrait, as fas as I know you can't. If you see, the entire ui-auth is based on startActivityActivityForResult, I check the code and it seems that there is a KickOffActivity being intent inside that builder. So I thought a dirty fix could be something like this:

        <activity
            android:name="com.firebase.ui.auth.KickoffActivity"
            android:configChanges="orientation|keyboardHidden|screenSize"
            android:screenOrientation="portrait"/>

It would be dirty because above the people from Firebase warn about not overriding xml layouts, this is a similar approach. Bottomline, it doesn't matter because it doesn't even work.

If I'm following the right path, and that is what you want, prevent the screen rotation on device rotation, then it seems to me a fair request for futures customizations. Some developers might want to provide a user experience where the login is always portrait. This goes against basic android guidelines where developers should provide both experience for the user, portrait and landscape, but there are many possibilities in software development. Just my humble opinion.

[r3dm4n]

Let me make this clearer. I can't get my app to remain in portrait mode only for the sign in process, for which I use FirebaseUI.

This got me thinking, what layout is FirebaseUI actually using ? I asked about Snackbars, because on a Snackbar you have to specify a layout, which is ?

[r3dm4n]

I've posted the issue here as well, if there's any advice .. please let me know. http://stackoverflow.com/questions/41607336/firebaseui-login-orientation

I've tried the fix you mentioned, it's still not working. It's still going to landscape mode.

It's really unbelievable I can't set the orientation to portrait-only. If anyone has any advice ...please share.

If it's not possible to set the orientation to portrait only, how can I provide a background in .setTheme that looks good in landscape mode as well ?

[aaronlelevier]

@cutiko I just want to say thank you for the dialogue and examples that you gave above. I was able to add an image and style the login from your examples. Thanks!

[sasadmurtaza]

Facing the same rotation problem.Is there any solution to it so I can set the activity to portrait mode only?

Another thing,I am using following style for the EditText

<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">@android:color/white</item>
        <item name="colorControlHighlight">@android:color/white</item>
        <item name="android:textColorHint">@android:color/white</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

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

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

but it is still showing the black color instead of white.Anybody has any idea?

[LeeHounshell]

I'm trying to get FirebaseUI to work with very small screens.

An Android Studio emulator configured as Nexus_7_2012_API_22 fails to allow login because the login button is off-screen. Also the EditText views for login and password do not listen for KEYCODE_ENTER, so closing the keyboard also fails to login or move to the next prompt. This is not user friendly.

Has anyone customized/fixed this? Below is an example screen where it is impossible to login.

[vivekkumar12hpe]

@cutiko Facing the same issue (unable to override the Edit-text color and Hint) with Android 7.1.1 working fine for older version.

Added the following style already: `

<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">@android:color/white</item>
    <item name="colorControlHighlight">@android:color/white</item>
    <item name="textColorHint">@android:color/white</item>
    <item name="textColor">@android:color/white</item>
</style>

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

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

`

[ghost]

does all of that code work simply by putting those pieces of code into the styles.xml or do we need to call anything in the java files?

[willemevenwel]

@cutiko I'm starting and Android App for my company.

I saw your comments here.

And believe you might be able to assist me.

I am using FirebaseUI to create my Login flow process.

I set the theme in code: startActivityForResult( AuthUI.getInstance() .createSignInIntentBuilder() .setTheme(R.style.FirebaseLoginTheme)

And have these styles configured:

<style name="FirebaseUI.Text">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:fontFamily">sans-serif</item>
    <item name="android:textColor">@android:color/white</item>
</style>

<style name="FirebaseUI.Text.Link">
    <item name="android:textColor">@color/colorSecondary</item>
</style>

However upon choosing "Sign in with Phone", the label which appears on the next view and reads "By tapping Verify Phone....", is black, I need this white, but just cant get the correct style for this, please can you assist me.

All i want is for this label to be white... ;(

Kind Regards

[cutiko]

Greetings @willemevenwel

I have to disclaim, haven't used it for phone verification yet neither try it with the new 2.0 version. But I like to help, so this is what I did.

I searched the text you provided back to the string file, that took me to the fragment file, and then I could find the button by the id in the layout. So my best guess is:

• style="@style/FirebaseUI.Text.BodyText" should be the style you need to override
• It is here, in this file

If I have failed, do the same procedure :)

[willemevenwel]

@cutiko Thanks so much, you actually helped me now see how the style associated in the library's layout file: that I can just override it if I have style in the same name.

[willemevenwel]

@cutiko infact,

<style name="FirebaseUI.Text.BodyText">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@android:color/white</item>
</style>

...did not make the text white

I had to apply FirebaseLoginTheme, and in FirebaseLoginTheme set the textColorTertiary:

<style name="FirebaseLoginTheme" parent="FirebaseUI">
        <item name="android:windowBackground">@drawable/city_backdrop</item>
        <item name="windowActionBar">true</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/colorAccent</item>
        <item name="colorControlNormal">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="colorControlHighlight">@color/white</item>
        <item name="android:textColorTertiary">@color/white</item>
</style>

But still thanks for your help.

Here is my complete style:

    <style name="FirebaseLoginTheme" parent="FirebaseUI">
        <item name="android:windowBackground">@drawable/city_backdrop</item>
        <item name="windowActionBar">true</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorButtonNormal">@color/colorAccent</item>
        <item name="colorControlNormal">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="colorControlHighlight">@color/white</item>
        <item name="android:textColorTertiary">@color/white</item>
    </style>

    <style name="FirebaseUI.Text">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

    <style name="FirebaseUI.CountrySpinner">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="FirebaseUI.TextInputEditText.PhoneField">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">@color/white</item>
    </style>

And I apply it with:

ActivityOptions options = ActivityOptions.makeCustomAnimation(getApplicationContext(), R.anim.trans_left_in, R.anim.trans_left_out); //to use your custom animation to show the Firebase SignIn(Intent) Activity
                    startActivityForResult(
                        AuthUI.getInstance()
                                .createSignInIntentBuilder()
                                .setTheme(R.style.FirebaseLoginTheme)
                                .setLogo(R.drawable.mycc_logo)
                                .setAvailableProviders(Arrays.asList(
                                        new AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build(),
                                        new AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build(),
                                        new AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build(),
                                        new AuthUI.IdpConfig.Builder(AuthUI.PHONE_VERIFICATION_PROVIDER).build()))
                                .setIsSmartLockEnabled(false)
                                .setTosUrl("https://www.termsand.conditions")
                                .build()
                        ,RC_SIGN_IN
                        ,options.toBundle()
                    );

[samtstern]

Closed #776 as a duplicate issue. That issue requests ability to override animations between FirebaseUI screens.

[willemevenwel]

I've been learning how to customize most of the FirebaseUI components that have made life very easy.

However how can I change the text input for the confirmation code on phone number auth:

<com.firebase.ui.auth.ui.phone.SpacedEditText android:id="@+id/confirmation_code"

[shivavattem]

Hi, Does anyone knows IOS version of customization ..? it seems they haven't released anything related to swift

[100rabhkr]

Hello can anyone tell me how can I change background colour and shape of gmail and phone auth button. Thank you

[samtstern]

I am going to close this issue since I don't think a "fix" will ever come. We may add more theme options but we will never allow a total XML override since quality control would be impossible.

Thank you to everyone who has participated int this thread. You have taught each other (and me) a lot about how far customization can be pushed! Even though this issue will be "closed" feel free to keep using this thread to share tips and tricks.

If you'd like to advocate for a specific customization option, let's start a new issue.

[minhajul-islam]

is it possible to setup on a fragment? if possible please help

mAuthStateListener = new FirebaseAuth.AuthStateListener() { @Override public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) { FirebaseUser user = firebaseAuth.getCurrentUser(); if (user != null) { // User is signed in onSignedInInitialize(user.getDisplayName()); } else { // User is signed out onSignedOutCleanup(); startActivityForResult( AuthUI.getInstance() .createSignInIntentBuilder() .setIsSmartLockEnabled(false) .setProviders( AuthUI.EMAIL_PROVIDER, AuthUI.GOOGLE_PROVIDER) .build(), RC_SIGN_IN); } } };

[100rabhkr]

Can we customise style for iOS?

[kparitosh21]

Can someone help now? Its urgent!!

[rroslan]

I am using out of the box phone authentication. Is it possible to have editText and radio button on the UI

[arjunnairmattathil]

Can we add a description text below the logo

[devzer01]

hi guys, any update on setting landscape? the decision of users "feelings" should be decided by the app developers UX, if the library developer make assumptions on a user "feelings" then it makes app users UX broken, thus the use of FirebaseUI for a quick start irrelevant. Can you please let the app developer decide the user feelings using "data" ?

[SUPERCILEX]

A few things:

• This isn't based on feelings, it's an official Android recommendation
• We don't control Google/Facebook/Twitter so it wouldn't work anyway
• If you want all activities locked, why not just add an activity listener in a custom application and force it at runtime?

[samtstern]

We have a proposal to consider more customization in #1477 if anyone would like to comment.