Android TextInputLayout


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) and setError(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 xmlns:android="http://schemas.android.com/apk/res/android"
    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>

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post