Android | Change theme of TextInputLayout using styles.xml

Question

I want to apply custom style to TextInputLayout's hint and error in one theme and apply it globally i.e. define it in styles.xml and somehow apply it to all TextInputLayouts used throughout the app without having the need to add it inline like this:

<android.support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/email_username"
    android:textColorHint="@color/grey_text"
    app:theme="@style/my_custom_style">

<style name="my_custom_style" parent="Widget.Design.TextInputLayout">
    <item name="android:textColorHint">@color/success_accent</item>
    <item name="android:textSize">20sp</item>
</style>

Something like we can do the Button widget like this:

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/my.Widget.Button</item>
    <item name="android:buttonStyle">@style/my.Widget.Button</item>
</style>

<style name="my.Widget.Button" parent="@android:style/Widget.TextView">
    <item name="android:gravity">center</item>
    <item name="android:textSize">@dimen/some_dimen</item>
    <item name="android:textAllCaps">false</item>
</style>

NOTE: I am currently considering subclassing the TextInputLayout as a last resort, so, please keep this in mind while you answer.

Thanks :)

score 14 · Accepted Answer · answered Feb 10 '17 at 08:58

Unfortunately, the TextInputLayout widget, and it seems all widgets in the Design Support Library, don't define a global theme attribute for it's default style. Therefore, it's not possible to customize it's style globally, other than by subclassing it to support a custom theme attribute to query the default style from, and using the subclass everywhere instead.

Note that the Widget.Design.TextInputLayout style would still be hardcoded as the default style on which the widget would fall back to if it can't find the attribute defined in it's theme, so this would be no different than the existing implementation by default.

It seems that there is a misconception in the Design Support Library developers that defining a default theme attribute requires it to be present in the current theme in order to work properly. This issue was reported previously for TabLayout, but was closed based on this reasoning, and subsequent queries and clarifications did not generate further response. Feel free to open another ticket on the AOSP issue tracker with the necessary clarification; hopefully it might fare better.

score 11 · Answer 2 · answered Aug 14 '20 at 16:47

11

The solution I used in my project :

<style name="AppBaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="textInputStyle">@style/TextInputLayoutTheme</item>
  </style>

<style name="TextInputLayoutTheme" parent="Widget.Design.TextInputLayout">
    <item name="colorOnSurface">@android:color/transparent</item>
</style>

answered Aug 14 '20 at 16:47

P. Sohm

2,842
2
44
77

This should be the accepted answer – Jachumbelechao Unto Mantekilla Dec 02 '21 at 11:40

score 0 · Answer 3 · answered Nov 06 '18 at 10:58

I'm using this actually

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    [...]// other definitions
    <item name="editTextStyle">@style/EditTextDefault</item>
</style>


 <style name="Widget.Design.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
     <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
     <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
 </style>

<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
     <item name="android:textColor">@color/colorAccent</item>
 </style>

 <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
     <item name="android:textColor">#d32f2f</item>
 </style>

<style name="EditTextDefault" parent="android:Widget.EditText">
    <item name="android:paddingLeft">10dp</item>
</style>

score -2 · Answer 4 · answered Feb 09 '17 at 15:40

Just thinking out loud here, did you try this? This should change the color hint all over your app, but if you are want this anyways this just might help with your case.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorHint">@style/text_hint_appearance</item>
</style>

<style name="text_hint_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColorHint">@color/success_accent</item>
</style>

`android:textColorHint` is a style attribute, not a theme attribute, so it can't be defined in a theme. Did you mean to use the `android:textAppearance` theme attribute instead? Note that this wouldn't work either, because `TextInputLayout` is actually a wrapper class that extends `LinearLayout` instead of `EditText`, and it provides it's own hint drawing mechanism, which does not take the default text appearance into account. — corsair992, Feb 10 '17 at 09:53

Android | Change theme of TextInputLayout using styles.xml

4 Answers4