Floating Label for EditText

In most Android applications there will be a registration form. For creating a registration form we need to add a label and EditText for every field. Labels are used for showing the user which data the following EditText will accept. And we need to do validations for the required fields. All the things can be achieved using a single UI control. This is known as TextInputLayout, and this can be used with an EditText.

For achieving this we need to add the below two lines in the build.gradle file for the app

compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'

Now bind our views to the Java file like the following,

nameTxt = (EditText) findViewById(R.id.name);
emailTxt = (EditText) findViewById(R.id.email);
passwordTxt = (EditText) findViewById(R.id.password);

layoutPassword = (TextInputLayout) findViewById(R.id.layoutPassword);
layoutEmail = (TextInputLayout) findViewById(R.id.layoutEmail);
layoutName = (TextInputLayout) findViewById(R.id.layoutName);

Button btn_signup = (Button) findViewById(R.id.btn_signup);
nameTxt.addTextChangedListener(new MyTextWatcher(nameTxt));
emailTxt.addTextChangedListener(new MyTextWatcher(emailTxt));
passwordTxt.addTextChangedListener(new MyTextWatcher(passwordTxt));

Now create a private class for text watcher, and it will listen for text changes in the EditText field.

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.name:
                validateName();
                break;
            case R.id.email:
                validateEmail();
                break;
            case R.id.password:
                validatePassword();
                break;
        }
    }
}

Now create the functions for validating email, name, and password like the following,

private boolean validateName()
{
    if (nameTxt.getText().toString().trim().isEmpty())
    {
        layoutName.setError(getString(R.string.error_msg_name));
        requestFocus(nameTxt);
        return false;
    } else
    {
        layoutName.setErrorEnabled(false);
    }

    return true;
}

private boolean validateEmail()
{
    String email = emailTxt.getText().toString().trim();

    if (email.isEmpty() || !isValidEmail(email))
    {
        layoutEmail.setError(getString(R.string.error_msg_email));
        requestFocus(emailTxt);
        return false;
    } else
    {
        layoutEmail.setErrorEnabled(false);
    }

    return true;
}

private boolean validatePassword()
{
    if (passwordTxt.getText().toString().trim().isEmpty())
    {
        layoutPassword.setError(getString(R.string.error_msg_password));
        requestFocus(layoutPassword);
        return false;
    } else
    {
        layoutPassword.setErrorEnabled(false);
    }

    return true;
}

Now call the button click for validating them on clicking time,

private void submitForm()
{
    if (!validateName())
    {
        return;
    }

    if (!validateEmail())
    {
        return;
    }

    if (!validatePassword())
    {
        return;
    }

    Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show();
}
btn_signup.setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View view)
    {
        submitForm();
    }
});

Please see the screen shots also,