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. This new library implements the floating label EditText feature for Android on all API versions of it by using TextInputLayout.
In design support library a new element called TextInputLayout was introduced to display the floating label on EditText. The EditText has to be wrapped by TextInputLayout in order to display the floating label. You can also set an error message to EditText by using setErrorEnabled(boolean) and setError(CharSequence) methods.
TextInputLayout takes the value of android:hint assigned to EditText and displays it as floating label.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<android.support.design.widget.TextInputLayout android:id="@+id/nameLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" app:errorEnabled="true"> <EditText android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/name" android:inputType="text" android:paddingLeft="5dp" android:paddingRight="5dp" android:textColor="#000000" android:textColorHint="#d3d3d3" /> </android.support.design.widget.TextInputLayout> |
In this tutorial, we are going to learn how to implement Floating Labels by using Material Design Library.
1. Create a new project in Android Studio by navigating to File ⇒ New Android ⇒ Application Project and fill required details. By default my activity is MainActivity.java.
2.Open build.gradle and add design support library dependency.
1 2 3 4 5 |
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1' } |
3. Open res=>values=>strings.xml and the following strings to this file.
1 2 3 4 5 6 7 8 9 |
<resources> <string name="app_name">FloatingLabels Demo</string> <string name="name">Full Name</string> <string name="email">Email Id</string> <string name="phone">Contact Number</string> <string name="location">Location</string> <string name="submit">Submit</string> <string name="title">Floating Labels Using TextInputLayout</string> </resources> |
4. Create a activity_main.xml file for UI design of floating labels and add the following code to it. Make sure you provide hint to your EditText for floating labels.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:padding="5dp"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:text="@string/title" android:textColor="#FF2259" android:textSize="18sp" android:textStyle="bold" /> <!-- TextInputLayout is Used to Show Floating Labels --> <android.support.design.widget.TextInputLayout android:id="@+id/nameLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" app:errorEnabled="true"> <EditText android:id="@+id/name" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/name" android:inputType="text" android:paddingLeft="5dp" android:paddingRight="5dp" android:textColor="#000000" android:textColorHint="#d3d3d3" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/emailLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" app:errorEnabled="true"> <EditText android:id="@+id/email" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/email" android:inputType="textEmailAddress" android:paddingLeft="5dp" android:paddingRight="5dp" android:textColor="#000000" android:textColorHint="#d3d3d3" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/numberLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" app:errorEnabled="true"> <EditText android:id="@+id/number" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/phone" android:inputType="number" android:paddingLeft="5dp" android:paddingRight="5dp" android:textColor="#000000" android:textColorHint="#d3d3d3" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/locationLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" app:errorEnabled="true"> <EditText android:id="@+id/location" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/location" android:inputType="text" android:paddingLeft="5dp" android:paddingRight="5dp" android:textColor="#000000" android:textColorHint="#d3d3d3" /> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/submit" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/submit" /> </LinearLayout> |
5. Open MainActivity.java and add the following code. On submit button click i am checking every field if empty or not and setError() to TextInputLayout.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.androidfloatinglables_demo; import android.os.Bundle; import android.support.design.widget.TextInputLayout; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private static EditText name, email, number, location; private static TextInputLayout nameLayout, emailLayout, numberLayout, locationLayout; private static Button submit; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); } //Initiate all views private void initViews() { name = (EditText) findViewById(R.id.name); email = (EditText) findViewById(R.id.email); number = (EditText) findViewById(R.id.number); location = (EditText) findViewById(R.id.location); nameLayout = (TextInputLayout) findViewById(R.id.nameLayout); emailLayout = (TextInputLayout) findViewById(R.id.emailLayout); numberLayout = (TextInputLayout) findViewById(R.id.numberLayout); locationLayout = (TextInputLayout) findViewById(R.id.locationLayout); submit = (Button) findViewById(R.id.submit); //Implement click listener over button submit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { checkValidation();//Call check validation method } }); } //Check Validation Method will check if all fields are filled or not private void checkValidation() { String getName = name.getText().toString(); String getEmail = email.getText().toString(); String getNumber = number.getText().toString(); String getLocation = location.getText().toString(); //If fields are empty then set error over TextInputLayout over their corresponding EditText if (getName.equals("") || getName.length() == 0) nameLayout.setError("Enter your full name."); else if (getEmail.equals("") || getEmail.length() == 0) emailLayout.setError("Enter your email id."); else if (getNumber.equals("") || getNumber.length() == 0) numberLayout.setError("Enter your contact number."); else if (getLocation.equals("") || getLocation.length() == 0) locationLayout.setError("Enter your location."); else //If all fields are filled then do your stuff Toast.makeText(MainActivity.this, "All fields are filled.", Toast.LENGTH_SHORT).show(); } } |
6. Finally all done, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.