TextInputLayout Crashing when setting Custom Theme for App

Question

Following code worked perfectly with outline input box.

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/notes"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/text_notes"
        app:boxBackgroundColor="@color/colorWhite">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/et_notes"
            android:fontFamily="sans-serif-black"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

I have custom font to set throughout the app. After setting up by following code, it is crashing. below style used for App theme.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textViewStyle">@style/SansSerifTextViewStyle</item>// Custom font style
    <item name="buttonStyle">@style/SanSerifButtonStyle</item> // Custom font style
</style>

When I remove the below line, app not crashing. But the outlined box UI is not coming. Tried setting through Java code, not working.

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Answer 1

Material Components, like com.google.android.material.textfield.TextInputLayout (note the .material. part of the package name), require that you use a Material theme.

This page lists the appropriate themes to use:

https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#4-change-your-app-theme-to-inherit-from-a-material-components-theme

You will have to change your app's theme from this

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

to e.g. this

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">