How to display input errors in popup?

Vikas Patidar picture Vikas Patidar · Mar 7, 2011 · Viewed 37.1k times · Source

I want to show all my validation error's of EdiText fields in a popup as shown in below image:

Error alert in popup

As far as I know Android has drawables:

1) popup_inline_error.9.png

popup_inline_error.9.png

2) popup_inline_error_above.9.png

popup_inline_error_above.9

3) indicator_input_error.png

indicator_input_error.png

I am able to display the red error indicator inside the right side of the EditText by using:

Drawable err_indiactor = getResources().getDrawable(R.drawable.indicator_input_error);
mEdiText.setCompoundDrawablesWithIntrinsicBounds(null, null, err_indiactor, null);

Now also i want to display the error message as shown is the first image but it seems I am not getting any idea about this, though I think it should be a Custom Toast.

Answer

Vikas Patidar picture Vikas Patidar · Mar 8, 2011

As the earlier answer is solution for my problem but I have tried a different approach to use a custom Drawable image instead of default indicator_input_error image.

Default Drawable

Default Drawable

Custom Drawable

Custom Drawable

So, I have just created two EditText in my layout xml file and then implemented some Listener in Java code on that EditText.

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:padding="20dip"
    android:background="#222222">
    <EditText android:layout_width="match_parent"
        android:layout_height="wrap_content" android:hint="Username"
        android:id="@+id/etUsername" android:singleLine="true"
        android:imeActionLabel="Next"></EditText>
    <EditText android:layout_width="match_parent"
        android:inputType="textPassword"
        android:layout_height="wrap_content" android:hint="Password"
        android:id="@+id/etPassword" android:singleLine="true"
        android:imeActionLabel="Next"></EditText>
</LinearLayout>

EditTextValidator.java

import java.util.regex.Pattern;

import android.app.Activity;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.KeyEvent;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;

public class EditTextValidator extends Activity {

    private EditText mUsername, mPassword;

    private Drawable error_indicator;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Setting custom drawable instead of red error indicator,
        error_indicator = getResources().getDrawable(R.drawable.emo_im_yelling);

        int left = 0;
        int top = 0;

        int right = error_indicator.getIntrinsicHeight();
        int bottom = error_indicator.getIntrinsicWidth();

        error_indicator.setBounds(new Rect(left, top, right, bottom));

        mUsername = (EditText) findViewById(R.id.etUsername);
        mPassword = (EditText) findViewById(R.id.etPassword);

        // Called when user type in EditText
        mUsername.addTextChangedListener(new InputValidator(mUsername));
        mPassword.addTextChangedListener(new InputValidator(mPassword));

        // Called when an action is performed on the EditText
        mUsername.setOnEditorActionListener(new EmptyTextListener(mUsername));
        mPassword.setOnEditorActionListener(new EmptyTextListener(mPassword));
    }

    private class InputValidator implements TextWatcher {
        private EditText et;

        private InputValidator(EditText editText) {
            this.et = editText;
        }

        @Override
        public void afterTextChanged(Editable s) {

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                int count) {
            if (s.length() != 0) {
                switch (et.getId()) {
                case R.id.etUsername: {
                    if (!Pattern.matches("^[a-z]{1,16}$", s)) {
                        et.setError("Oops! Username must have only a-z");
                    }
                }
                    break;

                case R.id.etPassword: {
                    if (!Pattern.matches("^[a-zA-Z]{1,16}$", s)) {
                        et.setError("Oops! Password must have only a-z and A-Z");
                    }
                }
                    break;
                }
            }
        }
    }

    private class EmptyTextListener implements OnEditorActionListener {
        private EditText et;

        public EmptyTextListener(EditText editText) {
            this.et = editText;
        }

        @Override
        public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {

            if (actionId == EditorInfo.IME_ACTION_NEXT) {
                // Called when user press Next button on the soft keyboard

                if (et.getText().toString().equals(""))
                    et.setError("Oops! empty.", error_indicator);
            }
            return false;
        }
    }
}

Now I have tested it like:

For empty EditText validations :

Suppose user click on the Username field then Softkeybord opens and if user press Next key then the user will be focused to the Password field and Username field remains empty then the error will be shown like as given in below images:

Empty text Empty text

For wrong input validations :

1) I type the text vikaS in Username field then error will be like as given in below image :

Wrong username

2) I type the text Password1 in password field then error will be like as given in below image :

wrong password

Note:

Here I have used custom drawable only in case of when user left the EditText field blank and press Next key on key board but you can use it in any case. Only you need to supply Drawable object in setError() method.