Android TextInputLayout Tutorial and Example
TextInputLayout is a layout that wraps android.widget.EditText
to show a floating label when the hint is hidden due to the user inputting text.
This layout is normally used with android.support.design.widget.TextInputEditText
.
Some of the unique features it supports include:
- Enabling and Setting Errors via
setErrorEnable(boolean)
andsetError(CharSequence)
. - Character counter via
setCounterEnabled(boolean)
.
This class resides in the android.support.design.widget
package.
package android.support.design.widget;
TextInputEditText
inherits from LinearLayout
:
public class TextInputLayout extends LinearLayout {}
TextInputLayout
can only contain one EditText. Attempt to add more than one will result to java.lang.IllegalArgumentException
.
Designin Android App Login Page
Let’s also see a login page:
<?xml version="1.0" encoding="utf-8"?> <ScrollView android_layout_width="fill_parent" android_background="@color/colorPrimary" android_layout_height="fill_parent" android_fitsSystemWindows="true"> <LinearLayout android_orientation="vertical" android_layout_width="match_parent" android_layout_height="wrap_content" android_paddingTop="56dp" android_paddingLeft="24dp" android_paddingRight="24dp"> <ImageView android_src="@drawable/ic_local_taxi_black_24dp" android_layout_width="72dp" android_layout_height="72dp" android_layout_marginBottom="24dp" android_layout_gravity="center_horizontal" /> <!-- Email Label --> <android.support.design.widget.TextInputLayout android_layout_width="match_parent" android_layout_height="wrap_content" android_layout_marginTop="8dp" android_layout_marginBottom="8dp"> <EditText android_id="@+id/input_email" android_layout_width="match_parent" android_layout_height="wrap_content" android_inputType="textEmailAddress" android_textColor="#ffffff" android_hint="Email" /> </android.support.design.widget.TextInputLayout> <!-- Password Label --> <android.support.design.widget.TextInputLayout android_layout_width="match_parent" android_layout_height="wrap_content" android_layout_marginTop="8dp" android_layout_marginBottom="8dp"> <EditText android_id="@+id/input_password" android_layout_width="match_parent" android_layout_height="wrap_content" android_inputType="textPassword" android_textColor="#ffffff" android_hint="Password"/> </android.support.design.widget.TextInputLayout> <android.support.v7.widget.AppCompatButton android_id="@+id/btn_login" android_layout_width="fill_parent" android_layout_height="wrap_content" android_layout_marginTop="24dp" android_layout_marginBottom="24dp" android_background="@color/colorPrimaryDark" android_padding="12dp" android_textColor="#ffffff" android_text="Login"/> <TextView android_id="@+id/link_signup" android_layout_width="fill_parent" android_layout_height="wrap_content" android_layout_marginBottom="24dp" android_textColor="#ffffff" android_text="No account yet? Create one" android_gravity="center" android_textSize="16dip"/> </LinearLayout> </ScrollView>