12

In an app of mine, I'm using the Theme.MaterialComponents.Light.NoActionBar as a base style. In this style, which I call AppTheme, I'm trying to override editTextStyle to provide a custom style for com.google.android.material.textfield.TextInputEditText (according to the source code, it uses R.attr.editTextStyle as a default style).

This is my current theme, related to the TIEditText and TILayout:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    [ primary and secondary colors, OnColors, etc.]
    <item name="editTextStyle">@style/AppTheme.TextInputEditText</item>
    <item name="textInputStyle">@style/AppTheme.TextInputLayout</item>

    [ Custom attribute for testing, defined in attrs.xml ]
    <item name="textInputEditTextStyle">@style/AppTheme.TextInputEditText</item>
</style>

For some reason, even though I set editTextStyle, if I use it in code, it does not get applied:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/tilFirstName"
    style="?attr/textInputStyle"
    android:hint="@string/label_firstname"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/firstName"
        style="?attr/editTextStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="@={viewModel.firstName}" />
</com.google.android.material.textfield.TextInputLayout>

However if I replace the style of firstName with ?attr/textInputEditTextStyle, it works.

Why can't I override editTextStyle in the default theme? What the hell is going on?

Target SDK is 28, minSDK is 21, Material library version is 1.1.0-alpha06

1
  • The same problem for me. Wasted a lot of time and still don't get why this attribute is not applied. May 24, 2019 at 12:32

2 Answers 2

35

Let's just move past the part where we all recognize that Android themes and styles are singularly the most absurd wasteland of hackery and guesswork ever devised by human beings.

This is an expansion on the previous answer. Same silly 'hack'. I was able to style the TextInputEditText by setting editTextStyle, but not where it intuitively belongs, but rather inside a custom materialThemeOverlay nested within the style defined for textInputStyle. Witness:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- works fine -->
    <item name="textInputStyle">@style/AppTheme.TextInputLayoutStyle</item>
    <!-- should work fine, doesn't work, happily ignored -->
    <!-- <item name="editTextStyle">@style/AppTheme.TextInputEditTextStyle</item> -->
</style>

<style name="AppTheme.TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <!-- other props (boxBackgroundMode, boxBackgroundColor, boxStrokeColor, etc) -->
    <!-- can we set editTextStyle from here? Of course not! We should magically know we need a material theme overlay-->
    <item name="materialThemeOverlay">@style/AppTheme.MaterialThemeOverlay</item>
</style>

<!-- style inception! a style, child of another style, whose only purpose is to refer to yet another style -->
<style name="AppTheme.MaterialThemeOverlay">
    <item name="editTextStyle">@style/AppTheme.TextInputEditTextStyle</item>
</style>

<!-- finally, the style we SHOULD have been able to set from the theme -->
<style name="AppTheme.TextInputEditTextStyle" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="android:textColor">@color/white</item>
</style>

All of the above ridiculousness and ANOTHER day of my life thrown in the trash, just to change the color of text. Thaaaaanks Aaaaaandroid.

3
  • 2
    Thank you so much ) This was SO confusing before I used your solution. It's just below the understandment for me how all styles are just styles, and this one particular is themeOverlayed style
    – StayCool
    May 21, 2020 at 8:52
  • 3
    This is just ridiculous, Google. They really need to re-vamp their entire theming system. Thank you for saving me even more countless hours trying to figure this out.
    – Stephen
    Nov 5, 2020 at 9:02
  • 2
    Currently in the middle of rebranding our app and I couldn't agree more with the first sentence. Take my upvote!
    – Eric
    Jul 28, 2021 at 23:30
7

For some reason, even though I set editTextStyle, if I use it in code, it does not get applied

It happens because the default styles of the TextInputLayout override the editTextStyle 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>
2
  • Could you please explain why you choose override MaterialComponents style instead of add a custom default definition? :) I'm trying to apply it but I don't understand why it works. Thanks :) Oct 2, 2019 at 17:58
  • @JosselinePerdomo It is the default style provided by the Material Components for the TextInputLayout.FilledBox. I explained why style="?attr/editTextStyle" doesn't work. It is a default attribute defined at app theme level. It is overridden by the components itself (it uses the same attr overridden with the materialThemeOverlay). Instead textInputEditTextStyle works because it is a custom attribute not overridden. Oct 2, 2019 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.