Global style for new com.google.android.material.textfield.TextInputEditText

user_7878273 0
Viewed 3316

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.

android-textinputlayout material-components material-components-android material-design android
2 Answers

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>
user_20165620

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.

user_102261210
Related