Android Gig
  • Home
  • Tips

Home Android / DataBinding Two-way DataBinding in Android

Two-way DataBinding in Android

In the earlier posts we have seen how to use DataBinding, Setting custom font and Image loading. Today we will discuss about two-way DataBinding.

What is Two-way DataBinding?

Till now we have seen how to set values to xml view, but in controls like EditText we need to fetch value. In simple term two-way DataBinding is setting values to that control and fetching it after having some changes.

ObservableField

ObservableField can be used instead of extending BaseObservable class. ObservableFields are self-contained observable objects that have a single field.

1
2
3
4
5
6
7
public class User
{
    public final ObservableField<String> userName =
            new ObservableField<>();
    public final ObservableField<String> password =
            new ObservableField<>();
}

There is no need to create getter setter methods when we are using ObservableFields. Now attach custom TextWatcher to get values of EditText control.

1
2
public TextWatcherAdapter userNameWatcher = new TextWatcherAdapter(userName);
public TextWatcherAdapter passwordWatcher = new TextWatcherAdapter(password);

TextWatcherAdapter is custom class which extends TextWatcher. It will be used to fetch updated value of EditText.

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
public class TextWatcherAdapter implements TextWatcher {
 
    public final ObservableField<String> value =
            new ObservableField<>();
    private final ObservableField<String> field;
 
    private boolean isInEditMode = false;
 
    public TextWatcherAdapter(ObservableField<String> f) {
        this.field = f;
 
        field.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback(){
            @Override
            public void onPropertyChanged(Observable sender, int propertyId) {
                if (isInEditMode){
                    return;
                }
                value.set(field.get());
            }
        });
    }
 
    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        //
    }
 
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {
        //
    }
 
    @Override public void afterTextChanged(Editable s) {
        if (!Objects.equals(field.get(), s.toString())) {
            isInEditMode = true;
            field.set(s.toString());
            isInEditMode = false;
        }
    }
}

Layout file is very simple for this, with 2 EditTexts and a button. We need to set addTextChangeListener to bind custom TextWatcher with EditText.

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
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
 
    <data>
        <variable
            name="user"
            type="com.androidgig.logindemo.Model.User"></variable>
        <variable
            name="handler"
            type="com.androidgig.logindemo.Handler.ClickHandler"></variable>
    </data>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:padding="20dp"
        android:orientation="vertical">
 
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User name"
            android:singleLine="true"
            android:imeOptions="actionNext"
            android:addTextChangedListener="@{user.userNameWatcher}"/>
 
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword"
            android:singleLine="true"
            android:imeOptions="actionDone"
            android:layout_marginTop="10dp"
            android:addTextChangedListener="@{user.passwordWatcher}"/>
 
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Login"
            android:layout_marginTop="20dp"
            android:onClick="@{handler.onClickLogin}"/>
 
    </LinearLayout>
</layout>

Here you have noticed handler.onClickLogin in a Button, that is nothing but an interface which we have binded to Button.

1
2
3
public interface ClickHandler {
    void onClickLogin(View view);
}

Finally we will write our Activity code to perform all the actions. Binding will be same as we have done earlier.

1
2
3
4
5
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ActivityMainBinding binding= DataBindingUtil.setContentView(this, R.layout.activity_main);
}

we need to set Model/Pojo class to view and set handler for onClick event. Here is full code of our MainActivity.

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
public class MainActivity extends AppCompatActivity implements ClickHandler {
    ActivityMainBinding binding;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding= DataBindingUtil.setContentView(this, R.layout.activity_main);
 
        binding.setUser(new User());
        binding.setHandler(this);
    }
 
    @Override
    public void onClickLogin(View view) {
        User user=binding.getUser();
        if(validate(user))
        {
            Toast.makeText(MainActivity.this,"Hello " + user.userName.get() + " your password is : " + user.password.get(),Toast.LENGTH_SHORT).show();
        }
    }
    private boolean validate(User user)
    {
        if(user.userName.get() == null || user.userName.get().trim().length()<=0)
        {
            Toast.makeText(MainActivity.this,"Please enter username.",Toast.LENGTH_SHORT).show();
            return false;
        }
        else if(user.password.get() == null || user.password.get().trim().length()<=0)
        {
            Toast.makeText(MainActivity.this,"Please enter password.",Toast.LENGTH_SHORT).show();
            return false;
        }
        return true;
    }
}

With this you are done with your simple login screen using DataBinding.

two-way databinding

Download code

Update :

With the latest update of DataBinding announced in Google I/O16, you will be able to use Two-Way DataBinding with minimal number of code. You don’t need to write those listeners. Here is the thing you need to change in your xml file.

1
android:text="@={user.name}"

By adding = sign in your expression will support Two-Way DataBinding.

  • Author
  • Recent Posts
Ravi Rupareliya
Follow me

Ravi Rupareliya

He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.
Ravi Rupareliya
Follow me

Latest posts by Ravi Rupareliya (see all)

  • Dialogflow Entities With Actions on Google - May 7, 2020
  • Actions on Google Using Cloud Functions - February 3, 2020
  • Create WhatsApp Stickers Android Application - April 19, 2019

Ravi Rupareliya April 6, 2016

Android / android-databinding / databinding / login with databinding / two-way databinding /

Image Loading With DataBinding in Android
Live Templates in Android Studio



Subscribe to Android Gig

Enter your email address to subscribe to this blog and receive notifications of new posts by email.


Recent Posts

  • Dialogflow Entities With Actions on Google
  • Actions on Google Using Cloud Functions
  • Create WhatsApp Stickers Android Application
  • React Native – Introduction
  • Firebase Realtime Database In Android

Most Popular

  • Inbox Style Notification Like Whatsapp
  • Working with Data Binding Android
  • Part of TextView clickable
  • Setting custom font through XML with DataBinding
  • Two-way DataBinding in Android
  • Image Loading With DataBinding in Android
  • Tip : Underlining text in TextView
  • addHeaderView in RecyclerView
  • RecyclerView With Android DataBinding
  • AutoCompleteTextView in Android

Tags

actions-on-google alertdialog Android android-databinding android-n android-n-leak android m android notification Android studio authentication AutoCompleteTextView ClickableSpan ClickListener customfont databinding EditText EventBus firebase FloatingActionButton Floating Labels fontdatabinding gcm imageloader inbox style notification live templates login with databinding marshmallow Material Design notification permissions picasso RecyclerView remote config runtime permissions setadapter SpannableString TextInputLayout TextView tips two-way databinding underline-textview whatsapp gmail type notification Youtube Youtube API Youtube integration



© Android Gig