Key Properties of Material Design EditText in Android

In the previous article Material Design EditText in Android with Examples its been discussed how to implement the Material design EditText and how they differ from the normal EditText. In this article its been discussed on how to customize MDC edit text fields with their key properties. Have a look at the following image to get the idea about the key properties of the MDC edit text fields.

Customizing the MDC EditText by using Key Properties

Key Property 1: Box stroke color and width

• Invoke the following code inside activity_main.xml file.
• The attributes need to be concentrated are boxStrokeColor, boxStrokeWidth, boxStrokeWidthFocused. Inside the TextInputLayout.

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"
    tools:ignore="HardcodedText">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />

    <!--this is the material design filled EditText with helper text-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:boxStrokeColor="@android:color/black"
        app:boxStrokeWidth="3dp"
        app:boxStrokeWidthFocused="7dp"
        app:helperText="Enter in text format only">

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

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />

    <!--this is the material design outlined EditText with helper text-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:boxStrokeColor="@android:color/black"
        app:boxStrokeWidth="3dp"
        app:boxStrokeWidthFocused="7dp"
        app:helperText="Enter in text format only">

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

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

</LinearLayout>

Output UI: Run on Emulator

Key Property 2: Adding the end icon mode and start icon mode

There are 4 types of end icon modes for MDC EditTexts. Those are:

1. clear text.
2. password toggle.
3. custom.
4. dropdown menu.

Note: For password toggle, the input type is required for the MDC EditText.

• For the start icon, there is a need for a vector icon. So import vector icon by right click on the drawable -> new -> Vector asset. Then select the desired vector icons.
• Refer to the following image if unable to locate the vector asset dialog in Android Studio.

• Invoke the following code into activity_main.xml file.

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"
    tools:ignore="HardcodedText">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />

    <!--this is the material design filled EditText with helper text-->
    <!--the attribute endIconMode will make the end icon mode according
        to the EditText context-->
    <!--the startIconDrawable attribute sets the icon at
        the start of the EditText-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Something"
        app:endIconMode="clear_text"
        app:helperText="Enter in text format only"
        app:startIconDrawable="@drawable/ic_text_fields_black_24dp">

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

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />

    <!--this is the material design outlined EditText with helper text-->
    <!--the attribute endIconMode will make the end icon mode according
        to the EditText context-->
    <!--the startIconDrawable attribute sets the icon at
        the start of the EditText-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Password"
        app:endIconMode="password_toggle"
        app:helperText="Enter in text format only"
        app:startIconDrawable="@drawable/ic_vpn_key_black_24dp">

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

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

</LinearLayout>

Output UI: Run on Emulator

Key Property 3: Helper text

• This is the small text which can be invoked to inform the user what type of data to be entered to the EditText.
• Invoke the following to inside the activity_main.xml file. Comments are added inside the code for better understanding.

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"
    tools:ignore="HardcodedText">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Filled EditText" />

    <!--this is the material design filled
        EditText with helper text-->
    <!--the attribute helperText sets the helper
        text below the EditText box-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/filled_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Height"
        app:helperText="Height should be in-terms of feet (ft.)">

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

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="64dp"
        android:text="Material Design Outlined EditText" />

    <!--this is the material design outlined
         EditText with helper text-->
    <!--the attribute helperText sets the helper text
         below the EditText box-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/outline_edit_text"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:hint="Enter Password"
        app:helperText="Password must be a number">

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

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

</LinearLayout>

Output UI: Run on Emulator