How to display a clickable link in TextInputLayout error message, app:setError in android

Question

I have a text input field that takes name as input. The layout contains an EditText widget inside the TextInputLayout. When the user input is blank, I want to display an error validation message saying - "This is not allowed. Learn more" where "Learn more" is a hyperlink. Is it possible to display an error message which contains a hyperlink using app:setError property?

        <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:error="@{viewModel.errorMsg}"
                app:errorEnabled="true"
                app:hintEnabled="false"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent">

                <EditText
                    android:id="@+id/text_input"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:maxLines="1"
                    android:onTextChanged="@{(text, start, before, count) -> viewModel.validate(textInput, text)}"
                    android:scrollHorizontally="false"
                    android:text="@{viewModel.name}"
                    android:textAlignment="viewStart" />

ViewModel

var errorMsg = MutableLiveData<String?>()
var name = MutableLiveData<String?>()

fun validate(view: EditText, input: CharSequence) {
        errorMsg.value = input.toString().let {
            if (it.isBlank()) {
                view.movementMethod = LinkMovementMethod.getInstance()
                Html.fromHtml(view.context.getString(R.string.error_message_empty_name), Html.FROM_HTML_MODE_LEGACY).toString()
            } else {
                name.value = it
                null
            }
        }
    }

strings.xml

<string name="error_message_empty_name" comment="Error text to display when name is empty"><![CDATA[This is not allowed. <a href="https://fb.com">Learn more</a>]]></string>

Answer 1

Unfortunately, the setError property of TextInputLayout does not directly support HTML or hyperlink tags. It expects a plain text error message.

1) Create a custom layout for your error message (custom_error_layout.xml):

<!-- res/layout/custom_error_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/errorText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="?android:attr/textColorError" />

    <TextView
        android:id="@+id/learnMoreLink"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:text="Learn more"
        android:textColor="?android:attr/textColorLink" />

</LinearLayout>

2) In your ViewModel, set the error layout when needed:

fun validate(view: EditText, input: CharSequence) {
    if (input.isBlank()) {
        val errorLayout = LayoutInflater.from(view.context)
            .inflate(R.layout.custom_error_layout, null, false)

        val errorText = errorLayout.findViewById<TextView>(R.id.errorText)
        val learnMoreLink = errorLayout.findViewById<TextView>(R.id.learnMoreLink)

        errorText.text = Html.fromHtml(
            view.context.getString(R.string.error_message_empty_name),
            Html.FROM_HTML_MODE_LEGACY
        )

        learnMoreLink.setOnClickListener {
            // Handle the click on the "Learn more" link
            // You can open a web page or perform any other action here
            Toast.makeText(view.context, "Learn more clicked!", Toast.LENGTH_SHORT).show()
        }

        view.error = null  // Clear the default error message
        view.requestFocus()  // Ensure the TextInputLayout is focused
        view.setErrorIconDrawable(0)  // Hide the default error icon
        view.setErrorLayout(errorLayout)
    } else {
        name.value = input.toString()
        view.error = null  // Clear the error message when the input is not blank
    }
}

This approach allows you to create a custom error layout with more flexibility, including hyperlinks. Adjust the layout and styling as needed for your application.

Answer 2

Try SpannableString, define clickableSpan() for that simply like this:

    SpannableString spannableString = new SpannableString("Your error message with a hyperlink");
    ClickableSpan clickableSpan = new ClickableSpan() {
    @Override
    public void onClick(View widget) {
        // Handle the click action for the hyperlink (e.g., open a web page)
        // Example: startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://example.com")));
    }
};
    spannableString.setSpan(clickableSpan, startIndex, endIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);