Android Floating Label EditText - Truiton
Skip to content

Android Floating Label EditText

Photo Credit: Allison McDonald - 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:

Android Floating Label EditText

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.

3 thoughts on “Android Floating Label EditText”

  1. Hi, is there anyway to set the color of the Floating Label when it is done floating?

    For example, I’d like to have the label be the following colors:

    a) before floating, have the color silver (right now I have the color silver set);
    b) when floating, have the color blue (right now I have the color blue set); and
    c:) when done floating, have the color blue (right now the color defaults to the silver color used before the label floats).

Leave a Reply

Your email address will not be published. Required fields are marked *