Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 965
Valentin Gavran Avatar asked Dec 30 '18 09:12

Valentin Gavran


1 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>
like image 90
Gabriele Mariotti Avatar answered Oct 31 '22 13:10

Gabriele Mariotti