Design Android EditText to show error message on floating label hint

Question

I need an EditText that looks like this onError:

calling onError looks like this:

Error message will show on top,floating label hint will change to error message. I tried some methods.but it won't come as per design.

Answer 1

Please try this one bro

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

    inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);
    inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);

    inputEmail = (EditText) findViewById(R.id.input_email);
    inputPassword = (EditText) findViewById(R.id.input_password);
    btnSignUp = (Button) findViewById(R.id.btn_signup);

    inputEmail.addTextChangedListener(new MyTextWatcher(inputEmail));
    inputPassword.addTextChangedListener(new MyTextWatcher(inputPassword));

    btnSignUp.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            submitForm();
        }
    });
}

private void submitForm() {

    if (!validateEmail()) {
        return;
    }

    if (!validatePassword()) {
        return;
    }
    Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show();
}

private boolean validateEmail() {

    String email = inputEmail.getText().toString().trim();
    if (email.isEmpty() || !isValidEmail(email)) {
        inputLayoutEmail.setHint(getString(R.string.err_msg_email));
        requestFocus(inputEmail);
        return false;
    } else {
        inputLayoutEmail.setErrorEnabled(false);
        inputLayoutEmail.setHint("Email");
    }

    return true;
}

private boolean validatePassword() {
    if (inputPassword.getText().toString().trim().isEmpty()) {
        inputLayoutPassword.setHint(getString(R.string.err_msg_password));
        requestFocus(inputPassword);
        return false;
    } else {
        inputLayoutPassword.setErrorEnabled(false);
        inputLayoutPassword.setHint("Password");
    }

    return true;
}

private static boolean isValidEmail(String email) {
    return !TextUtils.isEmpty(email) && android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches();
}

private void requestFocus(View view) {
    if (view.requestFocus()) {
        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
    }
}

private class MyTextWatcher implements TextWatcher {

    private View view;

    private MyTextWatcher(View view) {
        this.view = view;
    }

    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
    }

    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
    }

    public void afterTextChanged(Editable editable) {
        switch (view.getId()) {
            case R.id.input_email:
                validateEmail();
                break;
            case R.id.input_password:
                validatePassword();
                break;
        }
    }
}

Answer 2

android.support.design.widget.TextInputLayout
        android:theme="@style/EditTextHint"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

  <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

or use thiseditText.setHintTextColor(getResources().getColor(R.color.red)); Try to use red color for error

Answer 3

Inside your activity_name.xml:

<android.support.design.widget.TextInputLayout
                            android:id="@+id/fromLoc_eLayout"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="20dp"
                            android:layout_weight="0.5"
                            android:gravity="center"
                            app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

                            <EditText
                                android:id="@+id/fromLocTravel"
                                android:layout_width="fill_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="-10dp"
                                android:digits="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz "
                                android:hint="From"
                                android:imeOptions="flagNoExtractUi"
                                android:inputType="textCapSentences|textPersonName"
                                android:maxLength="50"
                                android:singleLine="true"
                                android:textColor="#000"
                                android:textSize="14sp"
                                android:theme="@style/EditTextTheme" />
                        </android.support.design.widget.TextInputLayout>

And in your NameActivity.class:

TextInputLayout fromLoc_eLayout = (TextInputLayout) findViewById(R.id.fromLoc_eLayout);
EditText fromLocTravel = (EditText) findViewById(R.id.fromLocTravel);

You can also implement textChangedListener if you want like below to display Error messages on hint like below:

fromLocTravel.addTextChangedListener(new TextWatcher() {
        public void afterTextChanged(Editable s) {
            fromLoc_eLayout.setHint("your error message");
        }

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

        }

        public void onTextChanged(CharSequence s, int start, int before, int count) {

        }
    });