Search code examples
androidmaterial-designandroid-textinputlayoutandroid-textinputedittext

TextInputLayout changing my vector drawable to gray color

I'm updating my app UI UX and I had to change the theme from AppCompat to Theme.MaterialComponents.Light.NoActionBar. Suddenly now icon for my Material widgets having an issue. First I found the custom drawable I set for MaterialCheckBox changed to a single color which makes the checkbox looks like a gray cube The checkbox icon For this I was able to solve it by adding app:useMaterialThemeColors="false" in the XML.

As for TextInputLayout, I have no idea how to fix it. I need to put a custom password toggle icon, but due to this issue, I could only see an oval shape icon as it changes my drawable color into gray. My Password Toggle

My TextInputLayout

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MyTextInputLayoutStyle"
            android:hint="password"
            app:endIconDrawable="@drawable/selector_eye"
            app:startIconDrawable="@drawable/ic_password"
            app:endIconMode="password_toggle" >
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawablePadding="16dp"
                android:imeOptions="actionDone"
                android:background="@drawable/selector_edittext"
                android:inputType="textPassword" />

MyTextInputLayoutStyle Style

<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="fontFamily">@font/myfont</item>
    <item name="android:textSize">@dimen/_16ssp</item>
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
    <item name="boxBackgroundColor">@android:color/transparent</item>
    <item name="hintTextColor">@color/light_black</item>
    <item name="hintTextAppearance">@style/MyFont.10</item>
    <item name="errorTextColor">@color/error</item>
    <item name="errorTextAppearance">@style/MyFont.10</item>
</style>
Solution

  • After hours of try and error, finally found a solution(or this is a workaround? If there are better solution, please let me know).

    Adding app:endIconTint="@null" into my TextInputLayout solved the issue. Now my icon showing correct color as per my drawable.