Create a gist now

Instantly share code, notes, and snippets.

Embed
How to customize firebase-ui-auth for Android

Instructions

This is a snippet to customize Firebase-Ui-auth login. Thanks to the wonderfull people in Firebase-Ui.

  1. Download and add to your project this files
  1. Use the colors provided in colors.xml
  2. Copy paste the themes in the styles.xml
  3. Apply the theme and the logo in the java as the example in LoginActivity.java

This are the size of the background in pixels, so you can create your own:

  • mdpi: 360 x 640
  • hpdi: 540 x 960
  • xhdpi: 720 x 1280
  • xxhdpi: 1080 x 1920
  • xxxhdpi: 1440 x 2560

I'm still working in a solution to support correctly other devices like tablets, my first thought contemplate using the dimens still not sure if it is gonna be a dirty but quick fix

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#673AB7</color>
<color name="colorPrimaryDark">#512DA8</color>
<color name="colorPrimaryLight">#EDE7F6</color>
<color name="colorAccent">#7C4DFF</color>
<color name="colorSecondary">#FFC107</color>
</resources>
public class LoginActivity extends AppCompatActivity {
private static final int RC_SIGN_IN = 343;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//I rather using a list, this way handling providers is separeted from the login methods
List<AuthUI.IdpConfig> providers = Arrays.asList(
new AuthUI.IdpConfig.EmailBuilder().build(),
new AuthUI.IdpConfig.GoogleBuilder().build(),
new AuthUI.IdpConfig.FacebookBuilder().build()
);
startActivityForResult(
AuthUI.getInstance()
.createSignInIntentBuilder()
.setAvailableProviders(providers)
.setTheme(R.style.LoginTheme)
.setLogo(R.mipmap.logo)
.build(),
RC_SIGN_IN);
}
}
<resources>
<style name="LoginTheme" parent="FirebaseUI">
<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">@android:color/white</item>
<item name="colorControlActivated">@android:color/white</item>
<item name="colorControlHighlight">@android:color/white</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textColorPrimary">@android:color/white</item>
<item name="android:textColorSecondary">@android:color/white</item>
<item name="android:windowBackground">@mipmap/bg_login</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorHint">@android: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: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>
</resources>
@chaostools

This comment has been minimized.

Show comment
Hide comment
@chaostools

chaostools Nov 25, 2017

hey @cutiko, thanks for this great code!
however,am facing a slight problem . i have a dark background on my login and so if user enters no password while signing up, it shows a red color text saying "this field cannot be empty" the problem is the shade of red is too dark to be clearly visible, so i wanted to change it.I tried

    <item name="colorError">#ffb5b5</item><!--not working-->

but this isn't working.also i wanted to change this 'eye' color (the icon that is shown on the password's edit text which,when clicked, makes the password visible.
Any Suggestions??

<ps: am new to github so if this is a wrong place to comment then am sorry. >

hey @cutiko, thanks for this great code!
however,am facing a slight problem . i have a dark background on my login and so if user enters no password while signing up, it shows a red color text saying "this field cannot be empty" the problem is the shade of red is too dark to be clearly visible, so i wanted to change it.I tried

    <item name="colorError">#ffb5b5</item><!--not working-->

but this isn't working.also i wanted to change this 'eye' color (the icon that is shown on the password's edit text which,when clicked, makes the password visible.
Any Suggestions??

<ps: am new to github so if this is a wrong place to comment then am sorry. >

@guilmarc

This comment has been minimized.

Show comment
Hide comment
@guilmarc

guilmarc Jan 26, 2018

setProviders is deprecated, any updates on new method ?

setProviders is deprecated, any updates on new method ?

@PollyGlot

This comment has been minimized.

Show comment
Hide comment
@PollyGlot

PollyGlot Jan 29, 2018

@guilmarc,

use setAvailableProviders as shown in the documentation.

PollyGlot commented Jan 29, 2018

@guilmarc,

use setAvailableProviders as shown in the documentation.

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Jan 30, 2018

Wow! Sorry for not replying, wasn't aware of the comments, I'm gonna pay more attention from now on

