Before start work on EditTextField, you need to know about TextInputLayout. TextInputLayout provides implementation and makes it easy to include Material TextField in Layout design.

First, we shall include Gradle for Material design.

implementation 'com.google.android.material:material:1.1.0-alpha08'

Now we shall make changes in our style file. Because now we included Material design library and also we’re going to use Material in our XML file. We cannot use Material design without including Material design style.

   <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
   <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.google.android.material.textfield.TextInputLayout>

This was the syntax of TextInputLayout. Material design library provides us the following type of EditTextField styles which are

  • Outlined Box
  • Outlined Box Dense
  • Filled Box
  • Filled Box Dense

Similarly, TextInputLayout provides us functionality for a EditTextField features. For example

  • Floating Label
  • Error Message
  • Helper Text
  • Character Count
  • Password Visibility
  • Clear Text
  • Custom Mode

Here are some examples with EditTextField. Have a look on the XML layout

<?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:layout_margin="20dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Filled EditTextField Example"
        android:textColor="@android:color/black" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:hint="Enter your full name"
        app:counterEnabled="true"
        app:counterMaxLength="10">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionNext" />

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="OutlinedBox EditTextField Example"
        android:textColor="@android:color/black" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:hint="Enter your phone number"
        app:counterEnabled="true"
        app:counterMaxLength="10">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionNext"
            android:padding="10dp" />

    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Toggle Password Example"
        android:textColor="@android:color/black" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:hint="Enter your Password"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionNext"
            android:inputType="numberPassword" />

    </com.google.android.material.textfield.TextInputLayout>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Clear Text Example"
        android:textColor="@android:color/black" />

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:hint="Enter your  Address"
        app:endIconMode="clear_text">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:imeOptions="actionDone" />

    </com.google.android.material.textfield.TextInputLayout>

</LinearLayout>

Thanks for reading the tutorial. Please like our Facebook page for a new and latest tutorial.

Author

Write A Comment