Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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);
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.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>

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

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