Owner

cutiko commented Jan 30, 2018

Wow! Sorry for not replying, wasn't aware of the comments, I'm gonna pay more attention from now on

@choonghee-lee

This comment has been minimized.

Show comment
Hide comment
@choonghee-lee

choonghee-lee Feb 9, 2018

Thank you 👍 😄

Thank you 👍 😄

@the-dagger

This comment has been minimized.

Show comment
Hide comment
@the-dagger

the-dagger Feb 9, 2018

@cutiko Do you mind if I write a medium blog on this and use parts of the gist for reference?
Thanks!

@cutiko Do you mind if I write a medium blog on this and use parts of the gist for reference?
Thanks!

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Mar 8, 2018

@the-dagger not all, please!

Again! Sorry for not replying but this doesn't send any notifications :(

[EDIT] There is no feature for this and there is even a change.org pledge for notifications on gist comments, found a solution GistWatch

Owner

cutiko commented Mar 8, 2018

@the-dagger not all, please!

Again! Sorry for not replying but this doesn't send any notifications :(

[EDIT] There is no feature for this and there is even a change.org pledge for notifications on gist comments, found a solution GistWatch

@mandar10

This comment has been minimized.

Show comment
Hide comment
@mandar10

mandar10 Mar 17, 2018

How to bring the Sign in Button at the bottom of the screen

How to bring the Sign in Button at the bottom of the screen

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Mar 20, 2018

@mandar10 I don't think you can because each button is added programmatically inside a LinearLayout.

You can see the Activity here jump to line 130

And you can see the layout here.

In any case, I would try by aiming at the button style, by example, this is the email button. So by creating in your own styles a style="@style/FirebaseUI.Button.AccountChooser.EmailButton" you would override what is set by the library. Give it a try and let us all know.

Owner

cutiko commented Mar 20, 2018

@mandar10 I don't think you can because each button is added programmatically inside a LinearLayout.

You can see the Activity here jump to line 130

And you can see the layout here.

In any case, I would try by aiming at the button style, by example, this is the email button. So by creating in your own styles a style="@style/FirebaseUI.Button.AccountChooser.EmailButton" you would override what is set by the library. Give it a try and let us all know.

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Mar 20, 2018

@guilmarc update as requested, add some extra sugar I think is more handy for providers

Owner

cutiko commented Mar 20, 2018

@guilmarc update as requested, add some extra sugar I think is more handy for providers

@cutiko

This comment has been minimized.

Show comment
Hide comment
@cutiko

cutiko Mar 20, 2018

@chaostools you can't change the eye icon color because is set programmatically, so even if you set it to any other asset when is clicked is gonna be set to a color from java.

TextInputLayout which is the wrapper to get the floating hint for material design appearance takes colors from:

       <item name="colorAccent">@color/colorAccent</item>
       <item name="colorControlNormal">@android:color/white</item>
       <item name="colorControlActivated">@android:color/white</item>
       <item name="colorControlHighlight">@android:color/white</item>
       <item name="android:textColor">@android:color/white</item>
       <item name="android:textColorHint">@android:color/white</item>

So check the following layouts and see what styles are being used, create the same styles in your own styles.xml and move those values around until you tweak it:

Forgot Password

Check Email

Most probably start for this one: Register Email

Owner

cutiko commented Mar 20, 2018

@chaostools you can't change the eye icon color because is set programmatically, so even if you set it to any other asset when is clicked is gonna be set to a color from java.

TextInputLayout which is the wrapper to get the floating hint for material design appearance takes colors from:

       <item name="colorAccent">@color/colorAccent</item>
       <item name="colorControlNormal">@android:color/white</item>
       <item name="colorControlActivated">@android:color/white</item>
       <item name="colorControlHighlight">@android:color/white</item>
       <item name="android:textColor">@android:color/white</item>
       <item name="android:textColorHint">@android:color/white</item>

So check the following layouts and see what styles are being used, create the same styles in your own styles.xml and move those values around until you tweak it:

Forgot Password

Check Email

Most probably start for this one: Register Email

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