Firebase UI - Auth - Use own layout

JDC picture JDC · Nov 14, 2016 · Viewed 8.4k times · Source

Is it possible to use my own layout & buttons for Firebase UI Auth on Android?

I basically want to implement the screen for choosing the identity provider (google, facebook, etc.) on my own and start the according flow from my click listener (e.g. using Butterknife):

@OnClick(R.id.login_btn_signInGoogle)  
public void signInGoogle(View view) {  
  // Start google sign in flow <--- This is what I do not know how to do it  
}

@OnClick(R.id.login_btn_signInFacebook)  
public void signInFacebook(View view) {  
  // Start facebook sign in flow <--- This is what I do not know how to do it 
}

I know firebase provides the possibility to customize the screen/theme, but it is not enough for my case.

In the worst case I will have to implement this using the standard firebase sdk methods.

Answer

r3dm4n picture r3dm4n · Dec 1, 2016

For now all we can do is accept their layout on FirebaseUI as stated here. If we don't like we have to make our own sign in. I really hope they provide some customization in the future.

In my app I have a separate logo and a separate background, so when you try to register with email, logo goes away, and the registration dialog doesn't interfere with the logo, like here You can do it with .SetTheme and .SetLogo

 startActivityForResult(
                        AuthUI.getInstance()
                                .createSignInIntentBuilder()
                                .setTheme(R.style.FirebaseLoginTheme)
                                .setLogo(R.drawable.logo)
                                .setProviders(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()))
                                .setIsSmartLockEnabled(false)
                                .build(),
                        RC_SIGN_IN);

In styles.xml edit windowBackground for your FirebaseLoginTheme:

 <style name="FirebaseLoginTheme" parent="FirebaseUI">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowBackground">@drawable/login</item>
</style>