We all use EditText when we want user input. We can provide hint to the user as what to enter in a particular EditText. However once the user starts typing the hint is gone. Sometimes this causes confusion to the app user when he forgets which field he was interacting with. However to the rescue of the android developers, Floating Label EditText was introduced with the material design library. It initially shows the label as a hint, but when user starts entering a value in the EditText, that hint turns into a floating label as the name suggests.

In this tutorial, we will discuss how to implement Android Floating Label Edittext using the material design library.

The Floating Label EditText is implemented by wrapping a android.support.design.widget.TextInputLayout around the EditText. TextInputLayout is a widget which is used specifically to wrap an EditText and render floating labels. We also use its functions to show errors for the particular EditText it surrounds.

Pre-requisites

1. Android Studio installed on your PC (Unix or Windows). You can learn how to install it here .
2. A real time android device (Smartphone or Tablet) configured with Android Studio. .

Creating a New Project and Adding Material Design Library

1. Go to File → New → New Project and enter your Application Name.
2. Enter Company Domain, this is used to uniquely identify your App’s package worldwide.
3. Choose project location and minimum SDK and on the next screen choose Empty Activity, since we would be adding most of the code Ourselves. Then Click on Next.
4. Choose an Activity Name. Make sure Generate Layout File check box is selected, Otherwise we have to generate it ourselves.Then click on Finish. We have chosen the Activity Name as SignUpActivity, since we are mimicing the signup page in used in almost all the apps. This is the best use case for the Floating Label EditText.
5. To add support for TextInputLayout to your project add the following dependency in your App’s build.gradle file.

    compile 'com.android.support:design:23.0.0'

6. Gradle will configure your project and resolve the dependencies, Once it is complete proceed for next steps.

We are creating a dummy signup page for this Android Floating Label EditText example. We will make use of EditTexts, each of which will be wrapped in a TextInputLayout. After completion, the layout will look as in below figure.

Adding the Layout

Open activity_sign_up.xml and add the following code.

activity_sign_up.xml

The above layout is pretty self explanatory, we have EditText for Name,Email, Password and Date of Birth and then we have a RadioGroup for getting the input for gender. These are the typical input you will get from the user to register her on your app or website. At last we have a Sign Up!! button that will be used to submit the button.

Adding the Functionality

In the SignUpActivity.java we first declare variables for the EditText and TextInputLayout.

Open SignUpActivity.java and add the following code.

package com.androidtutorialpoint.floatinglabeledittext;

import android.content.Context;
import android.os.Bundle;
import android.os.Vibrator;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;


public class SignUpActivity extends AppCompatActivity {

    private static final String TAG = "RegisterActivity";
    private Vibrator vib;
    Animation animShake;
    private EditText signupInputName, signupInputEmail, signupInputPassword, signupInputDOB;
    private TextInputLayout signupInputLayoutName, signupInputLayoutEmail, signupInputLayoutPassword,signupInputLayoutDOB;
    private Button btnSignUp;

Now we reference these Widgets in the OnCreate() method of the SignUpActvity.java

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sign_up);
        signupInputLayoutName = (TextInputLayout) findViewById(R.id.signup_input_layout_name);
        signupInputLayoutEmail = (TextInputLayout) findViewById(R.id.signup_input_layout_email);
        signupInputLayoutPassword = (TextInputLayout) findViewById(R.id.signup_input_layout_password);
        signupInputLayoutDOB = (TextInputLayout) findViewById(R.id.signup_input_layout_dob);

        signupInputName = (EditText) findViewById(R.id.signup_input_name);
        signupInputEmail = (EditText) findViewById(R.id.signup_input_email);
        signupInputPassword = (EditText) findViewById(R.id.signup_input_password);
        signupInputDOB = (EditText) findViewById(R.id.signup_input_dob);
        btnSignUp = (Button) findViewById(R.id.btn_signup);

        animShake = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.shake);
        vib = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);

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

Note that we have used the animation to shake the EditText in the case of any invalid input. To add animation, create an animation resource file in the values folder and add the following file.
shake.xml
When there is an Invalid input the EditText will shake and phone will vibrate to alert the user about the error. For adding the Vibrate functionality add the following permission in AndroidManifest.xml

AndroidManifest.xml

In the OnClickListener we are calling the function submitForm(), which will
validate the user input and throw error in if it finds invalid data.

Add the following code in the SignUpActvity.java after the onCreate() method.

SignUpActivity.java

