TextInputLayout Material Component Issue : The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant)

Question

I am having a problem implementing a Material design with TextInputLayout, I know the solution is to make your activity theme inherits one of Material Component Theme but that will bring such change on most of my app theme and will take more time to refactor it. What I want is Material design just for this specific TextInputLayout on the app.

This is what I tried

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/firstName"
                style="@style/CustomInputStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="5dp"
                android:layout_weight="1"
                app:errorEnabled="true">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/fname"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/first_name"
                    android:inputType="text|textCapWords"
                    android:nextFocusDown="@id/lname"
                    android:textSize="12sp" />

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




<style name="CustomInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
            <item name="boxStrokeWidth">2dp</item>
            <item name="hintTextColor">@color/colorAccent</item>
            <item name="boxStrokeColor">@android:color/white</item>
            <item name="android:colorAccent">@color/colorAccent</item>
            <item name="android:textColorHint">@color/colorAccent</item>
        </style>

Error : Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).

Can't we just do this instead of overriding the overall app/activity theme? All I want is to use it at specific Fragment.

Answer 1

I just notice that it is possible just put the Material Components theme in the root view of a XML layout then you can now apply the style without any error.

In the parent/root view add this

android:theme="@style/Theme.MaterialComponents.Bridge"

Then apply the style to child view TextInputLayout

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/firstName"
            style="@style/CustomInputStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            app:errorEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/fname"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/first_name"
                android:inputType="text|textCapWords"
                android:nextFocusDown="@id/lname"
                style="@style/CustomEditText"
                android:textSize="12sp" />

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

Answer 2

Problem :This occurs some times if you want to apply a wrong style to your "TextInputLayout".

ex: in my case I try to use the "TextInputLayout" as Drop down list so inside the "TextInputLayout" i put "AutoCompleteTextView" and inside the last i determine the style style="@style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu" so it give me the above error.

Solving: change the style to the correct one. style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu" and it works now and the app is run correctly.

Before:
style="@style/Widget.Material3.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

After: style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"

Answer 3

I have the same problem but when I change the exposed dropdown style from material3 to material components the crash still persists but now with other material3 components like the new MaterialButton with

<com.google.android.material.button.MaterialButton

Furthermore it requires me to inherit material2 (Material components) and not material3 for my base theme ...

Update 12/05/22

I have tried your version with bridge but now it crashes with another error. From the documentaries an exposed dropdown menu (m3) requires an anchor but with your bridge it crashes because it cannot use the anchor attribute.

I solved all my problems by checking and changing all components to material 3 or legacy/appcompat components. And I styled the textinputlayout directly inside the XML layout, now I can build and start my app without crashes. I can give code examples if needed ;)