Related Articles

Related Articles

Theming of Material Design EditText in Android with Example
  • Last Updated : 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.

Theming of Material Design EditText

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output UI: Run on Emulator

Theming of Material Design EditText

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

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output UI: Run on Emulator

Theming of Material Design EditText




My Personal Notes arrow_drop_up
Recommended Articles
Page :