Two-way data binding in android

In this blog, we are going to show you how to use two-way data binding for the form validation. But before that, we should know about the Basic Data binding technique.

Data Binding Recap

With the release of Android M , the data binding came into android. As its a support library it supports back to API level 7. The data binding is a technique to bind the application logic to the layouts which were earlier a redundant work.

Data Binding technique android Part-I

How to use the Data binding with view Id,

Data Binding in android with View ID

After going though both of these blogs, now we can continue for two-way data binding.

How can we use

Two-way data binding allows you to automatically transfer data from user input back into your data model. If we want to support two-way binding so we have to use “@={expression}” syntax for two-way binding:

<EditText android:id="@+id/username12" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="30dp" android:hint="Email" android:text="@={userdata.email}" android:inputType="textEmailAddress" android:singleLine="true" android:textColorHint="#9F9F9F" />

1 2 3 4 5 6 7 8 9 10 11

<EditText                         android:id="@+id/username12"                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:layout_centerHorizontal="true"                         android:layout_marginTop="30dp"                         android:hint="Email"                         android:text="@={userdata.email}"                         android:inputType="textEmailAddress"                         android:singleLine="true"                         android:textColorHint="#9F9F9F" />

In model UserData.java

public class UserData extends BaseObservable { private String email; public UserData(Context context) { this.context = context; } @Bindable public String getEmail() { if (email == null) { return ""; } return email; } public void setEmail(String email) { this.email = email; notifyPropertyChanged(BR.email); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

public class UserData extends BaseObservable {     private String email;   public UserData(Context context) {         this.context = context;     }     @Bindable     public String getEmail() {         if (email == null) {             return "";         }         return email;     }     public void setEmail(String email) {         this.email = email;         notifyPropertyChanged(BR.email);     } }

In your model class, you have to extend the BaseObservable and for notify, you have to use “notifyPropertyChanged(BR.email)” in your setter.

notifyPropertyChanged

Notifies listeners that a specific property has changed. The getter for the property that changes should be marked with Bindable to generate a field inBR to be used as fieldId.

Complete Code

This is the simple login form where we have used the two-way data binding for form validation,

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"> <data> <variable name="userdata" type="application.coderdna.twowaydatabingingdemo.Model.UserData"></variable> </data> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="30dp"> <RelativeLayout android:id="@+id/login_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_gravity="right"> <android.support.design.widget.TextInputLayout android:id="@+id/userlayout11" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" app:error="@{userdata.emailError}" android:layout_alignParentTop="true"> <EditText android:id="@+id/username12" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="30dp" android:hint="Email" android:text="@={userdata.email}" android:inputType="textEmailAddress" android:singleLine="true" android:textColorHint="#9F9F9F" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/passLayout11" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" app:error="@{userdata.passwordError}" android:layout_below="@+id/userlayout11"> <EditText android:id="@+id/password" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/forgot_password" android:hint="Password" android:text="@={userdata.password}" android:inputType="textPassword" android:singleLine="true" android:textColorHint="#9F9F9F" /> </android.support.design.widget.TextInputLayout> <Button android:id="@+id/login" android:layout_width="280dp" android:layout_height="wrap_content" android:layout_below="@+id/passLayout11" android:layout_centerHorizontal="true" android:layout_marginTop="49dp" android:background="@color/colorAccent" android:text="Login" android:onClick="retrofitCall" android:textColor="#FFFFFF" /> </RelativeLayout> </FrameLayout> </RelativeLayout> </layout>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

<?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">       <data>           <variable             name="userdata"             type="application.coderdna.twowaydatabingingdemo.Model.UserData"></variable>     </data>       <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent">           <FrameLayout             android:id="@+id/fragment_container"             android:layout_width="match_parent"             android:layout_height="match_parent"             android:padding="30dp">               <RelativeLayout                 android:id="@+id/login_view"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:layout_alignParentBottom="true"                 android:layout_alignParentEnd="true"                 android:layout_alignParentRight="true"                 android:layout_gravity="right">                   <android.support.design.widget.TextInputLayout                     android:id="@+id/userlayout11"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:layout_alignParentLeft="true"                     android:layout_alignParentStart="true"                     app:error="@{userdata.emailError}"                     android:layout_alignParentTop="true">                       <EditText                         android:id="@+id/username12"                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:layout_centerHorizontal="true"                         android:layout_marginTop="30dp"                         android:hint="Email"                         android:text="@={userdata.email}"                         android:inputType="textEmailAddress"                         android:singleLine="true"                         android:textColorHint="#9F9F9F" />                 </android.support.design.widget.TextInputLayout>                   <android.support.design.widget.TextInputLayout                     android:id="@+id/passLayout11"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:layout_alignParentLeft="true"                     android:layout_alignParentStart="true"                     app:error="@{userdata.passwordError}"                     android:layout_below="@+id/userlayout11">                       <EditText                         android:id="@+id/password"                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:layout_above="@+id/forgot_password"                         android:hint="Password"                         android:text="@={userdata.password}"                         android:inputType="textPassword"                         android:singleLine="true"                         android:textColorHint="#9F9F9F" />                 </android.support.design.widget.TextInputLayout>                   <Button                     android:id="@+id/login"                     android:layout_width="280dp"                     android:layout_height="wrap_content"                     android:layout_below="@+id/passLayout11"                     android:layout_centerHorizontal="true"                     android:layout_marginTop="49dp"                     android:background="@color/colorAccent"                     android:text="Login"                     android:onClick="retrofitCall"                     android:textColor="#FFFFFF" />               </RelativeLayout>         </FrameLayout>     </RelativeLayout> </layout>

 

Model- UserData.java

public class UserData extends BaseObservable { private String email; private String password; private Context context; public UserData(Context context) { this.context = context; } @Bindable public String getEmail() { if (email == null) { return ""; } return email; } public void setEmail(String email) { this.email = email; notifyPropertyChanged(BR.email); } @Bindable({"email"}) public String getEmailError() { if (getEmail().isEmpty()) { return "EMAIL IS EMPTY"; } return ""; } @Bindable public String getPassword() { if (password == null) { return ""; } return password; } public void setPassword(String password) { this.password = password; notifyPropertyChanged(BR.password); } @Bindable({"password"}) public String getPasswordError() { if (getPassword().isEmpty()) { return "PASSWORD IS EMPTY"; } else { return ""; } } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

public class UserData extends BaseObservable {     private String email;     private String password;     private Context context;       public UserData(Context context) {         this.context = context;     }       @Bindable     public String getEmail() {         if (email == null) {             return "";         }         return email;     }       public void setEmail(String email) {         this.email = email;         notifyPropertyChanged(BR.email);     }       @Bindable({"email"})     public String getEmailError() {         if (getEmail().isEmpty()) {             return "EMAIL IS EMPTY";         }         return "";     }       @Bindable     public String getPassword() {         if (password == null) {             return "";         }         return password;     }       public void setPassword(String password) {         this.password = password;         notifyPropertyChanged(BR.password);     }       @Bindable({"password"})     public String getPasswordError() {         if (getPassword().isEmpty()) {             return "PASSWORD IS EMPTY";         } else {             return "";         }     } }

MainActivity.java

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ActivityMainBinding binding = DataBindingUtil.setContentView( this, R.layout.activity_main); UserData obj = new UserData(this); obj.setEmail(""); obj.setPassword(""); binding.setUserdata(a); } }

1 2 3 4 5 6 7 8 9 10 11 12 13

public class MainActivity extends AppCompatActivity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         ActivityMainBinding binding = DataBindingUtil.setContentView(                 this, R.layout.activity_main);         UserData obj = new UserData(this);         obj.setEmail("");         obj.setPassword("");         binding.setUserdata(a);     } }

 

Thank you for reading it, maybe it will help you to understand the Two-way data binding.

Happy Coding, Stay Super and Stay Cool.