Theme.MaterialComponents style ruins Firebase AuthUI layout

问题

I am writing my first app in kotlin and am using FirebaseAuth & AuthUI for authentication. My login screen works perfectly, and looked like:

Now I am trying to change my AppTheme's parent to "Theme.MaterialComponents.NoActionBar" (from "Theme.AppCompat.NoActionBar") but the login screen changed to:

I call the login screen like so:

startActivityForResult(
    authUI.createSignInIntentBuilder()
        .setAvailableProviders(providers)
        .build(), 
    RC_SIGN_IN
)

I tried to add .setTheme(R.style.FirebaseUI) before .build(), but it did nothing. I also tried .setTheme(R.style.AppTheme) just to check what will happen, and it changed the background to dark theme, but the buttons are still purple and no icons. Is it possible to fix this?

Please help me

(also, not very related but maybe the solution will be the same: AuthUI uses Google Smart Lock by default, and I noticed that it's dialog is not affected by the theme I set to the AuthUI. Is it possible to set it to dark mode?)

Thanks!

EDIT:

As Himanshu Choudhary suggested in the comments, making a different style for material component, leaving the parent theme as AppCompat and using the material theme in all activities, solves the problem, but it represents problems in layout previews (as they use the application theme). I found a partial solution: Making a new style like so:

    <style name="AppTheme.SignInScreen" parent="Theme.AppCompat.NoActionBar">
        <item name="materialButtonStyle">?attr/buttonStyle</item>
    </style>

and setting it to the the sign-in screen with .setTheme(R.style.AppTheme_SignInScreen) results to:

I found ?attr/buttonStyle by looking at the AppCompatButton class constructor. Unfortunately, when I set a debug point in that constructor I get different defStyleAttr if I set the app theme to AppCompat(defStyleAttr=2130903157) or to MaterialComponents(defStyleAttr=2130903586). I tried to find what it references to, when using the AppCompat app theme, by setting it and looking at the hint, and I found this: ?attr/buttonStyle => ?android:attr/buttonStyle => @style/Widget.Material.Button, but setting @android:style/Widget.Material.Button gives the same result... Anybody has any idea how to get the icons back? I don't mind overriding the style inflater or even using the actual style id instead of the reference, but I couldn't find any example/explanation of doing those... Please help

回答1:

Don't worry its simple, just use one of a bridge theme :

Theme.MaterialComponents.Bridge
Theme.MaterialComponents.Light.Bridge
Theme.MaterialComponents.NoActionBar.Bridge
Theme.MaterialComponents.Light.NoActionBar.Bridge
Theme.MaterialComponents.Light.DarkActionBar.Bridge

Bridge themes inherit from AppCompat themes, but also define the new Material Components theme attributes for you. If you use a bridge theme, you can start using Material Design components without changing your app theme. (From documentaion)

Have a look : Get Started - Material design

What you are facing is the result of default tint the material theme applies to all buttons. You can remove the tint if you want with app:backgroundTint="none" and the original background of the button will show.

来源：https://stackoverflow.com/questions/65745954/theme-materialcomponents-style-ruins-firebase-authui-layout

标签

android

kotlin

firebase-authentication

firebaseui

material-components-android