TextInputLayout Form Validation Using Data Binding in Android

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 *