Theming of Material Design EditText in Android with Example

05 Nov, 2020
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.
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>
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>
There are more attributes to set the radius for particular corners.
boxCornerRadiusTopStartboxCornerRadiusTopEnd
boxCornerRadiusBottomStartboxCornerRadiusBottomEnd
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>
android
Technical Scripter 2020
Android
Technical Scripter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.