Tutorial details

[TUT] Validate EditText User Input with Shake Feedback | App Code for Sale | Preview

[TUT] Validate EditText User Input with Shake Feedback | Android Tutorial

How to validate EditText User Input with Shake Feedback

Overview PAGE TOP

I was recently watching the Google App Clinic and noticed one of the apps Zoum Tasks had this really cool feature where when the user enters an email address into an EditText, if it was invalid then the EditText would shake! I thought this was really cool and wondered how it was implemented so I gave it a go myself and here it is!

So what are we going to do:

  • Create a layout where you can enter an email address and click done
  • Create a custom edittext that can validate input and give feedback
  • Create an animation to ‘shake’ our edittext
  • Create an email address validator to be our guardian at the gates!


It’s got a much more natural shake implemented on the device, this is just an illustration.

Let’s do it!

First let’s start with email validation. For this simple example user input is a valid email if it contains an @ symbol. (keeping it simple).


+ expand source

The EmailAddressValidator implements Validator, we will come to the code for this later. This is so you can use different validators with different EditTexts (say you had an email address and a phone number EditText on the same screen).

Next is the custom EditText, this is called ValidationEditText it has two methods. 1 for setting the validation to use (i.e. validate a phone number or validate an email address) and 2 to ask it to validate (i.e. when a done button is pressed).


+ expand source

So that you can copy and paste code, the above uses a programmatic animation but in a real project, I would put the animation in the resources folder (like in the sample project at the bottom).

The ValidationEditText also holds the interface that any validation util has to implement. To use ValidationEditText call setValidator() when you first create the view, then after the user has finished typing call hasValidInput() which will tell you true or false if it is valid.

In the XML view I have declared the EditText to use the imeOption actionDone, meaning a ‘done’ button will appear in the corner. When this is clicked it will also validate the input and shake if it is incorrect.

Just the formallity of showing you the XML layout, slightly different to normal because you are using a custom view:


+ expand source

And finally the MainActivity itself. Here you reference the ValidationEditText, set your validator, set the onClick listener for your Done button and then validate the user input when this is clicked.:


+ expand source

And that’s it, your view should shake if you don’t enter a valid email address.

Here is the Git Repo Source

Here is the Eclipse Project Source

Any questions just ask!

Reference PAGE TOP


0 Comments Leave a comment

Please login in order to leave a comment.

Newest first

to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.