Two-way data binding in android

Aman Gupta

7 July 2017

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.