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.

Answer 1

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>

Answer 2

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);
        }
    });