Adding support for a custom end icon for the TextInputLayout.

A user-specified icon can now be set via app:endIconMode="custom" and attributes app:endIconDrawable and app:endIconContentDescription. It is also possible to set a custom OnClickListener via TextInputLayout's end icon API. PiperOrigin-RevId: 234671237
material-components · Feb 24, 2019 · 5685941 · 5685941
1 parent ba719ba
commit 5685941
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 1 deletion.
diff --git a/catalog/java/io/material/catalog/textfield/res/layout/cat_textfield_filled_content.xml b/catalog/java/io/material/catalog/textfield/res/layout/cat_textfield_filled_content.xml
@@ -85,6 +85,23 @@
         android:layout_height="wrap_content"/>
   </com.google.android.material.textfield.TextInputLayout>
 
+  <com.google.android.material.textfield.TextInputLayout
+      style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="4dp"
+      android:hint="@string/cat_textfield_label"
+      app:errorEnabled="true"
+      app:helperText="@string/cat_textfield_filled_custom_end_icon_helper_text"
+      app:helperTextEnabled="true"
+      app:endIconMode="custom"
+      app:endIconDrawable="@drawable/ic_accelerator_24px"
+      app:endIconContentDescription="@string/cat_textfield_custom_end_icon_content_description">
+    <com.google.android.material.textfield.TextInputEditText
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"/>
+  </com.google.android.material.textfield.TextInputLayout>
+
   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/text_input_demo_box_filled_start_icon"
       style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

diff --git a/catalog/java/io/material/catalog/textfield/res/layout/cat_textfield_outline_content.xml b/catalog/java/io/material/catalog/textfield/res/layout/cat_textfield_outline_content.xml
@@ -72,6 +72,23 @@
         android:layout_height="wrap_content"/>
   </com.google.android.material.textfield.TextInputLayout>
 
+  <com.google.android.material.textfield.TextInputLayout
+      style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_margin="4dp"
+      android:hint="@string/cat_textfield_label"
+      app:errorEnabled="true"
+      app:helperText="@string/cat_textfield_outline_custom_end_icon_helper_text"
+      app:helperTextEnabled="true"
+      app:endIconMode="custom"
+      app:endIconDrawable="@drawable/ic_accelerator_24px"
+      app:endIconContentDescription="@string/cat_textfield_custom_end_icon_content_description">
+    <com.google.android.material.textfield.TextInputEditText
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"/>
+  </com.google.android.material.textfield.TextInputLayout>
+
   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/text_input_demo_box_outline_start_icon"
       style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

diff --git a/catalog/java/io/material/catalog/textfield/res/values/strings.xml b/catalog/java/io/material/catalog/textfield/res/values/strings.xml
@@ -32,10 +32,13 @@
   </string>
   <string name="cat_textfield_filled_start_icon_helper_text">Filled start icon text field</string>
   <string name="cat_textfield_filled_clear_button_helper_text">Filled clear button text field</string>
+  <string name="cat_textfield_filled_custom_end_icon_helper_text">Filled custom end icon text field</string>
   <string name="cat_textfield_outline_helper_text">Outline text field</string>
   <string name="cat_textfield_outline_dense_helper_text">Dense outline text field</string>
   <string name="cat_textfield_outline_start_icon_helper_text">Outline start icon text field</string>
   <string name="cat_textfield_outline_clear_button_helper_text">Outline clear button text field</string>
+  <string name="cat_textfield_outline_custom_end_icon_helper_text">Outline custom end icon text field</string>
+  <string name="cat_textfield_custom_end_icon_content_description">Custom end icon</string>
 
   <string name="cat_textfield_customize_section_title">Customize text fields</string>
   <string name="cat_textfield_customize_section_description">

diff --git a/lib/java/com/google/android/material/textfield/TextInputLayout.java b/lib/java/com/google/android/material/textfield/TextInputLayout.java
@@ -106,6 +106,10 @@
  *       disguised, when your EditText is set to display a password.
  *   <li>Clearing text functionality via {@link #setEndIconMode(int)} API and related attribute. If
  *       set, a button is displayed when text is present and clicking it clears the EditText field.
+ *   <li>Showing a custom icon specified by the user via {@link #setEndIconMode(int)} API and
+ *       related attribute. The user should specify a drawable and content description for the icon.
+ *       Optionally, the user can also specify an {@link android.view.View.OnClickListener}, an
+ *       {@link OnEndIconInitializedListener} and an {@link OnEndIconChangedListener}.
  *       <p><strong>Note:</strong> When using an end icon, the 'end' compound drawable of the
  *       EditText will be overridden while the end icon view is visible. To ensure that any existing
  *       drawables are restored correctly, you should set those compound drawables relatively
@@ -217,10 +221,23 @@ public class TextInputLayout extends LinearLayout {
   private Typeface typeface;
 
   /** Values for the end icon mode. */
-  @IntDef({END_ICON_NONE, END_ICON_PASSWORD_TOGGLE, END_ICON_CLEAR_TEXT})
+  @IntDef({END_ICON_CUSTOM, END_ICON_NONE, END_ICON_PASSWORD_TOGGLE, END_ICON_CLEAR_TEXT})
   @Retention(RetentionPolicy.SOURCE)
   public @interface EndIconMode {}
 
+  /**
+   * The TextInputLayout will show a custom icon specified by the user.
+   *
+   * @see #setEndIconMode(int)
+   * @see #getEndIconMode()
+   * @see #setEndIconDrawable(Drawable)
+   * @see #setEndIconContentDescription(CharSequence)
+   * @see #setEndIconOnClickListener(OnClickListener) (optionally)
+   * @see #addOnEndIconInitializedListener(OnEndIconInitializedListener) (optionally)
+   * @see #addOnEndIconChangedListener(OnEndIconChangedListener) (optionally)
+   */
+  public static final int END_ICON_CUSTOM = -1;
+
   /**
    * Default for the TextInputLayout. It will not display an end icon.
    *
@@ -1978,6 +1995,10 @@ public void setEndIconMode(@EndIconMode int endIconMode) {
                   .inflate(R.layout.design_text_input_end_icon, inputFrame, false);
     }
     switch (endIconMode) {
+      case END_ICON_CUSTOM:
+        setEndIconOnClickListener(null);
+        setEndIconVisible(true);
+        break;
       case END_ICON_PASSWORD_TOGGLE:
         // Set defaults for the password toggle end icon
         setEndIconPasswordToggleDefaults();
@@ -2021,6 +2042,8 @@ public int getEndIconMode() {
   public void setEndIconOnClickListener(@Nullable OnClickListener onClickListener) {
     if (endIconView != null) {
       endIconView.setOnClickListener(onClickListener);
+      endIconView.setFocusable(onClickListener != null);
+      endIconView.setClickable(onClickListener != null);
     }
   }
 

diff --git a/lib/java/com/google/android/material/textfield/res/values/attrs.xml b/lib/java/com/google/android/material/textfield/res/values/attrs.xml
@@ -71,6 +71,8 @@
     <!-- The end icon mode of the TextInputLayout. It will display one of the end icons detailed
          below, or no end icon. -->
     <attr name="endIconMode">
+      <!-- The view will display a custom icon specified by the user. -->
+      <enum name="custom" value="-1"/>
       <!-- No end icon. -->
       <enum name="none" value="0"/>
       <!-- The view will display a toggle when the EditText has a password. -->