FirebaseUI not compatible with "Theme.MaterialComponents.*" styling

[OmerLevy1248]

Welcome to FirebaseUI and thanks for submitting an issue!

Please take a look at open issues, as well as resolved issues, to see if your issue is either already being addressed, or has been solved by someone else.

If not, please feel free to fill in the following info so we can help faster!

Step 1: Are you in the right place?

• For issues or feature requests related to the code in this repository file a GitHub issue.
• For general technical questions, post a question on StackOverflow tagged appropriately.
• For general Firebase discussion, use the firebase-talk google group
• For help troubleshooting your application that does not fall under one of the above categories, reach out to the personalized Firebase support channel

Step 2: Describe your environment

• Android device: Pixel 3 AVD
• Android OS version: 10.0 (API29)
• Google Play Services version: 4.3.4
• Firebase/Play Services SDK version: 26.1.0
• FirebaseUI version: 7.0.0

Step 3: Describe the problem:

when changing the application theme's parent to "Theme.MaterialComponents.*", All buttons in FirebaseUI change style to default, primary colored, no icon buttons.
More detailed explanation in my SO question here: https://stackoverflow.com/questions/65745954/theme-materialcomponents-style-ruins-firebase-authui-layout

Steps to reproduce:

1. Go to AndroidMenifest.xml and locate the application theme style.
2. Go to styles.xml locate that style and set parent="Theme.MaterialComponents.NoActionBar" for it.
3. Start FirebaseUI sign-in screen.

Observed Results:

• Provider's buttons are now primary colored, no icon, simple buttons. see image in:
  https://stackoverflow.com/questions/65745954/theme-materialcomponents-style-ruins-firebase-authui-layout

Expected Results:

• Provider's buttons customized for each provider like shown in FirebaseUI docs:
  https://firebase.google.com/docs/auth/android/firebaseui

Relevant Code:

  <style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar">
      ...
  </style>

startActivityForResult(
  AuthUI.getInstance().createSignInIntentBuilder()
      .setAvailableProviders(providers)
      .build(), 
  RC_SIGN_IN
)

[samtstern]

@OmerLevy1248 thanks for reporting! This is a pretty complex issue, I am not sure if it's possible for us to make your theme work without breaking existing themes. I'll have to investigate.

[OmerLevy1248]

Hi @samtstern! I am a newbie to android, so maybe this is not good practice, but:
As I understand it from material.io (and tried in my own code), changing all Button tags to the literal androidx.appcompat.widget.AppCompatButton tag (instead of leaving it up to the auto-inflation), should solve it to everyone using MaterialComponents based themes. If this is the expected element in all cases, I don't see a reason it should break other themes. Again, maybe I don't see the hole picture here, so maybe it's not that simple. Anyway, thanks for the very quick response!

[samtstern]

@OmerLevy1248 I spoke with the material team about this and I'm now looking into a Material Components version of FirebaseUI as v8.0.0. However after speaking with them it's clear this has to be a breaking change. Right now we assume Theme.AppCompat.* and after that we will need to take Theme.MaterialComponents.*. These two themes are somewhat compatible but not completely.

So in the short term there's nothing we can do but we now have a plan to fix this in the medium to long term. Here's a great guide discussing the migration:
https://medium.com/androiddevelopers/migrating-to-material-components-for-android-ec6757795351

[OmerLevy1248]

I see. Thanks a lot! I'll be waiting:)

[samtstern]

This has been implemented and released in version 8.0.0

[OmerLevy1248]

Amazing, thank you very much!