Android Material Design – Working With Text Field – Material Design


Text Fields are used to take Input text from the user. After Android Material Design project was introduced, AppCompat v21 library made the use of Edit Text.

Download Souce Code

In this tutorial we will work with Text Field. We will also work on its components like counter,password visibility,hint and floating layout. We will also perform email verification and display its result in the hint.


Jar Required

For email validation we will be using JavaMail jar, instead of android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()  for more specific hints.

Download JavaMail jar from here.

Text Field Form

We will be creating a form containing Text Fields and will add various validations to these fields.

1.Create a new project in Android Studio.

2.Using File Explorer, move the javax.mail.jar downloaded from above and paste it in your <Project~ Path>\ProjectName\app\libs folder.

3. Inside your project -> gradle scripts -> build.gradle, dependencies{}  method should be like this

4. Inside res\layout\ folder activity_main.xml file, looks like this

Tags to Check in activity_main.xml

a) TextInputLayout :- TextInputLayout is a new element(layout to be specific) added in design support library,which wraps an EditText. This layout supports showing an error via setErrorEnabled(boolean) and setError(CharSequence), a character counter viasetCounterEnabled(boolean) and password visibility via setPasswordVisibilityToggleEnabled(boolean).

b) AppCompatEditText :- A EditText which supports compatible features on older version of the platform

Note :- The EditText is used as a child of TextInputLayout layout.TextInputLayout has greater control over the visual aspects of any text input

c) android:hint=”@string/name” :- The hint to display in the floating label.

d) app:passwordToggleEnabled=”true” :- Displays toggle eye icon in the password field.

e) android:focusable=”true” and android:focusableInTouchMode=”true” :- Set Initial focus on the Relative Layout.

5. Your com\ProjectName\ looks like this

Tags to Check in

a) addTextChangedListener :- Retrieve EditText value at typing time.

b) TextWatcher :- When an object of a type is attached to an Editable, its methods will be called when the text is changed. Read More here.

c) passLayout.setCounterEnabled(true) :- The character counter functionality is enabled or not in this layout.

d) passLayout.setCounterMaxLength(10) :- Sets the max length to display at the character counter.

e) setErrorEnabled :- Enable or disable error functionality in the layout.

f) setError :- Sets an error message that will be displayed below our EditText. If the error is null, the error message will be cleared.

Read more about Text fields here

Hope you liked this tutorial…!!Please share and comment below.

Download Souce Code