Material Design - EditText

By -
Mostly used User Interface widget, used to take inputs from the user. It have a hint attribute, which hide while typing. After hiding the hint it becomes a problem to guess the EditText without label. Material Design is solution to this problem. A new idea of floating labels was introduced in material design to overcome this issue. Here EditText initially showed a label as a hint; but when user start input data in the EditText, that hint disappear from EditText and moves up to the top of the EditText as a floating label. We will use a Tag of material design; TextInputLayout around the EditText.

A TextInputLayout widget behaves same as a LinearLayout; manage its child as LinearLayout does with one child of EditText. It’s a wrapper tag such as ScrollView. When TextInputLayout is placed as a wrapper of EditText is auto pick the hint text of EditText and use it as a floating label. Second feature of TextInputLayout  is it provide an error message facilitation. We can set an error message to EditText by using setErrorEnabled() and setError() methods provided by it.
File Name
Code
Build.gradle (Module : app)
dependencies {
  implementation fileTree(dir: 'libs', include: ['*.jar'])
  //noinspection GradleCompatible
  implementation 'com.android.support:appcompat-v7:27.0.0'
  //noinspection GradleCompatible
  implementation 'com.android.support:design:27.0.1'
}
XML Layout
activity_main.xml
<?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:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">

  <android.support.design.widget.TextInputLayout
      android:id="@+id/input_layout_password"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <EditText
          android:id="@+id/input_password"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="Enter Email Here" />

  </android.support.design.widget.TextInputLayout>
  <EditText
      android:id="@+id/input_password_simple"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Enter Email Here" />

</LinearLayout>

Comments

Post a Comment