CODEWITHSUNDEEP
androidxmlandroid-stylesandroid-textinputlayout
MiaN KhaLiD
MiaN KhaLiD

Reputation: 1518

Android | Change theme of TextInputLayout using styles.xml

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 :)

Upvotes: 13

Views: 21450

Answers (4)

oursgris
oursgris

Reputation: 2882

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>

Upvotes: 12

Johny
Johny

Reputation: 531

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>

Upvotes: 0

corsair992
corsair992

Reputation: 3070

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.

Upvotes: 14

ShahrozKhan91
ShahrozKhan91

Reputation: 710

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>

Upvotes: -2

Related Questions