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!

The all new Android Design Library from Google

Hi coders!

So finally Google made a strong step ahead to bring some of the beautiful components as native ones in the latest release of Android build tools SDK. The biggest news is that, few of these components will be backward compatible with the usage of the all new Android Design Library!

Whoa! Now amazing UI will still exist for users thriving on the Android OS version prior to API 21. a.k.a. Lollipop! So cool.

Watch this...

Summarizing:
With the all new design Library you get access to following components back to API 7.

Components-

• TextInputLayout - a.k.a FloatingEditText
• FloatingActionButton
• Snackbar - tasty indeed!
• Material Design Compliant Tabs and Navigation Menu
• Lot of works on motion and scrolling

Visuals and Motions-

• Coordinator Layouts - this one is massive!
• NavigationView - with Drawer Layout
• CollapsingToolbarLayout - a responsive new ActionBar
• AppBarLayout - replaces ActionBar in conjunction with ToolBar (the new ActionBar)

So, a Design library on the top of a Support library is now the new vial of  magical Material Design with massive support for the previous Android APIs. Whaao!

So now feel at home with Material Design!

Stay Tuned for more content!