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:
- 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 > |
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
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.