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

This article demonstrates the usage of floating labels with a simple form validation example.

android-material-design-floating-label-example

TextInputLayout

In design support library a new element called TextInputLayout was introduced to display the floating label on EditText. The EditText has to be wrapped 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 displays 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>

android-design-support-library-floating-labels

Simple Form Validation Example

Now we’ll create a simple android app to really understand the usage of TextInputLayout. This app contains a simple form with floating labels, input validations and error messages enabled.

1. In Android Studio, go to File β‡’ New Project and fill all the details required to create a new project.

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

com.android.support:design:23.0.1

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 step is optional.

4. Add the below string values to strings.xml located under res β‡’ values.

<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 layout file your main activity (activity_main.xml) and add the below layout. This code creates a simple form with three input fields. Here you can see the EditText is wrapped by TextInputLayout.

<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 below changes. Here I have added few methods to validate user inputted data like name, email and password. I also assigned a TextWatcher to all the edit texts to validate the input while user is the typing it. setError() methods is called on to edit text to display the error message when the input is invalid or empty.

package info.androidhive.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;
            }
        }
    }
}

android-material-design-floating-labels

android-material-design-floating-labels-error-messages
Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.
  • Vishal gupta

    Awesome

  • hoang hiep

    Can you tell me, what tool you use to screen recorder motion device android

  • Mohammad

    Thank you Ravi always awesome work

  • Arpit Aggarwal

    Thank you very much Ravi….
    awesome like always….

  • Ervan Prastyanto

    Thank you Ravi, you always share best article. I need you to share about “How to send data using HttpURLConnection in android”. Because HttpClient are deprecated in API 23

  • Janah Zimmerman

    Thank you Ravi! πŸ™‚

  • Winarto Saputro

    thanks for awesome tutorial Ravi.
    i hope next time you can write about recyclerview with volley inside fragment(sliding tab layout).
    thankyou

    • Yeah I need to cover RecyclerView yet.

      • Muhammad Qasim

        Please add it with SEARCH functionality.

  • evan

    thanks Ravi!

  • Saurabh Bhandari

    nice bro u r genius..

  • Adel Jaffan

    from syria …. thanx

  • Umair Khan

    good man you are talented and experienced person. (best regards)

  • Singh Gaurav

    Thanks Ravi. I am beginner in android and your blogs really help me understand the customization in android UI. Thanks for sharing.

  • okan

    You are the best blogger ever seen thank you

  • Martin Gelevski

    Thanks helped a lot keep up with the good work

  • Rahul Rai

    Hi Ravi could you please review my app. Ready to provide source code.
    This is the app link
    https://play.google.com/store/apps/details?id=com.app.fileshare
    File Share is an android App using which you can send any type of files(pdf, txt, doc, etc..) on WhatsApp. It is something which you wouldn’t have seen before.
    Regards,
    Rahul.
    fantasticrahulrai@gmail.com

  • MD Danish Ansari

    What !! Really !!!!
    This was so simple…….

    Amazing. πŸ™‚

  • simple

  • Okechukwu Eze

    Hi @ravi8x:disqus

    How can i unset/reset the error state of the EditText ?

    I tried the following and it did not work after submitting the form

    inputLayoutName.setErrorEnabled(false);
    inputLayoutEmail.setErrorEnabled(false);
    inputLayoutPassword.setErrorEnabled(false);

    inputName.setError(null);
    inputEmail.setError(null);
    inputPassword.setError(null);

    if this will not work, which code can i use to reset the EditText to its default state.

    • try changing inputName.setError(null); with inputLayoutName.setError(null);

  • HoΓ ng V TΓ΄n

    Hi Ravi,
    I don’t know what wrong with my code. I’ve retype your code into my new project. But while I move the cursor to the email input text and type 1 character, the cursor will be jump to Name text. Can you help me solve this error?

  • Shubham Singhal

    Hi Ravi,
    Tutorial was amazing but can you please tell me how can I change the color of floating label.
    Is it possible or it automatically sets the default color??

    • Javad

      it is possible, you can change color from colors.xml.

  • Sachin Rajan

    how can i add this design library when i am using eclipse instead of Android Studio ?

    • Prafulla Malviya

      Before use the design support library, you have to import support-v7-appcompat library fromandroid-sdksextrasandroidsupportv7appcompat. Then, you have to:
      create an android library project in eclipse for design support library
      put the contents of directory android-sdksextrasandroidsupportdesign in the design support library project
      Link appcompat-v7 library to design support library project
      Link support library project from your project.

  • Afzal Hussain

    Hi Ravi,

    Tutorial was amazing but can you tell me please how can i import your Floating Label code which is downloaded from your site androidhive,when i import into andoid studio it gives error of SDK,I cant understand please help me.

    Thanks.

  • Julio Alvarado

    I cannot download the code, it doesnt send me the email to confirm my account

  • Julio Alvarado

    I cannot download it yet, i push the Button and does not happen anything!

  • Cheekeong

    Really appreciate your help!

  • ulaş

    hi, dont work your subscribe system, dont send email :/ pls check it.

  • subash

    i bro..m new to android.hv 1 doubt..we have to create build.gradle file or it will be generated automatically..what steps we have to do..and what are the steps

    • Tanishq Sharma

      Hey Subash, In Android Studio, the build.gradle file is automatically generated. You can go to your App/Project view and see it as the green icon on the left hand side.

      • subhash

        bro m using Spring tool suite(Eclipse)

      • subhash

        I created without build.gradle file..its working but a small problem…When i am entering invalid input ,the color of the hint changes to red ..Actually Only the Edit text line is supposed to be changed ..I tried a lot but dint got any solution,,cn u help me

      • subhash

        xml file:

        Activity file:

        package com.ksoft.cvr;

        import android.os.Bundle;

        import android.support.design.widget.TextInputLayout;

        import android.support.v7.app.ActionBarActivity;

        import android.support.v7.app.AppCompatActivity;

        import android.text.Editable;

        import android.text.TextWatcher;

        import android.view.View;

        import android.view.View.OnClickListener;

        import android.view.WindowManager;

        import android.widget.Button;

        import android.widget.EditText;

        import android.widget.Toast;

        /**

        * @author CSTT024

        *

        */

        public class ChangePasswordActivity extends AppCompatActivity {

        TextInputLayout currentPasswordLayout, newPasswordLayout,

        confirmPasswordLayout;

        String savedcurrentPassword = “NEELANKARAI”, currentPassword, newPassword,

        confirmPassword;

        Button saveButton;

        EditText current_password, new_password, confirm_password;

        @Override

        protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_password_change);

        currentPasswordLayout = (TextInputLayout) findViewById(R.id.input_layout_currentPassword);

        newPasswordLayout = (TextInputLayout) findViewById(R.id.input_layout_newPassword);

        confirmPasswordLayout = (TextInputLayout) findViewById(R.id.input_layout_confirmNewPassword);

        current_password = (EditText) findViewById(R.id.input_currentPassword);

        new_password = (EditText) findViewById(R.id.input_newpassword);

        confirm_password = (EditText) findViewById(R.id.input_confirmNewPassword);

        saveButton = (Button) findViewById(R.id.saveButton);

        current_password.addTextChangedListener(new ChangePasswordTextWatcher(

        current_password));

        new_password.addTextChangedListener(new ChangePasswordTextWatcher(

        new_password));

        confirm_password.addTextChangedListener(new ChangePasswordTextWatcher(

        confirm_password));

        saveButton.setOnClickListener(new OnClickListener() {

        @Override

        public void onClick(View v) {

        // saveButton.setBackgroundResource(R.drawable.pswd_chng_btn);

        changePassword();

        }

        });

        }

        /**

        * checks current password,new password and confirm password are valid or

        * not On successful validation Display a toast message

        */

        private void changePassword() {

        if (!validateCurrentPassword()) {

        return;

        }

        if (!validateNewPassword()) {

        return;

        }

        if (!validateConfirmPassword()) {

        return;

        }

        Toast.makeText(getApplicationContext(),

        “Password successfully changed”, Toast.LENGTH_SHORT).show();

        }

        /**

        * @return validate current password and return boolean value based on

        * validation check for Empty value and check whether matches saved

        * password If is not valid display error message stored in

        * “err_current_password_invalid” field present in strings.xml

        *

        */

        private boolean validateCurrentPassword() {

        currentPassword = current_password.getText().toString();

        if (currentPassword.isEmpty()

        || (!currentPassword.equals(savedcurrentPassword))) {

        currentPasswordLayout

        .setError(getString(R.string.err_current_password_invalid));

        currentPasswordLayout.setErrorEnabled(true);

        return false;

        } else {

        currentPasswordLayout.setErrorEnabled(false);

        }

        return true;

        }

        /**

        * @return Validate New Password check for Empty value and check whether

        * password have minimum 8 characters If is not valid display error

        * message stored in “err_new_password” field present in strings.xml

        */

        private boolean validateNewPassword() {

        newPassword = new_password.getText().toString();

        if ((newPassword.isEmpty()) || (!isValidPassword(newPassword))

        || (newPassword.equals(savedcurrentPassword))) {

        newPasswordLayout.setError(getString(R.string.err_new_password));

        requestFocus(new_password);

        return false;

        } else {

        newPasswordLayout.setErrorEnabled(false);

        }

        return true;

        }

        /**

        * @return Check if New password and confirm Password matches if not matches

        * display error message stored in “err_confirm_password” field

        * present in strings.xml

        */

        private boolean validateConfirmPassword() {

        confirmPassword = confirm_password.getText().toString();

        if (confirmPassword.isEmpty()||(!confirmPassword.equals(newPassword))){

        confirmPasswordLayout

        .setError(getString(R.string.err_confirm_password));

        requestFocus(confirm_password);

        return false;

        } else {

        confirmPasswordLayout.setErrorEnabled(false);

        }

        return true;

        }

        /**

        * @param Password

        * @return Checks if password is valid or not Password must have minimum 8

        * characters

        */

        private static boolean isValidPassword(String Password) {

        if (Password != null && Password.length() >= 8) {

        return true;

        }

        return false;

        }

        /**

        * @param view

        */

        private void requestFocus(View view) {

        if (view.requestFocus()) {

        getWindow().setSoftInputMode(

        WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);

        }

        }

        private class ChangePasswordTextWatcher implements TextWatcher {

        private View view;

        private ChangePasswordTextWatcher(View view) {

        this.view = view;

        }

        @Override

        public void beforeTextChanged(CharSequence charSequence, int i, int i1,

        int after) {

        }

        @Override

        public void onTextChanged(CharSequence charSequence, int i, int i1,

        int i2) {

        }

        /*

        * (non-Javadoc)

        *

        * @see android.text.TextWatcher#afterTextChanged(android.text.Editable)

        */

        @Override

        public void afterTextChanged(Editable editable) {

        switch (view.getId()) {

        case R.id.input_currentPassword:

        validateCurrentPassword();

        break;

        case R.id.input_newpassword:

        validateNewPassword();

        break;

        case R.id.input_confirmNewPassword:

        validateConfirmPassword();

        break;

        }

        }

        }

        }

  • Komal Nikhare

    I am using Eclips and getting error

    11-25 13:32:29.967: E/AndroidRuntime(18136): Caused by: java.lang.ClassNotFoundException: Didn’t find class “android.support.design.widget.TextInputLayout” on path: DexPathList[[zip file “/data/app/com.odibly.android-1/base.apk”],nativeLibraryDirectories=[/data/app/com.odibly.android-1/lib/arm, /vendor/lib, /system/lib]]

    11-25 13:32:29.967: E/AndroidRuntime(18136): Suppressed: java.lang.ClassNotFoundException: android.support.design.widget.TextInputLayout

    11-25 17:39:26.421: E/AndroidRuntime(17866): Caused by: android.view.InflateException: Binary XML file line #31: Error inflating class android.support.design.widget.TextInputLayout

    11-25 17:39:26.421: E/AndroidRuntime(17866): at android.view.LayoutInflater.createView(LayoutInflater.java:623)

    11-25 17:39:26.421: E/AndroidRuntime(17866): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:699)

  • Mudit Sen

    Hey,

    Please tell me, Is there any way to group some of the volley

    requests and cancel on one go.

  • ghostgirl

    Hi
    how to keep the design good for all screen resolution with material design because it is messy

  • Dawid BΔ™tkowski

    Hi.
    This tutorial is awesome.
    But I have one small problem with my program. I want add navigation drawer into my app. But this hide my floating label:/ What can I do with it ?

  • Aashu Sonava

    Hi. ravi
    It was Great .. nice job

  • Srikanth M

    I gone through almost all the tutorials……Ravi sir you are simply a legend………you have become the most most fruitful code base for me……

  • Jw

    Hey Ravi,
    Nice tutorial as always. I am curious, how did you set the new style error? I used this code (very easy to follow and use) but I am still getting the old style of error prompt – like this: http://i.stack.imgur.com/D1Uth.png

    • May be you are testing it on below lollipop. Are you? Check it on lollipop device / emulator.

      • Jw

        No it was on L. I did find the problem though but my post was awaiting moderation when I realised so couldn’t edit / delete. I had the setErrorEnabled on the text input itself, not it’s layout.

  • Aamar

    Hey Ravi
    Need a little help i want to animate floating label on text change like slack have you any idea how to implement it ?

  • Quty

    Hi, i’ve got abug. If i input some incorrect data to TextEdit it’s bottom line changed color to red. After entering correct text error message hiding but bottom line still red. Is it possible to fix this? I mean change TextEdit’s bottom line color to colorControlActivated or colorControlNormal.
    I just compile your code and lauch application on Nexus 5 with Android 6.0.1. Thank you!

    • Quty

      I find solution. It is rigth to use setError(null) instead of setErrorEnabled(false)

      • Vishal Vekariya

        Thank you.
        My problem is now solved.

  • Lucas Trabalon

    Congratulations for the article. I have a problem when seteeror my layout increases pushing everything down . Any solution to decrease the space between the EditText and the error label ?

  • Wilson Pagkalinawan

    Hi, i have a question. how can i use this library using eclipse? thank

  • saeed

    Hi it is possible set error message without changing EditText color….
    In your code While Showing Error message in red color edit text bottom line also change to red color … i dont want to change that color.. Becoz i set some back ground properties for my edit text
    Please Help me

  • Chirag thaker

    nice tutorial, one problem here , suppose i have 3 textinput edittext(this) i have done validation one rating bar and two buttons without showing error it looks great, when i put some wrong data it destroy my layout, button disappears bcos edittext cover lot area, i tried putting scrollview but it doesn’t worked for me .. (NOTE i have viewpager with two tab on top. )

  • Mukarram Ali

    You people are gorgeous…

  • SΖ‘n Nguyα»…n

    Your example is awesome!

  • Lavekush Agrawal

    Hi Ravi a big thanks for your great works, Can you please post a tutorial about floating labeled spinner, Its high demand for android developer

  • Aufal

    nice

  • Lakshman Bodduluru

    nice tutorial sir,
    can we set any background image with hint text in EditText..?

  • Wetcha Chaima

    you are my hero

    • I am glad.

      • Wetcha Chaima

        hello can i get you help in something else please .. how can i contact you ? i realy need your help and i appreciate your reply

  • Arslanali

    Hi Ravi.
    Where you set color for text: “Enter your full name, address, password”?

  • Max

    Nice tutorial Ravi!! πŸ™‚ (y) Did you make a tutorial on the Material design spinner dialog?

    • Nope πŸ™

      • Max

        Thanks anyway!! πŸ™‚

  • lalit patil

    Hey Ravi ,
    how do i set floating label alignment center except left align??

  • Aggarwal Vikas

    Hey canyou tell me how we can set double hint like “enter your email” in edittext and “Email” When It goes up and float..?

    • Kashan danish

      You can use focus change listener on edit text and change the value of hint to “email” when the text field gains focus and change it back “enter your email” when it loses focus

  • Kousik

    Hey ravi I am using the theme “Theme.AppCompat.Light.NoActionBar” I can Get Inflate Exception over here How to rectify that..???

  • Bocci

    Hi, where can i put code to connect on mysql?

  • abinash mishra

    Thanks Man. Really helpful.
    Hey, my activity stops when counter reaches maximum.
    error – Resource is not a ColorStateList

  • Azmul Haq

    Hi, i am using your this tutorial “Android Material Design working with Tabs” with Material Design Edit Text tutorial and i face this error…Error inflating class EditText…. I search a lot but no solution find yet…

  • ST

    Hi, Just followed this example ..it was simple and easy to understand..I have one query..Suppose i want to confirm password by reentering sam..how can i validate confirm password? Any ideas will be helpful

    • Rajasimman

      just u add another one edittext

      private boolean validatecPassword() {
      if ((!inputPassword.getText().toString().equals(inputcPassword.getText().toString()))) {
      inputLayoutcPassword.setError(getString(R.string.err_msg_cpassword));
      requestFocus(inputcPassword);
      return false;
      } else {
      inputLayoutcPassword.setErrorEnabled(false);
      }

      return true;
      }

  • Stan

    Nice article. The link for TextInputLayout points to the Chinese version of the page. It may be better to use the English version.

  • Shankar Ganesh

    nice one.. thank you ravi

  • Aaron

    Damn skills

  • Spandan Joshi

    Good Tutorial. But how did you created this video?

  • Mohan Ganamorthy

    Nice post. It is working for me perfect in normal activity.
    But i am getting error while try to use this in Dialog class.

    “android.view.InflateException: Binary XML file line #12: Error inflating class android.support.design.widget.TextInputLayout”

    how to implement this in Dialog class ?ο»Ώ

    Please any one guide me

    • Ziigic

      Don’t forget to add dependencies
      compile ‘com.android.support:design:xx.x.x’
      into your build.gradle

      replace xx.x.x with your support design version, like compile ‘com.android.support:design:23.4.0’

      • Mohan Ganamorthy

        Hi mam, Thank you very much for your replay.
        i am getting app crash while i am using this in Dialog class. Its works only Activity. Please give me any other possibilities to achieve this task.

        Thank you!

        • Ziigic

          Let me guess, Do you want make custom dialog with floating label edittext ?

          • Mohan Ganamorthy

            yes. Exactly. Please guide me

          • Ziigic

            There’s my example for you.
            You can download or pull it from my github
            https://github.com/zigic88/CustomDialogExample

          • Ziigic
          • Mohan Ganamorthy

            Hi,
            you are using class MainActivity extends AppCompatActivity
            i am using MainActivity extends Dialog

            my problem is not able to achieve that animation extends the Dialog class. can you try your code with MainActivity extends Dialog ?

            Thanks for your great support mam.

  • Ziigic

    Simple, but amazing tutorial

  • Vikas Tiwari

    Ravi Tamada@

    Sir how to make collapsing toolbar with viewpager(tab layout) sir plz make tutorial for this topic πŸ™‚

    n Thanks for the wonderful work
    i learned a lot frm u πŸ™‚

    • Hi Vikar

      Thanks for the suggestion. I’ll post the article in 2days.

      • Vikas Tiwari

        ThankQ sir πŸ™‚

    • I have implemented this. Hope this helps you too.

  • Milan Gajera

    Hey @Ravi Thanks for the tutorial. In TextInputLayout when i am in second EditText then it’s blink the tint of the third EditText.Is this is bug in the native library or any other problem? I also implemented in my project but the bugs are not fixed.I don’t recognized what is the happning. Please, give a solution or suggestion to remove this problem.

  • Anukool srivastav

    Hi Ravi Tamada,Thanks for this. I have on issue out of this tutorial is how can we use custom layout to work as a floating button as I have to show two images in a layout as floating action button behavior…?

  • Jithu joy

    Hello sir,I had a doubt!!
    You know hike messenger ,right?
    In it there is a section called Games where you download the games once and you can play the games.No need to install and stuff!!
    Do you know ,using what those games are made!
    What type of games they are!
    The format of the games in which they are saved inside the server??
    I would really appreciate if you could help me with these doubts!!

  • Impactious

    Hi
    Can this be achieved with textbox having all sided border?

    Like this
    https://s10.postimg.org/9719ic2nt/IMG_20161005_001423.jpg

    • You can use a 9 patch image for background.

  • ankit

    awesome tutorial ravi thanku so much.. πŸ™‚

  • vaibhav

    unsupprtedf method : androidProject.getpluyginGeneration().the version of gradle you connect doesnot support that method

  • Alexandru Spasenie

    Great article! It helped me out! πŸ™‚ Thank you!

    Do you have more material design layouts explained?

  • Kannan Sathasivam

    Great article Sir, Everything is working for my project.. πŸ™‚ but while appears text input layout it will apply very slow.. πŸ™ why..? Is there any solution to solve this issue..?

  • jemal

    Thanks for the tutorial,
    I had a doubt:
    After implementing the above i noticed that the error message appears once but does not appear thereafter. Isn’t the listener supposed to be called every time the text is changed ?

    To clarify:
    1. If enter something and clear it(using backspace) the error would appear.
    2. If do the above once again i.e enter something and then clear it again, the error does not appear again.

    Thanks in Advance

  • LK

    Hi Ravi,

    Nice writeup, its very useful. However, I wanted to move all of the validation methods to another class that I can reuse some of them for other usage like from login page or edit profile page, etc.
    For example,
    UtilityClass is my my class where I put most of my utility methods so I moved validateName(TextInputLayout textinputlayout, EditText edittext) there along with requestFocus(). But when ever I use validateName method from an object of UtilityClass the app shutsdown. Any idea?

  • I always referring to this post when implementing the material text inputs πŸ™‚ Though; as of today you should use the EditText subclass android.support.design.widget.TextInputEditText in your TextInputLayout to properly show the hint for when Android extracts the EditText -> http://stackoverflow.com/a/36269036/5704677

  • Ardi Sugi

    BEST.TUTORIAL.EVEERRRR!!

  • Kaustubh Amrit

    Hello sir,
    What is the word limit of the edit text input as well as the edit text hint?

  • Samir Samedov

    Thank you it was very usefull

  • Byron De Juan

    Hello good day! i downloaded an app and i was plan to change its UI to material design..i’ve created a material UI containing a Navigation drawer. My problem is how could i merge this material design to that app. I don’t know if i’m right to create a separate UI to merge or should i edit that app directly which is impossible i think. Hope you read this. Thank you! πŸ™‚

  • Mika Octo Frentzen

    Hi Ravi Tamada,
    i have a question where i can change the Text input Layout, in the XML or in My java class?
    Thank you before

  • Abdul Qadir

    Hii Ravi,
    i am connecting this login page with other activity using intents, but app crashes before this activty , can u help me solv this problem ?

    • You can find probable in the LogCat of android. Open LogCat and use the app, the error will be printed there.