How to apply global custom style to android.support.design.widget.TextInputEditText?

Question

I have my AppTheme defined in style.xml where I apply a custom style globally for all my app's TextView, EditText, Button etc.

Now I'd like to do the same for android.support.design.widget.TextInputEditText but how?

It does not extend EditText so that style is ignored.

Here's what I've got:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>

    <style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary</item>
        <item name="colorAccent">@color/accent</item>

        <!-- Globally override default widget styles with custom -->
        <item name="android:textViewStyle">@style/App.TextView</item>
        <item name="android:editTextStyle">@style/App.EditText</item>
        <item name="android:buttonStyle">@style/App.Button.Primary</item>
    </style>

    <style name="App.TextView" parent="@android:style/Widget.TextView">
        <item name="android:textColor">@color/text</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textSize">@dimen/textsize_normal</item>
    </style>

    <style name="App.EditText" parent="@android:style/Widget.EditText">
        <item name="android:textColor">#f00</item>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textSize">@dimen/textsize_xxxlarge</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColorHint">@color/text_hint</item>
    </style>

    <style name="App.Button" parent="@android:style/Widget.Button">
        <item name="android:textSize">@dimen/button_text_size</item>
        <item name="android:fontFamily">sans-serif-medium</item>
        <item name="android:textAllCaps">false</item>
    </style>

    <style name="App.Button.Primary">
        <item name="android:background">@drawable/button_primary_background</item>
        <item name="android:height">@dimen/button_primary_height</item>
        <item name="android:width">@dimen/button_primary_width</item>
        <item name="android:paddingLeft">@dimen/padding_normal</item>
        <item name="android:paddingRight">@dimen/padding_normal</item>
        <item name="android:textColor">@color/button_primary_text</item>
    </style>

    ...

Answer 1

With the Material theme you can use the textInputStyle to style the com.google.android.material.textfield.TextInputLayout component.

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
   ....
   <item name="textInputStyle">@style/MyTextInputLayoutStyle</item>
</style>

<style name=MyTextInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
     ....
</style>

If you would like to customize the TextInputEditText just add:

<style name=MyTextInputLayoutStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
     ....
    <item name="materialThemeOverlay">
      @style/MyThemeOverlayTextInputEditTextFilledBox</item>
</style>

<style name="MyThemeOverlayTextInputEditTextFilledBox">
   <item name="editTextStyle">@style/MyTextInputEditText</item>
</style>

For example:

  <style name="MyTextInputEditText" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:textAppearance">myTextAppearance</item>
    ...
  </style>