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>