CODEWITHSUNDEEP
androidxmlmaterial-designandroid-textinputlayoutmaterial-components
Essay97
Essay97

Reputation: 874

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

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?

Upvotes: 2

Views: 5425

Answers (6)

user4655559
user4655559

Reputation: 

    <item name="colorOnSurface">@color/yourcolor</item>

EDIT for Corn on the Cob in comments

<style name="Theme.yourStyleName" parent="ThemeOverlay.Material3.TextInputEditText">
  
    <item name="colorOnSurface">@color/black</item>
   

</style>

colorOnSurface will chage the color of the text inside the edittext.

In Your Layout.xml

                    <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:theme="@style/Theme.yourStyleName"
                    android:layout_height="48dp" />

Upvotes: 1

gmanjon
gmanjon

Reputation: 1521

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>

Upvotes: 2

Pabasaraa
Pabasaraa

Reputation: 1

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.

Upvotes: 0

Aleem Sheikh
Aleem Sheikh

Reputation: 1

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

Upvotes: -1

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363825

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>

Upvotes: 0

Shahood ul Hassan
Shahood ul Hassan

Reputation: 789

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

Upvotes: -1

Related Questions