Customize Firebase-ui auth Android

Question

Recently Firebase open sourced their Firebase-Auth drop in Authentication System on Github. Firebase-ui auth Github. Although a very good step they haven't released any documentation regarding how can we customize all the UIs present in the package. One option to do so is, clone the full repo and then dig down the code, modify it and then include each and every class, dependency in our Android project. Is there any simpler solution for that?

Answer 1

You can create a style in the styles.xml resource file and then use that to customize the Firebase-Auth UI. You can set the new style by using the setTheme() when creating the Auth instance.

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()
                            )
                    )
                    .setTheme(R.style.LoginTheme)
                    .setLogo(R.mipmap.logo)
                    .build(),
            RC_SIGN_IN);

Here's a sample of how your style theme could be configured.

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

Using the above method, I was able to achieve this result:

This still doesn't provide as much flexibility as one would like but you can customize it to some extent so it could work with your brand's logo and color themes.

These are some of the resources you could find helpful if you want to go further with this approach:

https://firebaseopensource.com/projects/firebase/firebaseui-android/auth/README.md#ui_customization https://gist.github.com/cutiko/9942f76504cbb67c8d04ee6632286dbc https://github.com/firebase/FirebaseUI-Android/issues/229#issuecomment-236868365

Answer 2

If you want to customise the authentication screen and changing just the styles won't work for you, you can also use this:

AuthMethodPickerLayout customLayout = new AuthMethodPickerLayout
.Builder(R.layout.your_custom_layout_xml)
.setGoogleButtonId(R.id.bar)
.setEmailButtonId(R.id.foo)
// ...
.setTosAndPrivacyPolicyId(R.id.baz)
.build();

startActivityForResult(
AuthUI.getInstance(this).createSignInIntentBuilder()
    // ...
    .setAuthMethodPickerLayout(customLayout)
    .build());

This allows you to create a custom layout and you can define the IDs for the different sign in providers that you are using so that Firebase can automatically invoke the correct providers on click of those buttons.

For more information, you can read this: https://github.com/firebase/FirebaseUI-Android/blob/master/auth/README.md#custom-layout