Search code examples
androidmaterial-designandroid-textinputlayoutmaterial-components-androidmaterial-components

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


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.


Solution

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