How to use TextInputLayout in Android

Hi Coders!

Since we all know the new Android Design Library is out there. This is the first lesson from the Series on how to implement the All new Design Library. TextInputLayout  is this post all about.

TextInputLayout

Pre-requisites:

Add this line in your app's build.gradle

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

So your Gradle dependencies tag looks like following:

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

In activity.xml

Add the following component, the  'EditText' wrapped around by a 'TextInputLayout'. Just provide an '@+id' attribute to the parent not child.

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_email"
    android:layout_below="@+id/sign_in_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:layout_width="match_parent"
        android:hint="@string/hint_email"
        android:layout_height="wrap_content" />

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

In Activity.java

Instantiate the TILayout

private TextInputLayout mEmailInput;
mEmailInput = (TextInputLayout) findViewById(R.id.input_email);

To get text from Edit Text:

String email = mEmailInput.getEditText().getText().toString();

Access validation methods:

mEmailInput.setErrorEnabled(false);
mEmailInput.setError("Cant be blank");

And see your new amazing FloatingEditText in action!

Note: You have to provide a TextInputLayout for each TextView in your xml. So no need to provide an '@+id'  to any TextView but only for TextInputLayout.


Have Fun Coding!

More Material Design Library posts coming soon!
Post any doubts in comments!