New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
juanlet opened this Issue Jul 31, 2016 · 49 comments

Comments

Projects
None yet
@juanlet

juanlet commented Jul 31, 2016

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

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Jul 31, 2016

Member

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
#229, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AIEw6sHS__LF9IUvxCiU5R2otB5ytgurks5qbOAvgaJpZM4JZFQa
.

Member

samtstern commented Jul 31, 2016

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
#229, or mute the
thread
https://github.com/notifications/unsubscribe-auth/AIEw6sHS__LF9IUvxCiU5R2otB5ytgurks5qbOAvgaJpZM4JZFQa
.

@kumarkeviv

This comment has been minimized.

Show comment
Hide comment
@kumarkeviv

kumarkeviv Aug 1, 2016

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.

kumarkeviv commented Aug 1, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Aug 2, 2016

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

cuatro

seis

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.

cutiko commented Aug 2, 2016

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

cuatro

seis

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

This comment has been minimized.

Show comment
Hide comment
@kumarkeviv

kumarkeviv Aug 2, 2016

Thanks @cutiko , You are a life saver.

kumarkeviv commented Aug 2, 2016

Thanks @cutiko , You are a life saver.

@alfongj alfongj added the auth label Aug 2, 2016

@FahadSaleem

This comment has been minimized.

Show comment
Hide comment
@FahadSaleem

FahadSaleem Aug 25, 2016

@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

FahadSaleem commented Aug 25, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Aug 25, 2016

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

cutiko commented Aug 25, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@FahadSaleem

FahadSaleem Aug 25, 2016

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.

FahadSaleem commented Aug 25, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Aug 25, 2016

Greetings again

This is reported here #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,

cutiko commented Aug 25, 2016

Greetings again

This is reported here #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

This comment has been minimized.

Show comment
Hide comment
@FahadSaleem

FahadSaleem Aug 26, 2016

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?

FahadSaleem commented Aug 26, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 13, 2016

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

sipersso commented Sep 13, 2016

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

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Sep 13, 2016

@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

cutiko commented Sep 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 13, 2016

@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 commented Sep 13, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 14, 2016

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)

sipersso commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Sep 14, 2016

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.

cutiko commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 14, 2016

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.

sipersso commented Sep 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Sep 14, 2016

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.

screenshot_2016-08-15-20-29-36

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

cutiko commented Sep 14, 2016

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.

screenshot_2016-08-15-20-29-36

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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 15, 2016

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.

sipersso commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Sep 15, 2016

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

cutiko commented Sep 15, 2016

"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

This comment has been minimized.

Show comment
Hide comment
@sipersso

sipersso Sep 15, 2016

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.

sipersso commented Sep 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Sep 15, 2016

Member

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!

Member

samtstern commented Sep 15, 2016

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!

@alfongj alfongj added the priority:p2 label Sep 20, 2016

@j-mateo

This comment has been minimized.

Show comment
Hide comment
@j-mateo

j-mateo Oct 20, 2016

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.

j-mateo commented Oct 20, 2016

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

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Oct 21, 2016

Member

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

Member

samtstern commented Oct 21, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Dec 14, 2016

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.

cutiko commented Dec 14, 2016

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

This comment has been minimized.

Show comment
Hide comment
@r3dm4n

r3dm4n Jan 12, 2017

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

r3dm4n commented Jan 12, 2017

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

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Jan 12, 2017

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

cutiko commented Jan 12, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@r3dm4n

r3dm4n Jan 12, 2017

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 commented Jan 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@r3dm4n

r3dm4n Jan 12, 2017

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 ?

r3dm4n commented Jan 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@aaronlelevier

aaronlelevier Jan 21, 2017

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

aaronlelevier commented Jan 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@sasadmurtaza

sasadmurtaza Jan 24, 2017

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?

sasadmurtaza commented Jan 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@LeeHounshell

LeeHounshell Feb 18, 2017

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.

login_fail

LeeHounshell commented Feb 18, 2017

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.

login_fail

@vivekkumar12hpe

This comment has been minimized.

