Firebase UI - Auth - Use own layout

Question

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.

You can use Firebase own UI with customization and flow from this link: https://github.com/firebase/FirebaseUI-Android/tree/master/auth — Patrick R, Jul 11 '17 at 05:49

r3dm4n · Answer 1 · 2016-12-01T18:02:40.750

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>

Myth · Answer 2 · 2016-11-14T10:15:09.333

Yes, you can use your own layout & buttons for Firebase UI Auth on Android.

For Google and Facebook, You can use widgets provided in XML file like:

        <com.google.android.gms.common.SignInButton
            android:id="@+id/btn_google_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:background="@color/colorAccent"
            android:text="@string/btn_google_login"
            android:textColor="@android:color/black" />

        <com.facebook.login.widget.LoginButton
            android:id="@+id/btn_facebook_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:background="@color/colorAccent"
            android:text="@string/btn_facebook_login"
            android:textColor="@android:color/black"/>

Then you can use your "android:id" to perform action on onClick

Hope your question is answered.

EDIT: For the google flow:

// Configure sign-in to request the user's ID, email address, and basic
        // profile. ID and basic profile are included in DEFAULT_SIGN_IN.
        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(Your web_client_id)
                .requestEmail()
                .build();

    btn_google_login = (SignInButton) findViewById(R.id.btn_google_login);

    btn_google_login.setSize(SignInButton.SIZE_STANDARD);
    btn_google_login.setScopes(gso.getScopeArray());

    btn_google_login.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            //If you want everytime for user to ask the account to select.
            mGoogleApiClient.clearDefaultAccountAndReconnect();

            Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
            startActivityForResult(signInIntent,RC_SIGN_IN);
        }
    });

Hello, thanks for the response, but I know how to use buttons, clicklisteners etc. in android, the question is more what to start in the onclick method to start the firebase flows? I updated the question for clarification — JDC, Nov 14 '16 at 10:09
This is doing it using the standard firebase SDK right? Then I will have to implement the whole smartlock stuff etc on my own, correct? — JDC, Nov 14 '16 at 10:18
Ok, then I will wait some days, possibly someone else can provide an answer where I can use the stuff provided by firebase ui but more customized. Thank you :)! — JDC, Nov 14 '16 at 12:48
Custom theming is a feature in FirebaseUI, but custom layout of the so-called Nascar screen is not. If you want to do that, you can fork the FirebaseUI repo and make the changes in your fork. — Frank van Puffelen, Nov 14 '16 at 14:38
Thank you, thats really unfortunate. Could you post this as an answer so that I could accept it? — JDC, Nov 14 '16 at 22:24
This answer is for using with firebase auth, not firebase auth ui which handles everything in few lines of code — channae, Dec 25 '18 at 09:54

Firebase UI - Auth - Use own layout

2 Answers2