live-love
live-love

Reputation: 52366

Two-Way Databinding not updating UI

I am trying to understand why setting a value does not automatically refresh the UI. If I call binding.setItem, the UI refreshes.

I know binding object contains the updated values, but the UI is not being refreshed after setting item.name and item.checked.

What am I doing wrong? Do I need to call setItem everytime to refresh the UI? I would think that this would be unnecessary, since the UI would automatically update after setting a value.

Item.java:

public class Item  {
    public String name;
    public Boolean checked;
}

MainActivity.java:

public class MainActivity extends AppCompatActivity {

    public Item item;
    ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        item = new Item();
        item.checked = true;
        item.name = "a";

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.setItem(item);
    }

    public void button_onClick(View v) {
        item.checked = !item.checked;
        item.name = item.name  + "a";
        ///binding.setItem(item); --> ??? this updates UI, do I need to call this to refresh UI everytime???
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="item"
            type="com.example.abc.twowaydatabinding.Item" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@={item.name}"
            android:textSize="20sp" />


        <Switch
            android:id="@+id/switch_test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="@={item.checked}" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="change"
            android:onClick="button_onClick"/>

    </LinearLayout>
</layout>

build.gradle:

android {
...
    dataBinding{
        enabled=true
    }

}

Upvotes: 3

Views: 4964

Answers (3)

live-love
live-love

Reputation: 52366

In order to update the UI, fields need to be Observable. Just an update with my changes:

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

public class Item extends BaseObservable {
    private String name;
    private Boolean checked;
    @Bindable
    public String getName() {
        return this.name;
    }
    @Bindable
    public Boolean getChecked() {
        return this.checked;
    }
    public void setName(String name) {
        this.name = name;
        notifyPropertyChanged(BR.name);
    }
    public void setChecked(Boolean checked) {
        this.checked = checked;
        notifyPropertyChanged(BR.checked);
    }
}

Upvotes: 1

Raghunandan
Raghunandan

Reputation: 133560

As already mentioned use ObservableFields

public ObservableField<Boolean> checked = new ObservableField<>();

public ObservableField<String> name = new ObservableField<>();

And make changes in MainActivity as

    item = new Item();
    item.checked.set(true);
    item.name.set("a");

    binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    binding.setItem(item);
}

public void button_onClick(View v) {

    item.checked.set(!(item.checked.get()));
    item.name.set(item.name.get()  + "a");

}

By the way you can look into series on blog posts on databinding https://medium.com/google-developers/android-data-binding-2-way-your-way-ccac20f6313 and this https://medium.com/@fabioCollini/android-data-binding-f9f9d3afc761

Upvotes: 3

Ben P.
Ben P.

Reputation: 54194

According to the developer guide:

Any plain old Java object (POJO) may be used for data binding, but modifying a POJO will not cause the UI to update.

You can follow the developer guide's "Observable Objects" section to allow modification of your object to update your UI.

https://developer.android.com/topic/libraries/data-binding/index.html#data_objects

Upvotes: 5

Related Questions