How to Add Floating Label Android For Edittext Using Design Support Library

0
Shares
How to Add Floating Label Android For Edittext Using Design Support Library
4.7 (93.33%) 3 votes

When Android platform was introduced by Google, Android edittext was one of the basic UI widgets. It is used by Android developers to take inputs from the user. And, while typing the text, it usually hides the hint that may create a problem for identifying Edittext without a label. However, last year, Google launched a new Android design support library that consists of snackbar, floating action button, floating label Android for edittext, floating edittext Android etc.

This floating label Android for edittext is the concept of showing a label as a hint when the user is entering information in the edittext. When the user taps on the edittext, that hint moves on the top as a floating hint edittext Android.

In this Android app tutorial, we’re going to learn how to add this floating label Android for edittext.

Let’s Get Started

Open your Android Studio and create a new project.

screenshot-1

In the next tab, select your target Android device.

screenshot-2

Select Base Activity and click on next.

screenshot-3

Lastly, customize the activity.

screenshot-4

Adding Dependency

To display floating label in EditText control we need to add below dependencies.

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.1.1'
compile 'com.android.support:design:25.1.1'
testCompile 'junit:junit:4.12'
}

Now, Add EditText and TextInputLayout.

res/layout/content_main.xml

Add EditText inside TextInputLayout which you can find in android.support.design.widget.TextInputLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_main"
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"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.spaceo.textinputlayoutdemo.MainActivity"
tools:showIn="@layout/activity_main">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">

<EditText
android:id="@+id/edFirstName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_first_name"
android:inputType="textCapWords"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">

<EditText
android:id="@+id/edLastName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_last_name"
android:inputType="textCapWords"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">

<EditText
android:id="@+id/edEmailAdress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Email Address"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">

<EditText
android:id="@+id/edPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Phone Number"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_marginTop="20dp"
android:text="Submit"
android:textAllCaps="false"
android:layout_height="wrap_content"/>
</LinearLayout>

That’s it!

screenshot-5

Now, with the knowledge of how to add floating labels in Android apps, you can create awesome looking forms and login pages. In fact, you can further experiment with different available attributes of Android design support library.

Although, if you’re implementing the Android design support library attributes into your startup or business app, then it’s better that you consult with an expert first. The implementation might seem easy, but it’s advisable to consult with either an expert or Android app development company to make sure that it has done right.

This page was last edited on July 21st, 2018, at 2:09.
 
0
Shares
 

Want to Develop Android App From Scratch? Contact Us Now

Get your free consultation now