Edit Text as Android Material Design floating Labels

Android floating labels were introduced in android design support library to display a floating label over Edit Text. Initially it act as hint in Edit Text when the field is empty. When user start inputting the text, it start animating by moving a floating label position.

Here is the demonstration of floating label with a simple form validation example.

TextInputLayout
In design support library a new element called TextInputLayout was introduced to display the floating label on EditText. The EditText has to covered by TextInputLayout in order to display the floating label. You can also set an error message to EditText by using setErrorEnabled() and setError() methods.
TextInputLayout takes the value of android:hint assigned to EditText and display it as floating label.

<android.support.design.widget.TextInputLayout

android:id="@+id/input_layout_password"

android:layout_width="match_parent"

android:layout_height="wrap_content"> 

        <EditText

            android:id="@+id/input_password"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:hint="@string/hint_email" /> 

</android.support.design.widget.TextInputLayout>

Simple Form Validation Example
Now we'll create a simple Android app to understand the TextInputLayout. This app contain a simple form with floating label, input message and error messages enabled.

1. Open the Android Studio and create a New Project
2. Open the build.gradle and add design support library dependency com.android.support:design:23.0.1

build.gradle

dependencies {     compile fileTree(dir: 'libs', include: ['*.jar'])     compile 'com.android.support:appcompat-v7:23.0.1'     compile 'com.android.support:design:23.0.1' }

3. Apply the material design theme by following the steps mentioned here, but this is optional
4. Add the below string values to string.xml location under res->values

strings.xml

<resources>     <string name="app_name">Floating Labels</string>     <string name="action_settings">Settings</string>     <string name="hint_name">Full Name</string>     <string name="hint_email">Email</string>     <string name="hint_password">Password</string>     <string name="btn_sign_up">Sign Up</string>     <string name="err_msg_name">Enter your full name</string>     <string name="err_msg_email">Enter valid email address</string>     <string name="err_msg_password">Enter the password</string> </resources>

5. Open your activity_main.xml and add the below layout. This will create a simple form with three input fields. Here you can see the EditText is wrapped by TextInputLayout.

activity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">          <android.support.v7.widget.Toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             android:background="?attr/colorPrimary"             app:layout_scrollFlags="scroll|enterAlways"             app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />     </android.support.design.widget.AppBarLayout>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="match_parent"         android:layout_marginTop="?attr/actionBarSize"         android:orientation="vertical"         android:paddingLeft="20dp"         android:paddingRight="20dp"         android:paddingTop="60dp">          <android.support.design.widget.TextInputLayout             android:id="@+id/input_layout_name"             android:layout_width="match_parent"             android:layout_height="wrap_content">              <EditText                 android:id="@+id/input_name"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:singleLine="true"                 android:hint="@string/hint_name" />         </android.support.design.widget.TextInputLayout>          <android.support.design.widget.TextInputLayout             android:id="@+id/input_layout_email"             android:layout_width="match_parent"             android:layout_height="wrap_content">              <EditText                 android:id="@+id/input_email"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:inputType="textEmailAddress"                 android:hint="@string/hint_email" />         </android.support.design.widget.TextInputLayout>          <android.support.design.widget.TextInputLayout             android:id="@+id/input_layout_password"             android:layout_width="match_parent"             android:layout_height="wrap_content">              <EditText                 android:id="@+id/input_password"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:inputType="textPassword"                 android:hint="@string/hint_password" />         </android.support.design.widget.TextInputLayout>          <Button android:id="@+id/btn_signup"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="@string/btn_sign_up"             android:background="@color/colorPrimary"             android:layout_marginTop="40dp"             android:textColor="@android:color/white"/>      </LinearLayout>  </android.support.design.widget.CoordinatorLayout>

6. Open MainActivity.java and do the following changes. Here few methods has been added to validate the user inputted data like; Name, Email, Password. Also assigned a TextWatcher to all the edit text to validate the input while user is typing it. setError() methods is called on the edit text to display the error message when the input is invalid or empty.

MainActivity.java

package sample.pkrkinth.floatinglabels;   import android.os.Bundle; import android.support.design.widget.TextInputLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.text.Editable; import android.text.TextUtils; import android.text.TextWatcher; import android.view.View; import android.view.WindowManager; import android.widget.Button; import android.widget.EditText; import android.widget.Toast;   public class MainActivity extends AppCompatActivity {       private Toolbar toolbar;     private EditText inputName, inputEmail, inputPassword;     private TextInputLayout inputLayoutName, inputLayoutEmail, inputLayoutPassword;     private Button btnSignUp;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);           inputLayoutName = (TextInputLayout) findViewById(R.id.input_layout_name);         inputLayoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);         inputLayoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);         inputName = (EditText) findViewById(R.id.input_name);         inputEmail = (EditText) findViewById(R.id.input_email);         inputPassword = (EditText) findViewById(R.id.input_password);         btnSignUp = (Button) findViewById(R.id.btn_signup);           inputName.addTextChangedListener(new MyTextWatcher(inputName));         inputEmail.addTextChangedListener(new MyTextWatcher(inputEmail));         inputPassword.addTextChangedListener(new MyTextWatcher(inputPassword));           btnSignUp.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 submitForm();             }         });     }       /**      * Validating form      */     private void submitForm() {         if (!validateName()) {             return;         }           if (!validateEmail()) {             return;         }           if (!validatePassword()) {             return;         }           Toast.makeText(getApplicationContext(), "Thank You!", Toast.LENGTH_SHORT).show();     }       private boolean validateName() {         if (inputName.getText().toString().trim().isEmpty()) {             inputLayoutName.setError(getString(R.string.err_msg_name));             requestFocus(inputName);             return false;         } else {             inputLayoutName.setErrorEnabled(false);         }           return true;     }       private boolean validateEmail() {         String email = inputEmail.getText().toString().trim();           if (email.isEmpty() || !isValidEmail(email)) {             inputLayoutEmail.setError(getString(R.string.err_msg_email));             requestFocus(inputEmail);             return false;         } else {             inputLayoutEmail.setErrorEnabled(false);         }           return true;     }       private boolean validatePassword() {         if (inputPassword.getText().toString().trim().isEmpty()) {             inputLayoutPassword.setError(getString(R.string.err_msg_password));             requestFocus(inputPassword);             return false;         } else {             inputLayoutPassword.setErrorEnabled(false);         }           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_name:                     validateName();                     break;                 case R.id.input_email:                     validateEmail();                     break;                 case R.id.input_password:                     validatePassword();                     break;             }         }     } }

Here is the output:

Thanks Everyone!!!

Read more...