Two simple ways to make your users aware of incorrect input

Did you ever enter a wrong password and got an AlertDialog telling you that you entered something wrong? You probably did and you probably also noticed that this alert dialog most likely takes one more click to continue, a click that could be saved. One way to avoid the AlertDialog are Toasts. Here are two nice but rarely used other ways to tell your users that they should enter something different.

Setup

Let’s assume we have an EditText which we use in our UI.
EditText mEditText ;
//...
mEditText  = (EditText ) findViewById(R.id.myEditText );

Furthermore we have a method showError() which we call when the EditText contains invalid data.

1 Shake

A nice way to show the user that, for example, an entered password was incorrect is to shake the EditText. Please note that I took this code from the official ApiDemos and modified it slightly.

First, we have to define our shake animation. Go to your res folder, create the subfolder anim and place a file shake.xml in it. In this file, create a translation like this:
< translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="0%" android:toXDelta="5%" android:duration="1000" android:interpolator="@anim/cycle_7" />

TranslateAnimations let us move views ond the x or y axis of our screen. Since we want to shake it from left to right, we only apply the translation on the x axis. We move it from zero percent of the view’s width to five percent of the view’s width and let the translation last one second (1000 ms). Furthermore, we use the interpolator cylce_7 wich is placed in anim/cycle_7.xml and looks like the following:
< cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="7" />

It’s a simple CycleInterpolator. This kind of interpolators express the number of repetitions an animation should do. In our case, we repeat the animation seven times.

Now we only need to apply our shake animation to our EditText every time something incorrect is entered. We can do it like this:

private void showError() {
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
mEditText.startAnimation(shake);
}

That’s it. Super easy, super smooth integration into the UI.

2 SetError

This is my personal favourite. It is the setError()-method which comes out of the box with the EditText view. When calling this method, the right hand compount drawable of the will be set to the error icon. When the EditText also has focus, the text you gave to setError() will be shown in a popup. If you don’t like the default error icon, you can also use setError(CharSequence error, Drawable icon) to set your own icon. The routine to show errors can then look like this:

private void showError() {
mEditText.setError("Password and username didn't match");
}

Which will result in errors shown like this:

setError() on ICS

setError() on ICS

Which looks good, catches the user’s attention and doesn’t need any extra clicks to disappear.

Conclusion

Showing errors without interrupting the user flow can be accomplished easily on the Android plattform. For even more attention by the user, the two methods mentioned can also be combined.

 

Please feel free to share your methods of showing error messages in the comments.

12 Comments

  1. Shouldn’t that be:

    private void showError() {
    mEditText.setError(“Password and username didn’t match”);
    }

    Anyway, I didn’t even know such method already exists since API Level 1. All this time I’ve been using Toast. Thank you very much for sharing.

  2. Cool I was not aware of that function until now. Very easy way to handle wrong inputs.

    I use the requestFocus method before showing the error, that way the UI scrolls to the correct position and shows the popup with the error Text.

    If I could I would flattr this post.

    Thank you for publishing

    Janusz

  3. Good to know about 1st way. Thanx for sharing it.
    and here is my article about setError() is here: http://www.technotalkative.com/android-show-error-in-edittext/

  4. news on android

    2012/08/21 at 09:25

    hey thanx man. I didn’t know that it was so easy. the set error one will really work for me.

  5. Nice job, Thanq for sharing…

  6. Are u kidding me, never knew it was there!?!?!? That was a Dramatic Error Entrance! Thank you in the name of All Android disciples

  7. Nice…thnx for sharing…

  8. Hi! It is very old post, however, I hope you’ll reply.

    There is an issue with EditText setting error message with setError() and which is in ScrollView. Hope you find a solution

    Here you can see the issue.

    https://code.google.com/p/android/issues/detail?id=56331

    • Hi Aibol,
      thanks for the comment. Maybe you should take a look at Material Design’s TextInputLayout, on which you can call setError() as well.

      Best regards,
      Johannes

Leave a Reply

Your email address will not be published.

*

© 2024 Droid-Blog

Theme by Anders NorenUp ↑