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

The new MDC components allow a lot of flexibility here but it is still quite strange. I wanted a custom font for all TextInputEditTexts, and the filled (default) style. The only way it would work for me is by specifying the font on the TextInputEditText using the global style attribute:

<!-- Base application theme. -->
<style name="MyAppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="textInputStyle">@style/MyTextField.Outlined</item>
    <item name="editTextStyle">@style/MyEditTextFont</item>
</style>

<style name="MyEditTextFont" parent="Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:fontFamily">@font/my_font</item>
</style>
<style name="MyTextField" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"/>
<style name="MyTextField.Outlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox"/>

If for example you don't specify the editTextStyle, then the textInputStyle does work but has crazy missing padding. Anyway I recommend using both of these fields and styling them both as necessary.

Answer 2

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>