Byadmin July 21, 2015July 28, 2015

This time in Google I/O 2015, it come up with Android M developers preview announcement and lots of other stubs which increase developers to be Materialized.

Recently Google has released Android Support Library 22.2.0. In that we are going to explore “Design Support Library”.  It has lots of new widgets which will definitely helpful to the developers.

Each widget has its own characteristic. So we will learn all of them but step wise. Today’s our topic to learn is “TextInputLayout“.

TextInputLayout

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.

This layout helps user to show first “hint” and when user taps on , hint will come up with text over it as floating label and user is allowed to enter text.

What is problem with Traditional EditText?

When we are using EditText, we need to take care for adding hint to it. But with traditional EditText, when user starts typing, hint will be gone and no more visible until EditText is empty. To overcome, we can also use TextView as a label over it. But we need to take care of by aligning them with proper spaces, font sizes, font types and colors.

How to use?

First you need to add support library to your project. To do that follow the steps.

Step – I

Open your SDK manager  and check whether Android Support Library is updated with 22.2 version or not.

1. Android Support Library

You need to install 2 packages

Android Support Repository - Rev 16
Android Support Library - Rev 22.2

Step – II

After that you need to add dependency to your gradle file. If you have already created android project then open your application gradle file (app/build.gradle) and paste following source of code in it. Else first learn How to create a project in Android Studio?

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

After adding dependencies, gradle file will look like below.

2. Android Support Library

Thats it. You are done with adding support library to your project. Now move to the part of using TextInputLayout.

Step – III

To use TextInputLayout, it requires EditText as its child. It will take up its child property and will display layout accordingly.

[xml]
<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/firstName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="First Name"
            android:inputType="text"
            android:singleLine="true"/>

</android.support.design.widget.TextInputLayout>
[/xml]

You can see here that to use TextInputLayout, we need to use full class path of design support library and inside it we need to pass EditText as child. We have to pass hint in EditText to show floating label to your view.

Now open your layout file and paste following code in it.

[xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/firstName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="First Name"
            android:inputType="text"
            android:singleLine="true"/>

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/lastName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Last Name"
            android:inputType="text"
            android:singleLine="true"/>

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/mail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="e-mail"
            android:inputType="textEmailAddress"
            android:singleLine="true"/>

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

</LinearLayout>
[/xml]

In this layout, we took 3 TextInputLayout. First Name, Last Name and Email fields. Each has its own hint attribute.

Step – IV

Final step. Run your application.

Download

Full source code at Github.

Summary

In this article, we have learn about what is TextInputLayout. How it is different then EditText and what are the benefits of using it.