Data Binding in Android – Using Observables (BaseObservable) to Update UI automatically

In the last example, you may have got an idea of what DataBinding is.

If not please check my tutorial here…

Updating Objects using Observables.

In the last tutorial you may have noticed, if you update the object which is data binded, the change is not reflected in the UI right. Our requirement is whenever we change the object, I want to update the UI as well.

Our issue in the last post..

 binding.b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                user.setFirstName("New Name");
                user.setLastName("New Last Name");
            }
        });

Here I am trying to update the user object which was actually databinded, it is not reflected in the UI.

So what do we do.

Solution

The solution is to extend the User Class with BaseObservable.

So our new User class will look like this.

package binding_demo.coderzheaven.com.bindingdemo;

import android.databinding.BaseObservable;
import android.databinding.Bindable;

public class User extends BaseObservable{

    public String firstName;
    public String lastName;

    public void setLastName(String lastName) {
        this.lastName = lastName;
        notifyPropertyChanged(BR.lastName);
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
        notifyPropertyChanged(BR.firstName);
    }

    @Bindable
    public String getFirstName() {
        return firstName;
    }

    @Bindable
    public String getLastName() {
        return lastName;
    }

    public User(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

}

Here observe that we have all the getters with @Bindable notation on top of it. In this way we are telling the DataBinder that whenever this object is changed, update the UI as well. So we need to change the setter to notify this change like below.

   notifyPropertyChanged(BR.firstName);

BR is automatically generated for you. Either you can specify the whole package name before it or Just BR.

Now Try again with the button Click Listener, When the Object is updated, the UI is updated as well.
No More extra setText needed to update the UI.

Here is the complete Activity Class.

MainActivity


package binding_demo.coderzheaven.com.bindingdemo;

import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import binding_demo.coderzheaven.com.bindingdemo.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    User user;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActivityMainBinding binding = DataBindingUtil.
                setContentView(this, R.layout.activity_main);
        user = new User("Coderz", "Heaven");
        binding.setUser(user);

        binding.b1.setText("Click Me");
        binding.b1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                user.setFirstName("New Name");
                user.setLastName("New Last Name");
            }
        });
    }

}

Please try a Clean & Build if you are facing any issues

Source Code

You can find the full source code in my GitHub repository.

Get the source code.

Leave a Reply Cancel reply