Show comment
Hide comment
@vivekkumar12hpe

vivekkumar12hpe Mar 30, 2017

@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="LoginTheme" parent="@style/FirebaseUI">
#ffc822
#FFC107
#CCFFC107
true
false
true
@null
@android:color/white
@android:color/white
@android:color/black
</style>

<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" />`

screenshot_20170330-173249
screenshot_20170330-173304

`

vivekkumar12hpe commented Mar 30, 2017

@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="LoginTheme" parent="@style/FirebaseUI">
#ffc822
#FFC107
#CCFFC107
true
false
true
@null
@android:color/white
@android:color/white
@android:color/black
</style>

<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" />`

screenshot_20170330-173249
screenshot_20170330-173304

`

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 26, 2017

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?

ghost commented Apr 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@willemevenwel

willemevenwel Jun 20, 2017

@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="FirebaseLoginTheme" parent="FirebaseUI">
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
@color/colorAccent
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@drawable/city_backdrop
true
true
@android:color/white
</style>

<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

willemevenwel commented Jun 20, 2017

@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="FirebaseLoginTheme" parent="FirebaseUI">
@color/colorPrimary
@color/colorPrimaryDark
@color/colorAccent
@color/colorAccent
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@android:color/white
@drawable/city_backdrop
true
true
@android:color/white
</style>

<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

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Jun 20, 2017

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

cutiko commented Jun 20, 2017

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

This comment has been minimized.

Show comment
Hide comment
@willemevenwel

willemevenwel Jun 21, 2017

@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 commented Jun 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@willemevenwel

willemevenwel Jun 21, 2017

@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()
                    );

willemevenwel commented Jun 21, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Jun 21, 2017

Member

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

Member

samtstern commented Jun 21, 2017

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

@willemevenwel

This comment has been minimized.

Show comment
Hide comment
@willemevenwel

willemevenwel Jun 28, 2017

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"

willemevenwel commented Jun 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@shivavattem

shivavattem Aug 20, 2017

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

shivavattem commented Aug 20, 2017

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

@100rabhkr

This comment has been minimized.

Show comment
Hide comment
@100rabhkr

100rabhkr Sep 13, 2017

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

100rabhkr commented Sep 13, 2017

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

@samtstern

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Sep 19, 2017

Member

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.

Member

samtstern commented Sep 19, 2017

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.

@samtstern samtstern closed this Sep 19, 2017

@MINHAJ10SUST

This comment has been minimized.

Show comment
Hide comment
@MINHAJ10SUST

MINHAJ10SUST Oct 4, 2017

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);
}
}
};

MINHAJ10SUST commented Oct 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@100rabhkr

100rabhkr Nov 17, 2017

Can we customise style for iOS?

100rabhkr commented Nov 17, 2017

Can we customise style for iOS?

@Lightning-Bug

This comment has been minimized.

Show comment
Hide comment
@Lightning-Bug

Lightning-Bug Dec 16, 2017

Can someone help now?
Its urgent!!

Lightning-Bug commented Dec 16, 2017

Can someone help now?
Its urgent!!

@rroslan

This comment has been minimized.

Show comment
Hide comment
@rroslan

rroslan Jan 28, 2018

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

rroslan commented Jan 28, 2018

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

@arjunnairmattathil

This comment has been minimized.

Show comment
Hide comment
@arjunnairmattathil

arjunnairmattathil Jun 25, 2018

Can we add a description text below the logo

arjunnairmattathil commented Jun 25, 2018

Can we add a description text below the logo

@devzer01

This comment has been minimized.

Show comment
Hide comment
@devzer01

devzer01 Sep 11, 2018

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

devzer01 commented Sep 11, 2018

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

This comment has been minimized.

Show comment
Hide comment
@SUPERCILEX

SUPERCILEX Sep 11, 2018

Collaborator

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

SUPERCILEX commented Sep 11, 2018

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

This comment has been minimized.

Show comment
Hide comment
@samtstern

samtstern Oct 9, 2018

Member

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

Member

samtstern commented Oct 9, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment