Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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).

like image 734
Elye Avatar asked Jan 06 '23 14:01

Elye


2 Answers

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.

like image 55
Shaishav Avatar answered Feb 06 '23 10:02

Shaishav


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

This manage to add the Helper Text naturally.

like image 32
Elye Avatar answered Feb 06 '23 12:02

Elye