Implementing error icon for text fields.

They are set by default when the text field is on error state, but can be disabled by setting the error icon drawable to null via the errorIconDrawable attribute or the setErrorIconDrawable method.

PiperOrigin-RevId: 260495196

Author: leticiarossi

lib/java/com/google/android/material/textfield/DropdownMenuEndIconDelegate.java

@@ -126,6 +126,7 @@ public void onEditTextAttached(EditText editText) {
           autoCompleteTextView.setThreshold(0);
           editText.removeTextChangedListener(exposedDropdownEndIconTextWatcher);
           editText.addTextChangedListener(exposedDropdownEndIconTextWatcher);
+          textInputLayout.setErrorIconDrawable(null);
           textInputLayout.setTextInputAccessibilityDelegate(accessibilityDelegate);
 
           textInputLayout.setEndIconVisible(true);

lib/java/com/google/android/material/textfield/TextInputLayout.java

@@ -349,6 +349,7 @@ public interface OnEndIconChangedListener {
   private boolean hasEndIconTintMode;
   private Drawable endIconDummyDrawable;
   private Drawable originalEditTextEndDrawable;
+  private final CheckableImageButton errorIconView;
 
   private ColorStateList defaultHintTextColor;
   private ColorStateList focusedTextColor;
@@ -522,6 +523,32 @@ public TextInputLayout(Context context, @Nullable AttributeSet attrs, int defSty
     final int errorTextAppearance =
         a.getResourceId(R.styleable.TextInputLayout_errorTextAppearance, 0);
     final boolean errorEnabled = a.getBoolean(R.styleable.TextInputLayout_errorEnabled, false);
+    // Initialize error icon view.
+    errorIconView =
+        (CheckableImageButton)
+            LayoutInflater.from(getContext())
+                .inflate(R.layout.design_text_input_end_icon, inputFrame, false);
+    inputFrame.addView(errorIconView);
+    errorIconView.setVisibility(GONE);
+    if (a.hasValue(R.styleable.TextInputLayout_errorIconDrawable)) {
+      setErrorIconDrawable(a.getDrawable(R.styleable.TextInputLayout_errorIconDrawable));
+    }
+    if (a.hasValue(R.styleable.TextInputLayout_errorIconTint)) {
+      setErrorIconTintList(
+          MaterialResources.getColorStateList(
+              context, a, R.styleable.TextInputLayout_errorIconTint));
+    }
+    if (a.hasValue(R.styleable.TextInputLayout_errorIconTintMode)) {
+      setErrorIconTintMode(
+          ViewUtils.parseTintMode(
+              a.getInt(R.styleable.TextInputLayout_errorIconTintMode, -1), null));
+    }
+    errorIconView.setContentDescription(
+        getResources().getText(R.string.error_icon_content_description));
+    ViewCompat
+        .setImportantForAccessibility(errorIconView, ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
+    errorIconView.setClickable(false);
+    errorIconView.setFocusable(false);
 
     final int helperTextTextAppearance =
         a.getResourceId(R.styleable.TextInputLayout_helperTextTextAppearance, 0);
@@ -1051,6 +1078,7 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {}
 
     startIconView.bringToFront();
     endIconView.bringToFront();
+    errorIconView.bringToFront();
     dispatchOnEditTextAttached();
 
     // Update the label visibility with no animation, but force a state change
@@ -1422,6 +1450,75 @@ public void setError(@Nullable final CharSequence errorText) {
     }
   }
 
+  /**
+   * Set the drawable to use for the error icon.
+   *
+   * @param resId resource id of the drawable to set, or 0 to clear the icon
+   * @attr ref com.google.android.material.R.styleable#TextInputLayout_errorIconDrawable
+   */
+  public void setErrorIconDrawable(@DrawableRes int resId) {
+    setErrorIconDrawable(resId != 0 ? AppCompatResources.getDrawable(getContext(), resId) : null);
+  }
+
+  /**
+   * Set the drawable to use for the error icon.
+   *
+   * @param errorIconDrawable Drawable to set, may be null to clear the icon
+   * @attr ref com.google.android.material.R.styleable#TextInputLayout_errorIconDrawable
+   */
+  public void setErrorIconDrawable(@Nullable Drawable errorIconDrawable) {
+    errorIconView.setImageDrawable(errorIconDrawable);
+    setErrorIconVisible(errorIconDrawable != null);
+  }
+
+  /**
+   * Returns the drawable currently used for the error icon.
+   *
+   * @see #setErrorIconDrawable(Drawable)
+   * @attr ref com.google.android.material.R.styleable#TextInputLayout_errorIconDrawable
+   */
+  @Nullable
+  public Drawable getErrorIconDrawable() {
+    return errorIconView.getDrawable();
+  }
+
+  /**
+   * Applies a tint to the error icon drawable.
+   *
+   * @param errorIconTintList the tint to apply, may be null to clear tint
+   * @attr ref com.google.android.material.R.styleable#TextInputLayout_errorIconTint
+   */
+  public void setErrorIconTintList(@Nullable ColorStateList errorIconTintList) {
+    Drawable icon = errorIconView.getDrawable();
+    if (icon != null) {
+      icon = DrawableCompat.wrap(icon).mutate();
+      DrawableCompat.setTintList(icon, errorIconTintList);
+    }
+
+    if (errorIconView.getDrawable() != icon) {
+      errorIconView.setImageDrawable(icon);
+    }
+  }
+
+  /**
+   * Specifies the blending mode used to apply tint to the end icon drawable. The default mode is
+   * {@link PorterDuff.Mode#SRC_IN}.
+   *
+   * @param errorIconTintMode the blending mode used to apply the tint, may be null to clear tint
+   * @attr ref com.google.android.material.R.styleable#TextInputLayout_errorIconTintMode
+   */
+  public void setErrorIconTintMode(@Nullable PorterDuff.Mode errorIconTintMode) {
+    Drawable icon = errorIconView.getDrawable();
+    if (icon != null) {
+      icon = DrawableCompat.wrap(icon).mutate();
+      DrawableCompat.setTintMode(icon, errorIconTintMode);
+    }
+
+    if (errorIconView.getDrawable() != icon) {
+      errorIconView.setImageDrawable(icon);
+    }
+  }
+
   /**
    * Whether the character counter functionality is enabled or not in this layout.
    *
@@ -2270,7 +2367,7 @@ public void setEndIconVisible(boolean visible) {
    * @see #setEndIconVisible(boolean)
    */
   public boolean isEndIconVisible() {
-    return endIconView.getVisibility() == View.VISIBLE;
+    return endIconView.getParent() != null && endIconView.getVisibility() == View.VISIBLE;
   }
 
   /**
@@ -2758,15 +2855,16 @@ private boolean updateIconDummyDrawables() {
       updatedIcon = true;
     }
 
-    // Update end icon drawable if needed.
-    if (hasEndIcon() && isEndIconVisible() && endIconView.getMeasuredWidth() > 0) {
+    // Update end icon or error icon drawable if needed.
+    CheckableImageButton iconView = getEndIconToUpdateDummyDrawable();
+    if (iconView != null && iconView.getMeasuredWidth() > 0) {
       if (endIconDummyDrawable == null) {
         endIconDummyDrawable = new ColorDrawable();
         int right =
-            endIconView.getMeasuredWidth()
+            iconView.getMeasuredWidth()
                 - editText.getPaddingRight()
                 + MarginLayoutParamsCompat.getMarginStart(
-                    ((MarginLayoutParams) endIconView.getLayoutParams()));
+                    ((MarginLayoutParams) iconView.getLayoutParams()));
         endIconDummyDrawable.setBounds(0, 0, right, 1);
       }
       final Drawable[] compounds = TextViewCompat.getCompoundDrawablesRelative(editText);
@@ -2791,6 +2889,17 @@ private boolean updateIconDummyDrawables() {
     return updatedIcon;
   }
 
+  @Nullable
+  private CheckableImageButton getEndIconToUpdateDummyDrawable() {
+    if (errorIconView.getVisibility() == VISIBLE) {
+      return errorIconView;
+    } else if (hasEndIcon() && isEndIconVisible()) {
+      return endIconView;
+    } else {
+      return null;
+    }
+  }
+
   private void applyIconTint(
       CheckableImageButton iconView,
       boolean hasIconTintList,
@@ -2987,6 +3096,8 @@ void updateTextInputBoxState() {
     tintEndIconOnError(
         indicatorViewController.errorShouldBeShown()
             && getEndIconDelegate().shouldTintIconOnError());
+    setErrorIconVisible(
+        getErrorIconDrawable() != null && indicatorViewController.errorShouldBeShown());
 
     // Update the text box's stroke width based on the current state.
     if ((isHovered || hasFocus) && isEnabled()) {
@@ -3009,6 +3120,25 @@ void updateTextInputBoxState() {
     applyBoxAttributes();
   }
 
+  private void setErrorIconVisible(boolean errorIconVisible) {
+    int newErrorIconVisibility = errorIconVisible ? VISIBLE : GONE;
+    if (errorIconView.getVisibility() == newErrorIconVisibility) {
+      return;
+    }
+
+    errorIconView.setVisibility(newErrorIconVisibility);
+
+    if (errorIconVisible) {
+      inputFrame.removeView(endIconView);
+    } else if (endIconView.getParent() == null) {
+      inputFrame.addView(endIconView);
+    }
+
+    if (!hasEndIcon()) {
+      updateIconDummyDrawables();
+    }
+  }
+
   private void expandHint(boolean animate) {
     if (animator != null && animator.isRunning()) {
       animator.cancel();

lib/java/com/google/android/material/textfield/res-public/values/public.xml

@@ -45,6 +45,9 @@
   <public name="errorEnabled" type="attr"/>
   <public name="errorTextAppearance" type="attr"/>
   <public name="errorTextColor" type="attr"/>
+  <public name="errorIconDrawable" type="attr"/>
+  <public name="errorIconTint" type="attr"/>
+  <public name="errorIconTintMode" type="attr"/>
   <public name="helperText" type="attr"/>
   <public name="helperTextEnabled" type="attr"/>
   <public name="helperTextTextAppearance" type="attr"/>

lib/java/com/google/android/material/textfield/res/drawable/mtrl_ic_error.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2019 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+-->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:height="24dp"
+  android:viewportHeight="24.0"
+  android:viewportWidth="24.0"
+  android:width="24dp">
+
+  <path
+    android:fillColor="@android:color/white"
+    android:pathData="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+
+</vector>

lib/java/com/google/android/material/textfield/res/values/attrs.xml

@@ -52,6 +52,27 @@
     <!-- Text color for any error message displayed.
          If set, this takes precedence over errorTextAppearance. -->
     <attr name="errorTextColor" format="color"/>
+    <!-- End icon to be shown when an error is displayed. -->
+    <attr name="errorIconDrawable" format="reference"/>
+    <!-- Tint color to use for the error icon. -->
+    <attr name="errorIconTint" format="reference"/>
+    <!-- Blending mode used to apply the error icon tint. -->
+    <attr name="errorIconTintMode">
+      <!-- The tint is drawn on top of the drawable.
+           [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] -->
+      <enum name="src_over" value="3"/>
+      <!-- The tint is masked by the alpha channel of the drawable. The drawable’s
+           color channels are thrown out. [Sa * Da, Sc * Da] -->
+      <enum name="src_in" value="5"/>
+      <!-- The tint is drawn above the drawable, but with the drawable’s alpha
+           channel masking the result. [Da, Sc * Da + (1 - Sa) * Dc] -->
+      <enum name="src_atop" value="9"/>
+      <!-- Multiplies the color and alpha channels of the drawable with those of
+           the tint. [Sa * Da, Sc * Dc] -->
+      <enum name="multiply" value="14"/>
+      <!-- [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] -->
+      <enum name="screen" value="15"/>
+    </attr>
 
     <!-- Whether the layout is laid out as if the character counter will be displayed. -->
     <attr name="counterEnabled" format="boolean"/>

lib/java/com/google/android/material/textfield/res/values/strings.xml

@@ -27,4 +27,6 @@
   <string name="clear_text_end_icon_content_description">Clear text</string>
   <!-- Content description for the exposed dropdown menu button. [CHAR LIMIT=NONE] -->
   <string name="exposed_dropdown_menu_content_description">Show dropdown menu</string>
+  <!-- Content description for the error icon. [CHAR LIMIT=NONE] -->
+  <string name="error_icon_content_description">Error</string>
 </resources>

lib/java/com/google/android/material/textfield/res/values/styles.xml

@@ -26,6 +26,7 @@
     <item name="passwordToggleDrawable">@drawable/design_password_eye</item>
     <item name="passwordToggleTint">@color/design_icon_tint</item>
     <item name="passwordToggleContentDescription">@string/password_toggle_content_description</item>
+    <item name="errorIconDrawable">@null</item>
     <item name="endIconTint">@color/design_icon_tint</item>
     <item name="startIconTint">@color/design_icon_tint</item>
 
@@ -52,6 +53,8 @@
 
     <item name="boxBackgroundMode">outline</item>
     <item name="boxBackgroundColor">@null</item>
+    <item name="errorIconDrawable">@drawable/mtrl_ic_error</item>
+    <item name="errorIconTint">@color/mtrl_error</item>
     <item name="endIconTint">@color/mtrl_outlined_icon_tint</item>
     <item name="startIconTint">@color/mtrl_outlined_icon_tint</item>
     <item name="boxCollapsedPaddingTop">0dp</item>

tests/javatests/com/google/android/material/textfield/ExposedDropdownMenuTest.java

@@ -28,6 +28,7 @@
 import static androidx.test.espresso.contrib.AccessibilityChecks.accessibilityAssertion;
 import static androidx.test.espresso.matcher.ViewMatchers.isDescendantOfA;
 import static androidx.test.espresso.matcher.ViewMatchers.isRoot;
+import static androidx.test.espresso.matcher.ViewMatchers.withContentDescription;
 import static androidx.test.espresso.matcher.ViewMatchers.withId;
 import static org.hamcrest.MatcherAssert.assertThat;
 import static org.hamcrest.Matchers.allOf;
@@ -140,7 +141,9 @@ public void testEndIconHasDefaultContentDescription() {
 
   @Test
   public void testEndIconIsAccessible() {
-    onView(allOf(withId(R.id.text_input_end_icon), isDescendantOfA(withId(R.id.filled_dropdown))))
+    onView(allOf(withId(R.id.text_input_end_icon),
+        withContentDescription(R.string.exposed_dropdown_menu_content_description),
+        isDescendantOfA(withId(R.id.filled_dropdown))))
         .check(accessibilityAssertion());
   }
 }