CODEWITHSUNDEEP
androidandroid-layoutandroid-textinputlayout
Amxela
Amxela

Reputation: 696

Android Material Text Input Layout End Icon Not Showing

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>

Results in simulator of above code

Any help is appreciated!

Upvotes: 24

Views: 18619

Answers (7)

Anubhav
Anubhav

Reputation: 2180

As suggested in the other answers, use the following properties,

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

I faced a situation where the drawable did not show up like the actual image, but was a solid black/grey image, adding the following line solved that,

 app:endIconTint="@null"

Upvotes: 0

Pedro Henrique Mac&#234;do da Silva
Pedro Henrique Mac&#234;do da Silva

Reputation: 51

I know that issue is old, but for the devs after 2023, the InputTextLayout is doesn't showing the icons in preview, but if you run the app, the icons will be there. Just do something like this:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/til_vamep_input_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:endIconDrawable="@drawable/ic_your_icon" //Your icon here
    app:endIconMode="custom" //Don't forget it
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="parent">

    <TextInputEditText.../>

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

Upvotes: 5

Ramesh Gandhi
Ramesh Gandhi

Reputation: 11

Use this

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

Upvotes: 0

Rasoul Miri
Rasoul Miri

Reputation: 12222

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

Upvotes: 8

Han Nguyen
Han Nguyen

Reputation: 41

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

Upvotes: 1

Vladislav Krutskikh
Vladislav Krutskikh

Reputation: 706

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

app:endIconMode="custom"

Upvotes: 69

Prasad Mhapankar
Prasad Mhapankar

Reputation: 107

Use android:drawableEnd in your TextInputEditText:

android:drawableEnd="@drawable/your_icon_here"

Upvotes: 3

Related Questions