Firebase UI - Auth - use custom layout

Question

Can I use my own custom layout and buttons for Firebase UI Auth on Android ?

I basically want to implement a screen for selecting an identity provider (google, facebook, etc.) myself and start the corresponding stream from my click listener (for example, 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 that firebase provides the ability to customize the screen / theme, but this is not enough for my case.

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

Answer 1

For now, all we can do is accept their layout on FirebaseUI, as indicated here . If we do not like, we must make our own entrance. I really hope they provide some tweaks in the future.

In my application, I have a separate logo and a separate background, so when you try to register by e-mail, the logo leaves, and the registration dialog does not interfere with the logo, for example, here you can do it using .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 and buttons for Firebase UI Auth on Android.

For Google and Facebook, you can use the widgets provided in the XML file, for example:

  <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 the onClick action

I hope your question will be answered.

EDIT: For google stream:

 // Configure sign-in to request the user 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); } });