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 AppTh

Solution 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.