Android | TextInputLayout

EditText , has a hint attribute that will show text inside the EditText telling the user what to enter in this text field. That hint text disappears due to the user inputting text. However, TextInputLayout , "a layout wrapping an EditText", shows hint as floating label when the hint is hidden due to the user inputting text. TextInputLayout is part of Design Support library.

Environment & Tools

• Windows 7
• Eclipse ADT
• Nexus 5
• Android Support Library, revision 22.2.0 or higher

About this Sample App

The code below is for a dummy app that will show how TextInputLayout will work on your screen.

( 1 ) Create new Android Project

• Application Name: InputTextLayout
• Project Name: android-input-text-layout
• Package Name: com.hmkcode.inputtextlayout

( 2 ) Add TextInputLayotu to Layout XML

• TextInputLayout will wrap EditText view.
• EditText hint attribute should not be empty.

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hmkcode.inputtextlayout.MainActivity" >

    
     <android.support.design.widget.TextInputLayout
        android:id="@+id/til"
      	android:layout_width="fill_parent"
      	android:layout_height="wrap_content">
       	<EditText
        	android:id="@+id/textDialog"
        	android:layout_width="fill_parent"
        	android:layout_height="wrap_content"
        	android:hint="First Name"/>
  	</android.support.design.widget.TextInputLayout>
  
  	<android.support.design.widget.TextInputLayout
    	android:id="@+id/til2"
      	android:layout_width="fill_parent"
      	android:layout_height="wrap_content"
      	android:layout_below="@+id/til">
       	
       	<EditText
      	  	android:id="@+id/textDialog2"
        	android:layout_width="fill_parent"
        	android:layout_height="wrap_content"
        	android:hint="Last Name"/>
  	</android.support.design.widget.TextInputLayout>

</RelativeLayout>

Note: This sample app was created in Eclipse ADT. You may need to go over the below steps to resolve some issues.

• Make sure you have Android Support Library, revision 22.2.0 or higher.
• TextInputLayout is part of Design Support Library.
• You need to import <android-sdk>/extras/android/support/design.
• You need to import <android-sdk>/extras/android/support/v7/appcompat.
• After importing design library, you need to edit project.proerties file as following:

# Project target.
target=android-21
android.library.reference.1=../v7/appcompat
android.library=true

• In your app project, [reference design library project] (https://developer.android.com/tools/projects/projects-eclipse.html#ReferencingLibraryProject).

Source Code @ [GitHub] (https://github.com/hmkcode/Android/tree/master/android-input-text-layout)