backgroundTint property colores the whole TextInputEditText

Question

I want to set color just for editText underline. how can I achieve it ? as I mention in title, I tried to set backgroundTint property, but instead of coloring underline, the whole TextInputEditText is being colored

xml

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/passwordInputLayout"
                android:layout_width="384dp"
                android:layout_height="75dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:hint="@string/password_hint"
                android:textColorHint="@color/white"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/usernameInputLayout"
                app:passwordToggleEnabled="true"
                app:passwordToggleTint="#8E8E93">
    
                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/passwordInputEditText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:text="@={authViewModel._password}"
                    android:background="#00000000"
                    android:textColor="@color/white"/>
    </com.google.android.material.textfield.TextInputLayout>

Answer 1

Instead of setting the backgroundTint property, try the following code (which will enable you to set the underline color of the TextInputEditText and from then on you can customize it to your liking:

activity_main.xml:

 <com.google.android.material.textfield.TextInputLayout
        style="@style/textInputLayout.BlueLabel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Username"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            style="@style/textInputLayout.BlueLabel"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_marginTop="16dp" />
    </com.google.android.material.textfield.TextInputLayout>

styles.xml:

<resources>
    <style name="textInputLayout.BlueLabel"
        parent="Widget.Design.TextInputLayout">
        <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
    </style>

    <style name="AppTheme.TextFloatLabelAppearance"
        parent="TextAppearance.Design.Hint">
        <item name="hintTextColor">@color/teal_200</item> <!--Change underline color here-->
    </style>
</resources>

As you can see now, we have changed the underline color to a tealish-bluish color:

The only caveat is that the appearance of the TextInputLayout is not really 'material-like'. If you run into any bugs or issues let me know in the comments.