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
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: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: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
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.
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this changes the filled colour of the MDC Filled EditText--> <!--this also changes the color of the hint font and helper text too--> < item name = "colorOnSurface" >@color/colorPrimaryDark</ item > <!--this customizes the hint font of the EditText--> < item name = "textAppearanceSubtitle1" >@style/TextAppearance.App.Subtitle1</ item > <!--this changes the helper text font--> < item name = "textAppearanceCaption" >@style/TextAppearance.App.Caption</ item > <!--this is to change the shape of the MDC EditText--> < item name = "shapeAppearanceSmallComponent" >@style/ShapeAppearance.App.SmallComponent</ item > </ style > < style name = "TextAppearance.App.Subtitle1" parent = "TextAppearance.MaterialComponents.Subtitle1" > <!--this changes the font face of the hint text--> < item name = "fontFamily" >sans-serif-condensed</ item > < item name = "android:fontFamily" >sans-serif-condensed</ item > </ style > < style name = "TextAppearance.App.Caption" parent = "TextAppearance.MaterialComponents.Caption" > <!--this changes the font face of the helper text--> < item name = "fontFamily" >sans-serif-black</ item > < item name = "android:fontFamily" >sans-serif-black</ item > </ style > < style name = "ShapeAppearance.App.SmallComponent" parent = "ShapeAppearance.MaterialComponents.SmallComponent" > <!--this makes the 10 dp of cut corners of the MDC EditText--> < item name = "cornerFamily" >cut</ item > < item name = "cornerSize" >10dp</ item > </ style > </ resources > |
Output UI: Run on Emulator
- There are more attributes to set the radius for particular corners.
boxCornerRadiusTopStart
boxCornerRadiusTopEndboxCornerRadiusBottomStart
boxCornerRadiusBottomEnd
- Following code and output is an example of the same. The code needs to be invoked inside styles.xml.
XML
< resources > <!-- Base application theme. --> < style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar" > <!-- Customize your theme here. --> < item name = "colorPrimary" >@color/colorPrimary</ item > < item name = "colorPrimaryDark" >@color/colorPrimaryDark</ item > < item name = "colorAccent" >@color/colorAccent</ item > <!--this changes the filled colour of the MDC Filled EditText--> <!--this also changes the color of the hint font and helper text too--> < item name = "colorOnSurface" >@color/colorPrimaryDark</ item > <!--this customizes the hint font of the EditText--> < item name = "textAppearanceSubtitle1" >@style/TextAppearance.App.Subtitle1</ item > <!--this changes the helper text font--> < item name = "textAppearanceCaption" >@style/TextAppearance.App.Caption</ item > <!--this is to change the shape of the MDC EditText--> < item name = "shapeAppearanceSmallComponent" >@style/ShapeAppearance.App.SmallComponent</ item > </ style > < style name = "TextAppearance.App.Subtitle1" parent = "TextAppearance.MaterialComponents.Subtitle1" > <!--this changes the font face of the hint text--> < item name = "fontFamily" >sans-serif-condensed</ item > < item name = "android:fontFamily" >sans-serif-condensed</ item > </ style > < style name = "TextAppearance.App.Caption" parent = "TextAppearance.MaterialComponents.Caption" > <!--this changes the font face of the helper text--> < item name = "fontFamily" >sans-serif-black</ item > < item name = "android:fontFamily" >sans-serif-black</ item > </ style > < style name = "ShapeAppearance.App.SmallComponent" parent = "ShapeAppearance.MaterialComponents.SmallComponent" > <!--this makes the 10 dp of cut corners of the MDC EditText--> < item name = "cornerFamily" >rounded</ item > <!--this attribute makes changes to the Bottom Right corner of the EditText according to the value--> < item name = "cornerSizeBottomRight" >24dp</ item > <!--this attribute makes changes to the Top Left corner of the EditText according to the value--> < item name = "cornerSizeTopLeft" >24dp</ item > </ style > </ resources > |
Contact Us