Theming of Material Design EditText in Android with Example

Prerequisite: Material Design EditText in Android with Examples

In the previous article Material Design EditText in Android with Examples Material design Text Fields offers more customization and makes the user experience better than the normal text fields. For example, Icon to clear the entire EditText field, helper text, etc. In this article, it's been discussed how we can customize Material design edit text fields. Have a look at the following image to get an idea of how Material design EditTexts can themed.

Note: Now in this article we will only customize the Material design EditText and about implementation refer to the prerequisite article above. The Material design EditText comes under the Small Components.

Steps to Theme the Material Design EditText

Working with the activity_main.xml file

Output UI: Run on Emulator

Now Customizing the EditText Fields by Overriding the Default Material Design

• As we have seen there are three types shaping the Material design components in the article Introduction to Material Design in Android. Those are Triangle edge, Cut corner, and Rounded corner.
• Working with the styles.xml. Invoke the following code to customize the MDC EditText. Comments are added inside the code for better understanding.

Output UI: Run on Emulator

• There are more attributes to set the radius for particular corners.

boxCornerRadiusTopStart
boxCornerRadiusTopEnd

boxCornerRadiusBottomStart
boxCornerRadiusBottomEnd

• Following code and output is an example of the same. The code needs to be invoked inside styles.xml.

Output UI: Run on Emulator