Why I love Text Field from Material Design?

Android Jul 7, 2019

If you create UI for login page in your app, you create more view for 1 input such as TextView, EditText, and ImageView for optional. Is it better use Material Components?

For getting start

How to Getting Start to try Material Components in your project
I think some developer have problem for create some UI in application then Material Design help you for this.
PS. This is a part in my session at Android Bangkok 2019

About EditText and Text Field example, I remain with login page on some application.

Before & After

for 1 input field, you add parent view and child views are TextView to show label and EditText to get input from user. It’s so complex to create 1 field to get input from user.



In Material Design, It’s dynamic for show and hide label when user type input in EditText.





You can change TextInputLayout style which has 2 styles are

  • Filled Box (default): fill & stroke
  • Outline Box: rounded corner

Common features

In Material Design Document said about commonly used properties in your text field.


You can set label of text field by hint and working is show in EditText when no text and move to top when user is typing


Helper text

If you need to show information about input field. I recommend you to use helperText to show this in your layout.

app:helperText="your email address"

And also can implement it in your code too.

layoutUsername.helperText = "your email address"

Error Text

You can add error message in your fields. You can see what’re differences between these pictures.

At left photo, set error text at TextInputLayout

layoutPassword.error = 
      "Password must contain at least 8 characters."

and at right photo, set error text at TextInputEditText.

edittextPassword.error = 
          "Password must contain at least 8 characters."

Character Counter

You can set counter enable by counterEnabled and max length by counterMaxLength at TextInputLayout.


How it works? TextInputLayout show border and character counter to red when user is typing text more than counterMaxLength.

You can implement counter character with TextWatcher to show error message.

How it works? Show error text when user is typing text more than max character counter and not show error text when user is typing less than them.

Follow my page and stay up-to-date

อย่าลืมกด like กด share บทความกันด้วยนะคะ :)

Posted by MikkiPastel on Sunday, December 10, 2017


Minseo Chayabanjonglerd

I am a full-time Android Developer and part-time contributor with developer community and web3 world, who believe people have hard skills and soft skills to up-skill to da moon.