Android TextInputLayout icon in error (or hint) text

Question

I am using a TextInputLayoutHelper widget in order to follow the material guidelines for floating label inputs. It currently looks like this:

My code

In my activities onCreate function, I have:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val passwordInputLayout = this.findViewById<TextInputLayoutHelper>(R.id.input_layout_password)
    passwordInputLayout.error = "8+ characters and at least one uppercase letter, a number, and a special character (\$, #, !)"
    passwordInputLayout.isErrorEnabled = true
}

and my widget in my xml looks like...

<TextInputLayout
    android:id="@+id/input_layout_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/EditTextTheme"
    app:errorEnabled="true"
    app:errorTextAppearance="@style/ErrorAppearance"
    app:passwordToggleDrawable="@drawable/asl_password_visibility"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="?colorControlNormal">

    <EditText
        android:id="@+id/password_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/set_a_password"
        android:inputType="textPassword"
        android:singleLine="true" />

</TextInputLayout>

What I want to do

I want to put an icon in the error/hint text (the exclamation triangle) to the right of the error text.

My Attempt

Attempt 1

I found an implementation which uses setError(text, drawable) but I am using Kotlin to setError is not available.

So I tried:

val warningIcon = ResourcesCompat.getDrawable(resources, R.drawable.ic_warning_black_24dp, null)
warningIcon?.setBounds(0, 0, warningIcon.intrinsicWidth, warningIcon.intrinsicHeight)

passwordInputLayout.error = "8+ characters and at least one uppercase letter, a number, and a special character (\$, #, !) $warningIcon"

but that does not render the drawable, only a string of the resource path.

Attempt 2

I found another one that overrides the TextInputLayoutHelper in order to set a drawable next to the text. As you can see, setError only contains the interface override fun setError(error: CharSequence?) which does not have a parameter for drawable.

override fun setError(error: CharSequence?) {
    super.setError(error)

    val warningIcon = ResourcesCompat.getDrawable(resources, R.drawable.ic_warning_black_24dp, null)
    warningIcon?.setBounds(0, 0, warningIcon.intrinsicWidth, warningIcon.intrinsicHeight)
    // mHelperView is a TextView used in my custom `TextInputLayout` override widget
    mHelperView!!.setCompoundDrawables(null, null, warningIcon, null)
}

Is there an override or built in "Android way" to add this icon next to the error/hint text?

What about putting all the edittext inside a frame layout and putting a view above it? — Uriel Frankel, Jan 17 '18 at 08:52
@UrielFrankel my only hesitation with an implementation like that is I wanted to stick with "the native Android" way of doing things by using the `app:errorEnabled` and `app:errorTextAppearance` to control the styling/position of my errors. I don't want to have to worry about positioning my error text anytime I want to use an icon. But that is definitely a valid way around this problem I am having, thanks! — james, Jan 17 '18 at 13:27

Cassian · Answer 1 · 2018-08-04T11:01:54.037

3

You can use SpannableString with ImageSpan like this

val errorDrawable = ContextCompat.getDrawable(context!!, R.drawable.ic_error)
your_text_input_layout.error = SpannableString("your string").apply {
                setSpan(ImageSpan(errorDrawable, ImageSpan.ALIGN_BASELINE), 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE)

edited Aug 04 '18 at 11:01

answered Aug 02 '18 at 11:20

Cassian

101
1
5

the idea is workable if set the spannable string base on this answer https://stackoverflow.com/a/3177667/1083128 – Mia Jul 21 '22 at 12:11

score 0 · Answer 2 · edited Aug 04 '18 at 22:15

0

This might help others who've fallen in to similar trouble. I looked at source codes. The thing is setError(text, drawable) has defined in EditText class not TextInputLayout as your layout is based on.

I have similar code and issue like you and since TextInputLayout doesn't have any method to replace Drawable then we have to create a TextView below TextInputLayout in order to simulate error message.

edited Aug 04 '18 at 22:15

halfer

19,824
17
99
186

answered Feb 02 '18 at 01:00

Hesam

52,260
74
224
365

the request of this question is to place the icon on the right side of the error message, your suggestion is to place the icon on the right side of the edit text. – Mia Jul 21 '22 at 12:26

dilix · Answer 3 · 2018-08-05T07:04:43.080

You want to place an icon inside the error container of TextInputLayout

If you check the real layout

You'll find that your textview is even wrap content.

Also in SDK sources

if (enabled) {
    mErrorView = new AppCompatTextView(getContext());
    mErrorView.setId(R.id.textinput_error);
    ...

So there is no place to insert an icon on the right AS IS.

One possible solution is to find this view programatically inside your layout, change width and apply drawable.
Second (and probably easiest) solution is to implement your own simple error layout and not to set error for TextInputLayout but manage the error state by yourself