[TUT] Validate EditText User Input with Shake Feedback

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!

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

EmailAddressValidator.java

package com.blundell.tutorial.util;

import com.blundell.tutorial.ui.widget.ValidationEditText.Validator;

/**
 * This is an Email Address Validator, you can validate anything that goes into an EditText just implement Validator
 * 
 * @author Blundell
 * 
 */
public class EmailAddressValidator implements Validator {

	/**
	 * Simple validation for Tutorial. If it has an @ sign then it is a valid email address
	 */
	@Override
	public boolean validate(String input) {
		if (input.contains("@")) {
			return true;
		}
		return false;
	}

}

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

ValidationEditText.java

package com.blundell.tutorial.ui.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.view.animation.*;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;

/**
 * This EditText will check its input from the user against the Validator you use with setValidator()
 * 
 * If it is valid input the method will return true
 * 
 * If it is invalid input the method will return false and 'shake' the EditText
 * 
 * @author Blundell
 * 
 */
public class ValidationEditText extends EditText {

	private Validator validator;

	public interface Validator {
		boolean validate(String input);
	}

	public ValidationEditText(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();
	}

	public ValidationEditText(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public ValidationEditText(Context context) {
		super(context);
		init();
	}

	public void setValidator(Validator validator) {
		this.validator = validator;
	}

	public boolean hasValidInput() {
		if (validator == null) {
			throw new InstantiationError("Please set a validator first, using setValidator()");
		}
		boolean valid = validator.validate(getText().toString());

		if (!valid) {
			notifyUser();
		}

		return valid;
	}

	private void notifyUser() {
		// From XML Animation (recommended)
//		Animation shake = AnimationUtils.loadAnimation(getContext(), R.anim.shake);
		// Programmatic Animation
		Animation shake = new TranslateAnimation(0, 5, 0, 0);
		shake.setInterpolator(new CycleInterpolator(5));
		shake.setDuration(300);

		startAnimation(shake);
	}

	/**
	 * Optional - but recommended
	 * 
	 * This will check the input when he user hits the 'done' button on the keyboard
	 */
	private void init() {
		setOnEditorActionListener(new OnEditorActionListener() {
			@Override
			public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
				if (EditorInfo.IME_ACTION_DONE == actionId) {
					hasValidInput();
				}
				return false;
			}
		});
	}

}

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:

activity_main.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:padding="10dip" >

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

  <com.blundell.tutorial.ui.widget.ValidationEditText
    android:id="@+id/main_et_email_address"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/main_et_hint_email_address"
    android:imeOptions="actionDone"
    android:inputType="textEmailAddress"
    android:singleLine="true" />

  <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:onClick="onDoneClicked"
    android:text="@string/main_btn_done" />

</LinearLayout>

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

MainActivity.java

package com.blundell.tutorial.ui;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.blundell.tutorial.R;
import com.blundell.tutorial.ui.widget.ValidationEditText;
import com.blundell.tutorial.util.EmailAddressValidator;

public class MainActivity extends Activity {

	private ValidationEditText emailAddressInputEditText;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		emailAddressInputEditText = (ValidationEditText) findViewById(R.id.main_et_email_address);
		emailAddressInputEditText.setValidator(new EmailAddressValidator());
	}

	public void onDoneClicked(View btn) {
		if (emailAddressInputEditText.hasValidInput()) {
			Toast.makeText(this, "Success! Carry on with app...", Toast.LENGTH_LONG).show();
		}
	}

}

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!