TextInputLayout Form Validation Using Data Binding in Android

By Posted on

Photo by Christian Wiediger on Unsplash.

Afew days ago, I was working on a project where I had to implement form validation on textInputLayout and textInputEditText using data binding.
Unfortunately, there is not enough documentation available for that.

Finally, I achieved what I wanted through some research and experiments. This is what I wanted to achieve:

final design

final design

So I know there are many developers who want the same actions and user-friendly behaviour on forms.

Let’s get started.



What Are We Going to Use?

  • Kotlin
  • Data binding
  • Material library

I am going to break the whole project down into steps to make it easy for you to understand.

Set up the initial project and enable data-binding from build.gradle(:app) by adding this line under the android{} tag: 

dataBinding{
    enabled true
}
Enter fullscreen mode

Exit fullscreen mode

To use textInputLayout and textInputEditText, you need to enable Material support for Android by adding this dependency in build.gradle(:app): 

implementation 'com.google.android.material:material:1.2.1'
Enter fullscreen mode

Exit fullscreen mode

Let’s make a layout of our form. I am making it simple because my goal is to define the core functional part of this feature rather than designing the layout.

Roadmap to Becoming a Successful Android Developer

I made this simple layout:

layout

Here is the activity_main.xml:


<?xml version=“1.0“ encoding=“utf-8“?>
<layout 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“>
<LinearLayout
android:layout_width=“match_parent“
android:layout_height=“match_parent“
android:layout_margin=“10dp“
android:orientation=“vertical“
tools:context=“.MainActivity“>
<com.google.android.material.textfield.TextInputLayout
android:id=“@+id/userNameTextInputLayout“
style=“@style/TextInputLayoutBoxColor“
android:layout_width=“match_parent“
android:layout_height=“wrap_content“
android:layout_marginTop=“10dp“
android:hint=“@string/username“
app:endIconMode=“clear_text“
app:errorEnabled=“true“
app:hintTextAppearance=“@style/TextAppearance.App.TextInputLayout“>
<com.google.android.material.textfield.TextInputEditText
android:id=“@+id/userName“
android:layout_width=“match_parent“
android:layout_height=“50dp“
android:inputType=“textPersonName“ />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id=“@+id/emailTextInputLayout“
style=“@style/TextInputLayoutBoxColor“
android:layout_width=“match_parent“
android:layout_height=“wrap_content“
android:layout_marginTop=“5dp“
android:hint=“@string/email“
app:endIconMode=“clear_text“
app:errorEnabled=“true“
app:hintTextAppearance=“@style/TextAppearance.App.TextInputLayout“>
<com.google.android.material.textfield.TextInputEditText
android:id=“@+id/email“
android:layout_width=“match_parent“
android:layout_height=“50dp“
android:inputType=“textEmailAddress“ />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id=“@+id/passwordTextInputLayout“
style=“@style/TextInputLayoutBoxColor“
android:layout_width=“match_parent“
android:layout_height=“wrap_content“
android:layout_marginTop=“5dp“
android:hint=“@string/password“

Leave a Reply

Your email address will not be published. Required fields are marked *