TextInputLayout and TextInputEditText doesnt work with Theme.AppCompat.Light.NoActionBar

Question

I want to use TextInputEditText and TextInputLayout in my app, but it will not work with Theme.AppCompat.Light.NoActionBar. But if I set it to Theme.MaterialComponents.Light.NoActionBar, it will work without any issues, but this will destroy all of my styles in app.

Usage in XML:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/nameLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    style="@style/reg_edit_text_style"
                    app:errorEnabled="true"
                    android:hint="@string/name">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/nameEt"
                        android:layout_width="match_parent"
                        android:nextFocusDown="@id/lastNameEt"
                        android:inputType="text"
                        style="@style/reg_edit_text_inner_style"/>

</com.google.android.material.textfield.TextInputLayout>

In build.gradle:

implementation 'com.google.android.material:material:1.1.0-alpha07'
implementation 'androidx.appcompat:appcompat:1.0.2'

Error:

 Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
    at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:240)
    at com.google.android.material.internal.ThemeEnforcement.checkMaterialTheme(ThemeEnforcement.java:215)
    at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:143)

Answer 1

You cannot use AppCompat themes with MaterialComponents views.

If you're not ready to completely move to MaterialComponents theme, you can use the bridge theme of the same. Although, using the Bridge theme is not a recommended path. In their official documentation, they say:

Doing an app-wide migration by changing your app theme to inherit from a Material Components theme is the recommended approach. However, be sure to test thoroughly afterwards, as components in existing layouts may change their looks and behavior.

Note: If you can't change your theme, you can do one of the following:

Inherit from one of our Material Components Bridge themes. See the Bridge Themes section for more details. Continue to inherit from an AppCompat theme and add some new theme attributes to your theme. See the App Compat Themes section for more details.

You can use the Bridge themes of MaterialComponents by adding .Bridge in front of MaterialComponents theme name.

eg.

Theme.MaterialComponents.*.Bridge

In your case, it'd be Theme.MaterialComponents.Light.NoActionBar.Bridge

Although, If you want to keep using the AppCompat themes, you need to add following few attributes to your current theme, or it'll throw Theme Enforcement Error which you're getting right now.

<item name="colorPrimaryVariant">@color/my_app_primary_variant_color</item>
  <item name="colorSecondaryVariant">@color/my_app_secondary_variant_color</item>
  <item name="colorSurface">@color/my_app_surface_color</item>
  <item name="colorOnPrimary">@color/my_app_color_on_primary</item>
  <item name="colorOnSecondary">@color/my_app_color_on_secondary</item>
  <item name="colorOnBackground">@color/my_app_color_on_background</item>
  <item name="colorOnError">@color/my_app_color_on_error</item>
  <item name="colorOnSurface">@color/my_app_color_on_surface</item>
  <item name="scrimBackground">@color/mtrl_scrim_color</item>
  <item name="textAppearanceHeadline1">@style/TextAppearance.MaterialComponents.Headline1</item>
  <item name="textAppearanceHeadline2">@style/TextAppearance.MaterialComponents.Headline2</item>
  <item name="textAppearanceHeadline3">@style/TextAppearance.MaterialComponents.Headline3</item>
  <item name="textAppearanceHeadline4">@style/TextAppearance.MaterialComponents.Headline4</item>
  <item name="textAppearanceHeadline5">@style/TextAppearance.MaterialComponents.Headline5</item>
  <item name="textAppearanceHeadline6">@style/TextAppearance.MaterialComponents.Headline6</item>
  <item name="textAppearanceSubtitle1">@style/TextAppearance.MaterialComponents.Subtitle1</item>
  <item name="textAppearanceSubtitle2">@style/TextAppearance.MaterialComponents.Subtitle2</item>
  <item name="textAppearanceBody1">@style/TextAppearance.MaterialComponents.Body1</item>
  <item name="textAppearanceBody2">@style/TextAppearance.MaterialComponents.Body2</item>
  <item name="textAppearanceCaption">@style/TextAppearance.MaterialComponents.Caption</item>
  <item name="textAppearanceButton">@style/TextAppearance.MaterialComponents.Button</item>
  <item name="textAppearanceOverline">@style/TextAppearance.MaterialComponents.Overline</item>

You need to add these attributes in your current AppCompat theme.