5

Is it possible to style the new com.google.android.material.textfield.TextInputEditText component without setting it for each component extra?

For example:

For the new TextInputLayout I can set the style globally in the following way:

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

I expect for the TextInputEditText a similar way for example: 

<item name="editTextStyle">@style/MyTextInputEditTextStyle</item>

but it's not working.

Here is a similar post but only for the old design support components.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Valentin Gavran
  • 341
  • 9
  • 21

2 Answers2

10

The TextInputLayout overrides the editTextStyle attribute using the materialThemeOverlay attribute.

For example the Widget.MaterialComponents.TextInputLayout.FilledBox has this default style:

<style name="Widget.MaterialComponents.TextInputLayout.FilledBox" parent="Base.Widget.MaterialComponents.TextInputLayout">
    <item name="materialThemeOverlay">
       @style/ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox
    </item>
    ....
</style>
<style name="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox">
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.FilledBox</item>
</style>

To globally define you have to define a style for the TextInputLayout extending one of the material themes.
Then you have to use the new materialThemeOverlay attribute. It allows you to override app theme attributes and you can change the editTextStyle attribute.

Something like:

  <style name="MyCustomOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="materialThemeOverlay">@style/MyThemeOverlayOutlined</item>    
  </style>

In this way you can change the editTextStyle (app theme attribute) only for this component style.

  <style name="MyThemeOverlayOutlined">
    <item name="editTextStyle">@style/MyTextInputEditText_outlinedBox</item>
  </style>

  <style name="MyTextInputEditText_outlinedBox" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
    ....
  </style>

Finally you can assign the MyCustomOutlined to a specific TextInputLayout in the layout:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/MyCustomOutlined"
        .../>

or assign globally in your app theme using:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
   ....
   <item name="textInputStyle">@style/MyCustomOutlined</item>
</style>
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
2

According to this comment, editTextStyle is the correct attribute to set. https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/theme/res/values/attrs.xml#L85

See example usage in these styles: https://github.com/material-components/material-components-android/blob/6c70169e8d4ae77429a9c57785e443b2a18b4aa3/lib/java/com/google/android/material/textfield/res/values/styles.xml#L141

Updated: Please Set @style/ThemeOverlay.MaterialComponents.TextInputEditText inside your custom TextInputLayoutStyle.

wcshi
  • 94
  • 4
  • 1
    Could you please try setting materialThemeOverlay inside MyTextInputLayoutStyle? – wcshi Jan 04 '19 at 20:51
  • 1
    Setting `@style/ThemeOverlay.MaterialComponents.TextInputEditText` inside my custom TextInputLayoutStyle worked for me. Thanks! Update your answer then I will approve it. – Valentin Gavran Jan 10 '19 at 13:59