TextInputLayout errorDrawable 无法正确渲染矢量答案

【问题标题】：TextInputLayout errorDrawable doesn't render a vector properlyTextInputLayout errorDrawable 无法正确渲染矢量
【发布时间】：2021-07-18 06:58:51
【问题描述】：

所以我有一个简单的 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>

我试图设置的错误drawable是这个

<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>

我刚刚得到一个红点

关于如何解决这个问题的任何想法。

【问题讨论】：

标签： android material-components-android android-textinputlayout

【解决方案1】：

您必须申请 app:errorIconTint="@null" 以避免给错误图标着色：

        <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"

【讨论】：

【解决方案2】：

默认情况下，errorIconTint 是红色的，并且颜色会绘制在可绘制对象的顶部，从而产生这样的结果。

要让您的图标保持原样，您需要将errorIconTint 设置为transparent 和errorIconTintMode 设置为screen。

你的最终TextInputLayout 看起来像这样：

<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>

【讨论】：