Skip to content

Instantly share code, notes, and snippets.

@cutiko
Last active August 29, 2022 14:53
Show Gist options
  • Save cutiko/9942f76504cbb67c8d04ee6632286dbc to your computer and use it in GitHub Desktop.
Save cutiko/9942f76504cbb67c8d04ee6632286dbc to your computer and use it in GitHub Desktop.
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>
@Mauratay
Copy link

Mauratay commented Oct 27, 2020

This is awesome, thanks cutiko.

I'm looking for a way to get rid of the elevation on the toolbar, anyone knows how to do that on the FirebaseUI?
I was thinking on something like:

<item name="elevation">0dp</item>

@cutiko
Copy link
Author

cutiko commented Oct 28, 2020

@Mauratay this is old, you should look at this

https://github.com/cutiko/FirebaseUiAuth

Check out the PRs, there is 1 pending for updating to androidx in case the master gives you problems

@faridrama123
Copy link

thanks

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