TextInputLayout Android Example

TextinputLayout is introduced recently from Lollipop onwards, however through support library it is supported to all the versions of Android from 2.1.

TextinputLayout Example

The advantages of Text input Layout is simple, it gives animating effect of hint text on entering the details in edittext, set the error just below the edit box.

1) Add the support design library as dependency in gradle file.

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

2) Make EditText as child of android.support.design.widget.TextInputLayout, set hint, text etc… just refer below code you will understand easily,

use app:hintTextAppearance to display hint text in small, medium or big sizes.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@android:style/TextAppearance.Medium"
        android:id="@+id/userName">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtUserName"
            android:hint="Enter UserName"
            android:singleLine="true"/>

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@android:style/TextAppearance.Large"
        android:id="@+id/id_password"
        android:layout_below="@+id/userName">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/txtPassword"
            android:hint="Enter Password"
            android:singleLine="true"/>

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


    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@android:style/TextAppearance.Medium"
        android:id="@+id/id_contact_number"
        android:layout_below="@+id/id_password">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:id="@+id/txtContactNumber"
            android:hint="Enter ContactNumber"
            android:singleLine="true"/>

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


    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/id_contact_number"
        android:id="@+id/id_submit_button"
        android:text="Submit"/>


</RelativeLayout>

3) Set this layout to your activity.

public class MainActivity extends ActionBarActivity {

    TextInputLayout TLUserName, TLPassword;
    EditText usrName, Pwd;
    Button submitButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TLUserName = (TextInputLayout)findViewById(R.id.userName);
        TLPassword =(TextInputLayout)findViewById(R.id.id_password);
        submitButton = (Button)findViewById(R.id.id_submit_button);

        usrName = (EditText)findViewById(R.id.txtUserName);
        Pwd = (EditText)findViewById(R.id.txtPassword);

        TLUserName.setHint("Enter User Name"); //setting hint.
        TLPassword.setHint("Enter password");
}

4) To show and hide error programmatically.

  submitButton.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                String passcode = Pwd.getText().toString();

                if(!passcode.equals("testing"))
                {
                    TLPassword.setError("Password is wrong, please try again");
                }
                else
                {
                    TLPassword.setError(null);
                }
            }
        });

To enable or disable error functionality useĀ setErrorEnabled.

The output will be like.

TextinputLayout_error_feature