TextInputLayout outline hint color

Question

I have a strange bug on a TextInputLayout. The color of the hint of the com.google.android.material.textfield.TextInputEditText goes white on focus.

this is how I am setting it:

<com.google.android.material.textfield.TextInputLayout
                        android:id="@+id/inputEmail"
                        style="@style/EditText.OutlinedBox"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="10dp"
                        android:layout_marginEnd="16dp"
                        app:boxStrokeColor="@color/colorBrand">

                        <com.google.android.material.textfield.TextInputEditText
                            android:id="@+id/editTextEmail"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="start"
                            android:hint="@string/edt_hint_email"
                            android:inputType="textEmailAddress"
                            android:textAlignment="viewStart" />
                    </com.google.android.material.textfield.TextInputLayout>

..and this is the style:

 <style name="EditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:minHeight">56dp</item>
        <item name="android:textSize">18sp</item>
        <item name="android:fontFamily">@font/dubai_regular</item>
        <item name="hintEnabled">true</item>
    </style>

edit: add style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="TextAppearance.AppCompat.Title" parent="TextAppearance.AppCompat.Large">
        <item name="android:textColor">@color/colorTextPrimary</item>
        <item name="android:layout_gravity">center_vertical</item>
    </style>


    <style name="EditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="android:minHeight">56dp</item>
        <item name="android:textSize">18sp</item>
        <item name="android:fontFamily">@font/dubai_regular</item>
        <item name="hintEnabled">true</item>
    </style>

    <style name="Button" parent="Widget.MaterialComponents.Button">
        <item name="cornerRadius">10dp</item>
        <item name="backgroundTint">@color/colorAccent</item>
        <item name="android:minHeight">56dp</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:fontFamily">@font/dubai_bold</item>
        <item name="android:elevation">0dp</item>
        <item name="android:stateListAnimator">@null</item>
    </style>


    <style name="Button.Primary">
        <item name="backgroundTint">@color/colorAccent</item>
    </style>


    <style name="DialogAnimation">
        <item name="android:windowEnterAnimation">@anim/slide_up_dialog</item>
        <item name="android:windowExitAnimation">@anim/slide_out_down</item>
    </style>

    <style name="Tag" parent="TextAppearance.AppCompat">
        <item name="android:background">@drawable/tag_navy</item>
        <item name="android:fontFamily">@font/dubai_bold</item>
        <item name="android:textSize">12sp</item>
        <item name="android:paddingStart">16dp</item>
        <item name="android:paddingEnd">16dp</item>
        <item name="android:paddingTop">6dp</item>
        <item name="android:paddingBottom">6dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/colorWhite</item>
    </style>


    <style name="Tag.Closed">
        <item name="android:background">@drawable/ic_tag_closed</item>
        <item name="android:textAllCaps">true</item>
    </style>

    <style name="Tab.TextAppearance" parent="TextAppearance.AppCompat">
        <item name="android:textSize">14sp</item>
        <item name="android:fontFamily">@font/dubai_bold</item>
    </style>

</resources>

What is the material lib version you're using? I tried with `com.google.android.material:material:1.1.0-alpha08` and it was working perfectly — sanoJ, Jul 14 '19 at 16:04
i am using `com.google.android.material:material:1.1.0-alpha07` — ghita, Jul 14 '19 at 16:12
i have updated to `alpha08` but the problem persists. `pixel xl os 8.1` — ghita, Jul 14 '19 at 16:17
For me, it's working in both `alpha07` and `alpha08`. Can you add your complete `style.xml` — sanoJ, Jul 14 '19 at 16:20
yes, I have added it. there must be something, but i cannot figure out what could be the cause — ghita, Jul 14 '19 at 16:53
`android:hint="@string/edt_hint_email` add it in the `TextInputLayout` instead of `edittext` — Santanu Sur, Jul 14 '19 at 16:59

score 16 · Accepted Answer · answered Jul 14 '19 at 16:59

16

Just Add Hint text color inside your EditText.OutlinedBox style.

TextInputLayout have specified the property for changing the color of hint and error.

<item name="android:textColorHint"> #Your Color </item>
<item name="hintTextColor"> #Your Color </item>

Here I have two different Hint Text color specified 1) android:textColorHint and 2) hintTextColor

Because this both works differently.

android:textColorHint property will handle the text color of hint of the EditText.

hintTextColor property will handle the text color of hint on the outline box.

answered Jul 14 '19 at 16:59

Vijay Tahelramani

236
2
9

Great, thanks! It works, but Android Studio displays an error in my `styles.xml`: `Cannot resolve 'hintTextColor'` – Paul Spiesberger Oct 03 '19 at 09:54
```'hintTextColor'``` is not a default attribute provided by android style. I guess you have not implemented the material design library. so please try to do implement library then android studio should not show the error. – Vijay Tahelramani Oct 04 '19 at 11:55

score 1 · Answer 2 · answered Jul 14 '19 at 16:58

1

Try app:hintTextAppearance="@style/hintText" for TextInputLayout

<style name="hintText" parent="android:TextAppearance">
    <item name="android:textColor">your color</item>
</style>

answered Jul 14 '19 at 16:58

Om Prakash Agrahari

265
4
13

TextInputLayout outline hint color

2 Answers2