How to style com.google.android.material.textfield.TextInputLayout correctly?

Question

We have a branded app with many different flavors and recently switched to the Material components. Since then, suddenly all TextInputLayouts have this ugly grey background

I read through google documentation at https://material.io/develop/android/components/text-input-layout/ and found the boxBackgroundColor which works fine, when used directly in the xml layout, like this:

        <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/edit_gsm_groupname_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ** app:boxBackgroundColor="?attr/theme_backColor" **
        android:layout_alignBottom="@+id/edit_gsm_icon"
        android:layout_toEndOf="@+id/edit_gsm_icon">

Due to the size of the app and the number of input fields used, it is not really a viable option to put that line in each and every layout we have.

So I tried to solve it via the styling, we already have dozens of them active.

I tried in the AlertTheme and the AppTheme, like this:

    <style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ... lots of settings...

    <!--Custom animations-->
    <item name="colorPrimaryDark">?attr/theme_branding_01</item>
    <item name="colorPrimary">?attr/theme_branding_02</item>
    <item name="colorPrimaryLight">?attr/theme_branding_05</item>
    <item name="colorAccent">?attr/theme_branding_03</item>

    <!--Control coloring-->
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">@color/base_active_inactive_text_colors</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **


    <!--System properties-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:textColorPrimary">?attr/theme_branding_14</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">?attr/colorPrimaryDark</item>
    <item name="materialAlertDialogTheme">@style/baseAlertDialogTheme</item>
</style>

<style name="baseAlertDialogTheme" parent="Theme.MaterialComponents.Light.Dialog.Alert">

    <!--Control coloring-->
    <item name="android:windowBackground">?attr/theme_branding_14</item>
    <item name="android:colorBackground">?attr/theme_branding_14</item>
    <item name="android:colorForeground">?attr/theme_branding_11</item>
    <item name="colorControlNormal">?attr/theme_branding_11</item>
    <item name="colorControlActivated">?attr/colorAccent</item>
    <item name="android:textColor">?attr/theme_branding_11</item>
    <item name="android:editTextColor">?attr/theme_branding_11</item>
    <item name="android:textColorHint">?attr/colorAccent</item>
    ** <item name="boxBackgroundColor">?attr/theme_branding_14</item>  **

    <!--Alert dialog colors-->
    <item name="android:textColorPrimary">?attr/theme_branding_11</item>
    <item name="android:background">?attr/theme_branding_14</item>

    <!--Alert button colors-->
    ... button styles ...
    <item name="android:buttonBarPositiveButtonStyle">@style/baseAlertDialogButton</item>

</style>

But somehow the boxBackgroundColor seems to have no effect when set via styles. I found this question Material TextInputLayout styles are not working where it is said, that this does not work in preview mode, but I tried to push it to the devices - it doesn't work at runtime either.

A solution for this would be great - How can I get rid of that grey background? It shall have the normal background color as it had with the old TextInputLayout.

Thanks in advance, cheers, Gris

Answer 1

You can't use the boxBackgroundColor in the app theme.

Instead you can globally define the style used by the TextInputLayout in your app theme with the textInputStyle attribute:

<style name="baseAppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    ...
    <item name="textInputStyle">@style/myFilledBox</item>
</style>

with:

<style name="myFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
   <item name="boxBackgroundColor">@color/filled_background_color_selector</item>
</style>

Answer 2

Even I was facing a similar issue, I have used the textinputlayout in the below described way, this works fine.

 <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/enterEmailTextLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/enteredEmailEditText"
            style="@style/Nunito_Sans_Roman"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            android:backgroundTint="@color/white_100"
            android:clickable="true"
            android:focusable="true"
            android:focusableInTouchMode="true"
          />
    </com.google.android.material.textfield.TextInputLayout>

You can try this if this suits your requirement. Hope this helps