Android Material Text Input Layout End Icon Not Showing

Question

I am trying to add an end Icon Drawable to my text input layout. I've come across the methods to do so but when I try to implement it, it does not work.

Material io says that all that is needed to display a trailing icon is to add app:endIconDrawable="@drawable/your_icon_here" When I do this I do not get an icon to display. The Icon I am using was downloaded as an SVG from Google's material icons library and I imported it into project as a vector asset.

Below is my code and a picture of the results I get. (I've broken the lines to make finding the call for the icon easier)

<com.google.android.material.textfield.TextInputLayout
  android:id="@+id/input_layout_event_name"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="8dp"
  android:hint="@string/ec_event_name"

  app:endIconDrawable="@drawable/ic_event_black_24dp"

  app:errorEnabled="false"
  app:boxBackgroundColor="@android:color/transparent"
  android:background="@android:color/transparent">

     <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/input_event_name"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="textAutoCorrect" />

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

Any help is appreciated!

score 57 · Accepted Answer · edited Aug 16 '21 at 09:13

57

End icon isn't visible because it's disabled by default (END_ICON_NONE). Add this attribute to TextInputLayout:

app:endIconMode="custom"

edited Aug 16 '21 at 09:13

Vadik Sirekanyan

3,332
1
22
29

answered Aug 15 '21 at 11:39

Vladislav Krutskikh

586
4
4

11

This is quite stupid from the API perspective, because both start and end icon should have the same options in the same way available. Start icon is shown immediately. – Chapz Dec 05 '21 at 16:40

score 8 · Answer 2 · answered Aug 28 '21 at 14:42

8

You need to use this way:

<com.google.android.material.textfield.TextInputLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconDrawable="@drawable/ic_calendar"
    app:endIconMode="custom">

answered Aug 28 '21 at 14:42

Rasoul Miri

11,234
1
68
78

score 3 · Answer 3 · edited Aug 15 '21 at 17:19

3

Use android:drawableEnd in your TextInputEditText:

android:drawableEnd="@drawable/your_icon_here"

edited Aug 15 '21 at 17:19

Vadik Sirekanyan

3,332
1
22
29

answered Jul 15 '21 at 15:57

Prasad Mhapankar

107
11

This works if added to the `com.google.android.material.textfield.TextInputEditText` which isn't exactly what I wanted but it works well enough that I'm going to run with it. Just a note for anyone in the future using this method sets the icon slightly lower than it would if attempted with my original method. – Amxela Jul 15 '21 at 16:24
No. Using `TextInputLayout` you should avoid the usage of `android:drawableEnd`. You need to add `app:endIconMode="custom"` to the `TextInputLayout`. – Gabriele Mariotti Aug 16 '21 at 22:38

Han Nguyen · Answer 4 · 2021-08-22T15:13:12.487

1

You missed attribute app:passwordToggleEnabled="true" or app:endIconMode="password_toggle" at TextInputLayout.

edited Aug 22 '21 at 15:13

answered Aug 19 '21 at 07:55

Han Nguyen

31
2

1

I don't understand what is the logic behind but after adding this line my icon is showing app:passwordToggleEnabled="true" – Andrain Aug 30 '21 at 23:36
Attribute above permit toggle, click to change Icon of eye is corresponding with status of password is hide or show. You can also control show/hide password by code. //Show Password: `editText.setTransformationMethod(HideReturnsTransformationMethod.getInstance())` //Hide Password: `editText.setTransformationMethod(PasswordTransformationMethod.getInstance())` – Han Nguyen Sep 01 '21 at 04:49
@HanNguyen's answer is for those who want to add a custom password toggle drawable (i.e. hide/show eye icon) as an end icon. It's what I was looking for. Adding the `app:passwordToggleEnabled="true"` property works for me. Thank you! – zeenosaur Jan 25 '22 at 07:21

score -1 · Answer 5 · edited Oct 02 '22 at 17:50

-1

Use this

app:endIconMode="custom"
app:endIconDrawable="@drawable/ic_baseline_edit_calendar_24"

edited Oct 02 '22 at 17:50

Dr Mido

2,414
4
32
72

answered Sep 27 '22 at 07:50

Ramesh Gandhi

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). For example, you have used a drawable `ic_baseline_edit_calendar_24` which might not be present in the OPs code. – Abhishek Dutt Sep 30 '22 at 07:24

Android Material Text Input Layout End Icon Not Showing

5 Answers5