Android Floating Label EditText

One of the most basic UI widgets in Android is an EditText. It is generally used to take inputs from the user. But what it lacked was a label attached to it. Therefore in most of the implementations a hint was used as a label for the EditText. But last year when material design was released, a new concept of floating labels was introduced. This new Android floating label EditText concept initially showed a label as a hint; when user enters a value in the EditText, that hint moves on to the top of the EditText as a floating label. As a matter of fact, very recently in the start of June, 15 a new support library was introduced by the android team, called Android Design Support Library. This new library implements the floating label EditText feature for Android on all API versions of it.

Therefore in this tutorial we will implement the Android floating label edittext using the new design support library.

Android TextInputLayout

The question in your mind must be: how to implement the new Android floating action EditText. Answer to this is very simple, use the new Android TextInputLayout around the EditText. Android TextInputLayout is nothing but a layout which is used specifically to wrap an EditText and show floating labels. Android TextInputLayout can be used to wrap one EditText at a time. When an Android TextInputLayout is used around an EditText is automatically takes the hint text defined in the EditText and shows it as a floating label.

Another great feature of Android TextInputLayout is that, you can also use this layout to show errors under the EditText. To do so you may need to use the setErrorEnabled(boolean) and setError(CharSequence) methods of the TextInputLayout class. But please don’t mix these with the existing functionality of showing errors in an EditText, it remains as it was.

Android Floating Label EditText Example

In this example, I would use the new TextInputLayout to wrap the EditTexts and show an Android floating label on those EditTexts with all types of error scenarios. But since the Android floating label EditText is shown through the new design support library, first lets include it in the gradle file of our project:

compile 'com.android.support:design:22.2.0'

For this Android Floating Label EditText Example I am making multiple EditTexts, each of which will be wrapped in a TextInputLayout. Lets define a layout:

<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=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:src="@mipmap/truiton"/>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/fNameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <EditText
            android:id="@+id/fName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="First Name"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/lNameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/fNameLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <EditText
            android:id="@+id/lName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Last Name"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/ageLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lNameLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <EditText
            android:id="@+id/age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Age"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/phoneLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ageLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp">

        <EditText
            android:id="@+id/phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Phone Number"
            android:inputType="phone"/>
    </android.support.design.widget.TextInputLayout>

</RelativeLayout>

Please note in the above layout file @mipmap/truiton is just an image I used, for your project you can remove this image.

Next lets define the main activity class:

package com.truiton.floatinglabeledittext;

import android.os.Bundle;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.widget.EditText;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Displaying TextInputLayout Error
        TextInputLayout lNameLayout = (TextInputLayout) findViewById(R.id
                .lNameLayout);
        lNameLayout.setErrorEnabled(true);
        lNameLayout.setError("Min 2 chars required");

        //Displaying EditText Error
        EditText age = (EditText) findViewById(R.id.age);
        age.setError("Required");

        //Displaying both TextInputLayout and EditText Errors
        TextInputLayout phoneLayout = (TextInputLayout) findViewById(R.id
                .phoneLayout);
        phoneLayout.setErrorEnabled(true);
        phoneLayout.setError("Please enter a phone number");
        EditText phone = (EditText) findViewById(R.id.phone);
        phone.setError("Required");
    }

}

As a whole this would look something like the image below:

As you can see in the above class, all four permutations of error scenarios are shown. The only thing to remember is the usage of setErrorEnabled(boolean) and setError(CharSequence) methods of the TextInputLayout class, if an error in TextInputLayout has to be shown. Also please note if the setErrorEnabled(boolean) method is used, the TextInputLayout uses a little extra space than normal. One of the great things about the new Android floating label EditTexts by using TextInputLayout is that, when the focus is moved to an EditText, the label floats with a very smooth animation. This gives a very good user experience. Hence I would advice to use TextInputLayout in all apps to display a floating label EditText. Hope this helps. Connect with us on Facebook, Google+, and Twitter for more updates.

Mohit Gupt

Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.