Tutorial

Android Material Text Fields

Published on August 4, 2022
author

Anupam Chugh

Android Material Text Fields

In this tutorial, we’ll implement Text Fields using the new Material Design Components Library. We have already implemented TextInputLayout here.

Material TextFields

TextInputLayout provides an implementation for Material text fields. We just need to use TextInputEditText! First and foremost, import the new material components dependency. Also, set the MaterialComponent theme in your Activity.

implementation 'com.google.android.material:material:1.1.0-alpha09'

By default, an input text field has a filled background to draw users attention. Now let’s create a default text field:

 <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

</com.google.android.material.textfield.TextInputLayout>

In the next few sections, we’ll customize text fields in different ways.

Standard and Dense Text Fields

Text Fields have two types of height variants:

  • Standard - This is used by default if nothing else is there.
  • Dense - @style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense

The dense Text field is slightly shorter in height.

<com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box(default)">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Filled box dense"
            app:boxBackgroundColor="#20D81B60">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

By default the FilledBox.Standard style is used app:boxBackgroundColor is used to set the filled box color. Here’s how this looks on the screen:

Android Material Text Field Dense Standard Filled Box
Android Material Text Field Dense Standard Filled Box

Outline Box Text Fields

Apply the following style on the TextInputLayout to get the outlined look text fields:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Similar to FilledBox, this has the two height variants as well - Standard and Dense. To set the corner radius, following attributes are used:

  • boxCornerRadiusTopStart
  • boxCornerRadiusTopEnd
  • boxCornerRadiusBottomStart
  • boxCornerRadiusBottomEnd

boxStrokeColor is used to set the stroke color of the outline. Here’s how it looks:

Android Material Text Field Outlined Box
Android Material Text Field Outlined Box

End Icon Modes

Moving forward, now let’s set end icon modes. These are basically icons set at the right of the text field. Currently, the three types of icons that are available built-in are :

  • password_toggle
  • clear_text
  • custom

The above attributes are self-explanatory. We can set our own icon tint on these icons using endIconTint attribute. For the custom icon, we use the endIconDrawable attribute

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Enter password"
            app:endIconMode="password_toggle"
            app:endIconTint="@color/colorAccent">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Clear text"
            app:endIconMode="clear_text"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:hint="Custom end icon"
            app:endIconCheckable="true"
            android:id="@+id/custom_end_icon"
            app:endIconDrawable="@android:drawable/ic_input_add"
            app:endIconMode="custom"
            app:endIconTint="@color/colorPrimaryDark">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

Here’s how it looks on the screen:

Android Material Text Field End Icons
Android Material Text Field End Icons

For the custom icon, we can use setEndIconOnClickListener callback to listen to clicks and do stuff.

Shaped Text Fields

ShapeAppearance is a powerful style. It lets us customize the shape of the text field. We have two built-in shapes - cut and round.

<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">12dp</item>
    </style>

    <style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">16dp</item>
    </style>

Setting the above styles in the shapeAppearance attributes gives us this -

Android Material Text Field Shapes
Android Material Text Field Shapes

That sums up Material Components Text Fields for now. In the below source code you’ll find all the above concepts.

AndroidMaterialTextFields

Github Project Link

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Anupam Chugh

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
March 17, 2020

How to extend TextInputLayout/TextInputEditText to make it more customise?

- Priyanka

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    December 7, 2019

    Hey Anupam, I Have been Following Your Posts and they are really awesome … Keep It Up and Thanks a lot .They are really good. Regards Mukul Nimker

    - Mukul Nimker

      Try DigitalOcean for free

      Click below to sign up and get $200 of credit to try our products over 60 days!

      Sign up

      Join the Tech Talk
      Success! Thank you! Please check your email for further details.

      Please complete your information!

      Become a contributor for community

      Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

      DigitalOcean Documentation

      Full documentation for every DigitalOcean product.

      Resources for startups and SMBs

      The Wave has everything you need to know about building a business, from raising funding to marketing your product.

      Get our newsletter

      Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

      New accounts only. By submitting your email you agree to our Privacy Policy

      The developer cloud

      Scale up as you grow — whether you're running one virtual machine or ten thousand.

      Get started for free

      Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

      *This promotional offer applies to new accounts only.