InputTextLayout, setting Error Text as Helper Text (of different color)

Question

Android provided a widget called TextInputLayout https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

This could provide Hint and Error, which is excellent wrapper around EditText.

There's also seemingly a guideline on it in https://material.google.com/patterns/errors.html#errors-user-input-errors

With that, it show Hint and Error. And also it has Helper Text. This is where it is useful for password setup. E.g. before someone enter a password, the ErrorText is show as HelperText, distinguish by a different color (in grey instead of red as per the example).

When I look at TextInputLayout, it does have the two functions

setError(CharSequence error)

and

setHint(CharSequence hint)

However, there's no way to change the ErrorText to HelperText. Did I miss anything, or it's just TextInputLayout provided by Support Library is not giving us the feature as per Google recommended in its material guideline?

p/s: I know how to change ErrorText color by setting through the style. But this doesn't help as it can't change dynamically while the app is running (e.g. change the state from error to helper and vice versa).

score 4 · Answer 1 · edited Aug 02 '17 at 08:01

Given that this scheme is mentioned in the design guide, its a bit strange it isn't part of the a standard method. Anyway, I was able to change the color based on @Jared Rummler's answer over here. His suggestion is to use Java Reflection to do the dirty bits. Firstly, you need to get a reference to your TextInputLayout and enable the error view (otherwise reflection will return null fields):

    final TextInputLayout input = (TextInputLayout) findViewById(R.id.input);
    input.setErrorEnabled(true);

Now we call define an error color changing method as follows:

    public void setErrorTextColor(TextInputLayout textInputLayout, int color) {
        try {
            Field fErrorView = TextInputLayout.class.getDeclaredField("mErrorView");
            fErrorView.setAccessible(true);
            TextView mErrorView = (TextView) fErrorView.get(textInputLayout);
            Field fCurTextColor = TextView.class.getDeclaredField("mCurTextColor");
            fCurTextColor.setAccessible(true);
            fCurTextColor.set(mErrorView, color);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

This essentially changes the color of both TextInputLayout's underline and the error message. But since, according to the guidelines, they are same anyway, so this fits our scenario. This means to display our Helper text, we simply change the color to a gray something and call setError() on it like below:

    setErrorTextColor(input, ContextCompat.getColor(getContext(), android.R.color.darker_gray));
    input.setError("Funk you!");

That should do it. Remember to change the color to red something when you wish to show the error.

@Elye yeah, even I wish we shouldn't have to resort to that for something this basic. — Shaishav, Aug 06 '16 at 09:23
Found a version that could be used without the need of reflection. Put it as one of the answer. Longer code, but well written. — Elye, Aug 06 '16 at 10:00

score 2 · Accepted Answer · answered Aug 06 '16 at 09:59

2

Found this extend version of TextInputLayout. https://gist.github.com/drstranges/1a86965f582f610244d6

This manage to add the Helper Text naturally.

answered Aug 06 '16 at 09:59

Elye

53,639
54
212
474

score 2 · Answer 3 · answered Nov 19 '18 at 13:07

Those who are visiting now With Design Support Library 28 , an inbuilt helper Text feature is added in TextInputLayout.It's color can also be change using built in methods.

 setHelperTextColor(ColorStateList textColors)

It can be used by adding

 implementation 'com.android.support:design:28.0.0'

Now enable error using xml or programmatically

 textInputLayout.isHelperTextEnabled=true
 textInputLayout.error="Email can not be Empty!!!"

Also , hint and error can together be used now!!!

Example

et.setOnFocusChangeListener { v, b ->
            if (b) {
                textInputLayout.helperText = "yourhelperText"

            } else {
                textInputLayout.helperText = null
                if(et.text.toString()==""){    // or any other validation
                    textInputLayout.error="Email can not be Empty!!!"
                }
            }

TextInputLayout | Android Developers

EDIT Don't forget to enable error and helperText via xml or programatically.

score 1 · Answer 4 · answered Mar 23 '17 at 18:30

You can use app:errorTextAppearance on layout or textLayout.setErrorTextAppearance() to change the style of the error text.

If you set this to a style that match the helper text, then it will look like helper text. Then use "error" methods to show your text

textLayout.setErrorTextAppearance(R.style.TextAppearance_HelperText);
textLayout.setErrorEnabled(true)
textLayout.setError(getString(errorText));

InputTextLayout, setting Error Text as Helper Text (of different color)

4 Answers4