Advanced Android - Floating Labels

Previous
Quiz
Next
Android floating labels were introduced in android design support library to display a floating labels

Example

This example demostrate about how to integrate Android Floating Labels to Edit Text.

Step 1 − Create a new project in Android Studio,go to File ⇒ New Project and fill all required details to create a new project.

Step 2 − Open build.gradle and add design support library dependency.

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

Step 3 − Add the following code to res/layout/activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<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.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 = "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 = "Email Hint" />
      </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 = "Password Hint" />
      </android.support.design.widget.TextInputLayout>
      <Button android:id = "@+id/btn_signup"
         android:layout_width = "fill_parent"
         android:layout_height = "wrap_content"
         android:text = "Sign Up"
         android:background = "@color/colorPrimary"
         android:layout_marginTop = "40dp"
         android:textColor = "@android:color/white"/>
   </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Step 4 − Add the following code to src/MainActivity.java

package myapplication.example.com.myapplication;

import android.os.Bundle;
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.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
   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);
      
      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;
         } 
      } 
   }
}

Step 5 − Add the following code to manifest.xml

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "http://schemas.android.com/apk/res/android"
   package = "myapplication.example.com.myapplication">
   
   <application
      android:allowBackup = "true"
      android:icon = "@mipmap/ic_launcher"
      android:label = "@string/app_name"
      android:supportsRtl = "true"
      android:theme = "@style/AppTheme">
      <activity android:name = ".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>

</manifest>

Step 6 − Add the following code to Strings.xml

<resources>
   <string name = "app_name">My Application</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>

Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from android studio, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen −

Floating
Print Page
Previous
Next
Advertisements