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>

Answer 1

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.