Key Properties of Material Design EditText in Android - GeeksforGeeks

05 Nov, 2020
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.
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>
There are 4 types of end icon modes for MDC EditTexts. Those are:
clear text.password toggle.custom.dropdown menu.
clear text.
password toggle.
custom.
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>
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>
android
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Retrofit with Kotlin Coroutine in Android
Flutter - Custom Bottom Navigation Bar
Android Listview in Java with Example
How to Read Data from SQLite Database in Android?
How to Change the Background Color After Clicking the Button in Android?
MVP (Model View Presenter) Architecture Pattern in Android with Example
Fragment Lifecycle in Android
How to Add Image to Drawable Folder in Android Studio?
How to Post Data to API using Retrofit in Android?
Animation in Android with Example