private void submitForm() {

        if (!checkName()) {
            signupInputName.setAnimation(animShake);
            signupInputName.startAnimation(animShake);
            vib.vibrate(120);
            return;
       }
        if (!checkEmail()) {
            signupInputEmail.setAnimation(animShake);
            signupInputEmail.startAnimation(animShake);
            vib.vibrate(120);
            return;
        }
        if (!checkPassword()) {
            signupInputPassword.setAnimation(animShake);
            signupInputPassword.startAnimation(animShake);
            vib.vibrate(120);
            return;
        }
        if (!checkDOB()) {
            signupInputDOB.setAnimation(animShake);
            signupInputDOB.startAnimation(animShake);
            vib.vibrate(120);
            return;
        }
        signupInputLayoutName.setErrorEnabled(false);
        signupInputLayoutEmail.setErrorEnabled(false);
        signupInputLayoutPassword.setErrorEnabled(false);
        signupInputLayoutDOB.setErrorEnabled(false);
        Toast.makeText(getApplicationContext(), "You are successfully Registered !!", Toast.LENGTH_SHORT).show();
    }

    private boolean checkName() {
        if (signupInputName.getText().toString().trim().isEmpty()) {

            signupInputLayoutName.setErrorEnabled(true);
            signupInputLayoutName.setError(getString(R.string.err_msg_name));
            signupInputName.setError(getString(R.string.err_msg_required));
            return false;
        }
        signupInputLayoutName.setErrorEnabled(false);
        return true;
    }

    private boolean checkEmail() {
        String email = signupInputEmail.getText().toString().trim();
        if (email.isEmpty() || !isValidEmail(email)) {

            signupInputLayoutEmail.setErrorEnabled(true);
            signupInputLayoutEmail.setError(getString(R.string.err_msg_email));
            signupInputEmail.setError(getString(R.string.err_msg_required));
            requestFocus(signupInputEmail);
            return false;
        }
        signupInputLayoutEmail.setErrorEnabled(false);
        return true;
    }

    private boolean checkPassword() {
        if (signupInputPassword.getText().toString().trim().isEmpty()) {

            signupInputLayoutPassword.setError(getString(R.string.err_msg_password));
            requestFocus(signupInputPassword);
            return false;
        }
            signupInputLayoutPassword.setErrorEnabled(false);
           return true;
    }

    private boolean checkDOB() {

        try {
            boolean isDateValid = false;
            String[] s = signupInputDOB.getText().toString().split("/");
            int date = Integer.parseInt(s[0]);
            int month = Integer.parseInt(s[1]);

            if (date 
The submitForm() method uses helper methods checkName(), checkEmail(), checkPassword() and checkDOB() and checks for presence of name, email, password and D.O.B, It also checks whether the email and D.O.B entered are valid. 
Let’s briefly discuss about these methods. 
checkName() – checks whether the mandatory field name is present or not. Otherwise it calls setErrorEnabled(true) on the signupInputLayoutName to notify there is an error and setError(getString(R.string.err_msg_name)) to set the error message for the signupInputLayoutName. Additionally we are also setting the error for the EditText using setError(getString(R.string.err_msg_required)) method. Then we are returning false to the submitForm() so that it invokes the shake animation.
checkEmail() – This method is similar to checkName() method, it additionally calls the isValidEmail() to check whether the entered email is valid or not.
checkPassword() – This method is also similar to checkName() method, It checks whether the Password field is left blank or not. In case it is blank, it will raise error and return false.
checkDOB() – This method checks whether the Date of Birth entered by the user valid or not.
We have used the follwong string resources
strings.xml
FloatingLabelEditTextEnter D.O.B (DD/MM/YYYY)PasswordI amMaleFemaleSign Up !!Please enter a NameValid Input RequiredPlease enter a Valid EmailEnter a PasswordEnter a valid D.O.B
Now run the app and test whether all the validations are fired or not. You have to test different test cases for testing whether the email and D.O.B validations are proper or not. Hope you liked this material design floating label edit text example tutorial.




What’s Next?
With the knowledge of how to use Floating Label Edit Text we can create awesome looking forms and login pages, Experiment with different available attributes. We will soon be covering the post on Android Login Using PHP and MySQL where we will use the registration page created in this tutorial.
Till then stay tuned for more tutorials.. and Don’t forget to subscribe our blog for latest android tutorials. Also do Like our Facebook Page or Add us on Twitter.
Click on Download Now button to download the full code.
 
CodeProject

The post Android Material Design : Working with Floating Label EditText appeared first on Android Tutorial Point.