Android - How to change text color in TextInputLayout (Material Components)?

user_12212617 0
Viewed 2540

I need to change color in TextInputLayout text, without changing primary color. I only want to change the color of the text typed in by the user, not the hint. I can't find any attribute to do that... what I tried is:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
        <!-- Color definitions -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
        <item name="colorControlHighlight">@color/secondaryLightColor</item>
        <item name="colorButtonNormal">@color/secondaryColor</item>
        <item name="colorControlActivated">@color/secondaryColor</item>
        <item name="android:windowBackground">@color/colorWhite</item>
        <item name="android:textColorPrimary">@color/primaryTextColor</item>
        <item name="android:textColorSecondary">@color/secondaryTextColor</item>

        <item name="textInputStyle">@style/inputStyle</item>
    </style>

where the @style/inputStyle is:

    <style name="inputStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:textColor">@color/secondaryTextColor</item> 
    </style>

But it doesn't seem to work. I noticed that if i change the colorPrimary the text color chamges, but as I said, I can't change it. What do I have to do?

android-textinputlayout material-components material-design android xml
5 Answers

This is because you are applying the color to the wrong component. InputTexts in Material are composed of two different components:TextInputLayout and TextInputEditText.

In this Anatomy and Key Properties section of the Material Text Input Documentation you can read the following note:

Note: All the attributes on the tables below should be set on the TextInputLayout, with the exception of the input text attributes (which should be set on the TextInputEditText).

That means that depending on the TextInput part you want to style you will have to extend a different layout:

TextInputLayout: Widget.MaterialComponents.TextInputLayout.*

TextInputEditText: Widget.MaterialComponents.TextInputEditText.*

In the theme definition, to specify the style to apply to the TextInputLayout's you use textInputStyle, and to specify the TextInputEditText's style you use editTextStyle.

In your case, the text color is one of the TextInputEditText styles, and not TextInputLayout. So replace:

<item name="textInputStyle">@style/inputStyle</item>

with

<item name="editTextStyle">@style/editTextStyle</item>

And

<style name="inputStyle" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textColor">@color/secondaryTextColor</item> 
</style>

with

<style name="editTextStyle" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
    <item name="android:textColor">@color/secondaryTextColor</item> 
</style>

This will effectively change the text color of the input text.

Update I just realised you had already defined colorPrimaryText in the Theme.

Theme's colorPrimaryText is what prevails for the color of the text in the TextInput,so you either change that, or if you can't because affects other places, you override it... but it's not easy. You have to use materialThemeOverlay.

So first, use both textInputStyle and editTextStyle and instead of android:textColor in the Theme definition, and specify this in both of them:

<item name="materialThemeOverlay">@style/myOverridingOverlay</item>

And finally, define your overlay, without a parent:

<style name="myOverridingOverlay" parent="">
    <item name="android:textColorPrimary">#123456</item>
</style>
user_28071770

You need to place a TextInputEditText widget inside of TextInputLayout and in that, you can set textColor attribute as per normal.

user_79838640

You can change the input text color via the edit text's android:textColor attribute in the edittext:

   <com.google.android.material.textfield.TextInputLayout
     ..>

        <com.google.android.material.textfield.TextInputEditText
            android:textColor="#FF11AA"
            ../>

    </com.google.android.material.textfield.TextInputLayout>

Otherwise since the text color of the TextInputEditText is currently based on android:textColorPrimary color you can also override it also using:

        <com.google.android.material.textfield.TextInputEditText
            android:theme="@style/customEdit"
            ../>

with:

  <style name="customEdit">
    <item name="android:textColorPrimary">@color/....</item>
  </style>

Or you can define a custom style for the TextInputLayout:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/custom"
        ..>

with:

  <style name="custom" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="materialThemeOverlay">@style/MyTextInputEditText_filledBox_custom_color</item>
  </style>

  <style name="MyTextInputEditText_filledBox_custom_color" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <item name="android:textColorPrimary">@color/....</item>
  </style>
user_20165620

I know it's been almost 2 years now but I faced the same issue and looked for an answer the way I came up with is by just adding,

<item name="android:textColorPrimary">@color/yourColor</item>

to your app's themes.xml (style). That'll do the trick.

user_159262470

Just add this code inside the <com.google.android.material.textfield.TextInputLayout

android:textColorHint="yourcolor" <- this is the code to add

This will give color to it

user_154963190
Related