TextInputLayout errorDrawable doesn't render a vector properly

user_1348423 0
Viewed 82

So I have a simple TextInputLayout

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailAddressTil"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:errorIconDrawable="@drawable/ic_error_icon_email"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/Email_address" />

    </com.google.android.material.textfield.TextInputLayout>

The error drawable that I am trying to set in is this

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="26dp"
    android:height="26dp"
    android:viewportWidth="26"
    android:viewportHeight="26">
  <path
      android:pathData="M13,13m-13,0a13,13 0,1 1,26 0a13,13 0,1 1,-26 0"
      android:fillColor="#e54e54"/>
  <path
      android:pathData="M14.791,18.81c-1.11,0 -2.221,0.014 -3.331,0 -1.056,-0.017 -2.112,-0.06 -3.168,-0.107 -0.594,-0.026 -1.191,-0.058 -1.781,-0.132a1.374,1.374 0,0 1,-1.1 -1.908c0.436,-1.018 0.885,-2.032 1.377,-3.025a49.66,49.66 0,0 1,5.046 -8.1,1.4 1.4,0 0,1 2.328,-0.03 50.434,50.434 0,0 1,2.982 4.353,49.873 49.873,0 0,1 3.424,6.669 1.39,1.39 0,0 1,-0.948 1.945,4.978 4.978,0 0,1 -0.806,0.094q-1.748,0.112 -3.5,0.21c-0.177,0.01 -0.354,0 -0.532,0ZM14.05,9.975h0c0,-0.207 0.006,-0.413 0,-0.62a0.69,0.69 0,0 0,-0.673 -0.72,5.693 5.693,0 0,0 -0.738,0 0.638,0.638 0,0 0,-0.629 0.6c-0.029,0.672 -0.037,1.344 -0.039,2.017 0,0.477 0.014,0.955 0.038,1.432a0.639,0.639 0,0 0,0.536 0.579,4.08 4.08,0 0,0 0.67,0.033c0.588,-0.026 0.837,-0.294 0.838,-0.884C14.053,11.603 14.053,10.79 14.053,9.976ZM11.965,15.602h0c0,0.177 -0.006,0.354 0,0.531a0.68,0.68 0,0 0,0.647 0.649q0.4,0.01 0.794,0a0.676,0.676 0,0 0,0.642 -0.651c0,-0.347 0.006,-0.694 0,-1.042a0.661,0.661 0,0 0,-0.65 -0.639c-0.247,0 -0.495,-0.007 -0.742,0a0.68,0.68 0,0 0,-0.693 0.711C11.964,15.308 11.965,15.455 11.965,15.603Z"
      android:fillColor="#fff"/>
</vector>

I just get a red dot enter image description here

Any ideas how to get this fixed.

android-textinputlayout material-components-android android
2 Answers

You have to apply app:errorIconTint="@null" to avoid to tint the error icon:

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/emailAddressTil"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            app:errorIconDrawable="@drawable/ic_error_icon_email"
            app:errorIconTint="@null"

enter image description here

user_20165620

By default the errorIconTint is red & also The tint is drawn on top of the drawable which creates such result.

To have your icon as it is you need to set errorIconTint to transparent & errorIconTintMode to screen.

Your final TextInputLayout would look something like this:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailAddressTil"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="24dp"
        app:errorIconDrawable="@drawable/ic_error_icon_email"
        app:errorIconTint="@android:color/transparent"
        app:errorIconTintMode="screen">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/Email_address" />

    </com.google.android.material.textfield.TextInputLayout>
user_97153390
Related