Johannes is the co-founder of 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
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.
2012/05/17 at 04:27
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.
2012/05/17 at 19:44
Totally, sorry for the mistake.
You’re welcome.
2012/05/21 at 10:54
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
2012/05/21 at 13:31
Thank you Janusz, Requesting focus is a great idea. I’ll consider adding flattr.
Best regards
Johannes
2012/06/14 at 13:35
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/
2012/06/19 at 08:06
Thank you for sharing.
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.
2015/09/27 at 03:58
Nice job, Thanq for sharing…
2016/03/10 at 07:58
Are u kidding me, never knew it was there!?!?!? That was a Dramatic Error Entrance! Thank you in the name of All Android disciples
2016/04/06 at 12:43
Nice…thnx for sharing…
2016/06/27 at 06:45
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
2016/06/27 at 12:06
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