<p class="p1"><b><span style="color: #0000ff;">Observable Data Object</span> </b>refers to the capability of an object to notify others(listeners) about the changes in its data. The data binding library allows us to make objects, fields, or collections observable.</p>
<p class="p1">Any plain-old object can be used for data binding, but modifying the object doesn&#8217;t automatically cause the UI to update.</p>
<p class="p1"><strong><span style="color: #008000;">Data binding </span></strong>can be used to give your data objects the ability to notify other objects, known as listeners, when its data changes. When one of these observable data objects (objects, fields, collections) is bound to the UI and a property of the data object changes, the UI is updated automatically.</p>
<p class="p1">In the previous <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://c1ctech.com/android-data-binding-in-recyclerview/"><span class="s1"><b>article</b></span></a></span>, I have explained about how to work with data binding with the help of a demo. In this article, we will talk about how to make objects, fields, or collections observable using Data Binding. If you are new to DataBinding then read this <span style="color: #0000ff;"><strong><a style="color: #0000ff;" href="https://c1ctech.com/android-jetpack-data-binding/">article</a></strong>.</span></p>
<p><amp-youtube layout="responsive" width="1200" height="900" data-videoid="rruP6Wa2hq0" title="Android Working with Observable Data Objects using DataBinding"><a placeholder href="https://youtu.be/rruP6Wa2hq0"><img src="https://i.ytimg.com/vi/rruP6Wa2hq0/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Working with Observable Data Objects using DataBinding"></a></amp-youtube></p>
<p class="p1">Let’s understand each of these observables(objects, fields, or collections) with the help of example.</p>
<h3><span style="color: #000080;"><strong>Observable Fields</strong></span></h3>
<p class="p1">If your object class has fewer properties to be updated or if you don’t want to observe every field in the object, you can use <span style="color: #008000;"><b>ObservableFields</b></span> to update the UI.</p>
<p class="p1">You can declare the variable as ObservableField and when the new data is set, the UI will be updated.</p>
<p class="p1">You can use the following primitive-specific classes to make fields observable:</p>
<ul class="ul1">
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableBoolean"><span class="s2">ObservableBoolean</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableByte"><span class="s2">ObservableByte</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableChar"><span class="s2">ObservableChar</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableShort"><span class="s2">ObservableShort</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableInt"><span class="s2">ObservableInt</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableLong"><span class="s2">ObservableLong</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableFloat"><span class="s2">ObservableFloat</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableDouble"><span class="s2">ObservableDouble</span></a></span></strong></span></li>
<li class="li2"><span style="color: #0000ff;"><strong><span class="s1"><a style="color: #0000ff;" href="https://developer.android.com/reference/android/databinding/ObservableParcelable"><span class="s2">ObservableParcelable</span></a></span></strong></span></li>
</ul>
<p>Let&#8217;s understand with an example how to make fields observable.</p>
<p><strong>1</strong> .I have created a class named <span style="color: #008000;"><strong>User. </strong><span style="color: #000000;">To make the fields firstName,lastName and age observable modify it as shown below:</span></span></p>
<p><strong><span style="color: #0000ff;">User.java</span></strong></p>
<pre>package com.example.databindingexample;

import androidx.databinding.ObservableField;
import androidx.databinding.ObservableInt;

public class User{

 <span style="color: #008000;"><strong>public final ObservableField<;String>; firstName = new ObservableField<;>;();
 public final ObservableField<;String>; lastName = new ObservableField<;>;();

 public final ObservableInt age = new ObservableInt();
</strong></span>
}</pre>
<p class="p1"><strong>2</strong> .Open MainActivity.java. To test this(observable field), I am updating user data by assigning a new value to the fields on button click. You can see the UI updated on button click right away.</p>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre>package com.example.databindingexample;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
import com.example.databindingexample.databinding.ActivityMainBinding;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

public class MainActivity extends AppCompatActivity {

 ActivityMainBinding binding;
 ClickHandler handler;
 User user;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

 <span style="color: #008000;"><strong><span style="color: #008000;">user = new User();</span>
 user.firstName.set("Arun");
 user.lastName.set("Chandravanshi");
 user.age.set(28);</strong></span>
 binding.setUser(user);

 handler = new ClickHandler(binding.edtFname, binding.edtLname, binding.edtAge);
 binding.setHandler(handler);

 }

 public class ClickHandler {

 EditText edtFirstName, edtLastName, edtAge;

 public ClickHandler(EditText edtFirstName, EditText edtLastName, EditText edtAge) {
 this.edtFirstName = edtFirstName;
 this.edtLastName = edtLastName;
 this.edtAge = edtAge;
 }

 public void <span style="color: #000000;">updateUser</span>(View view) {
 <strong><span style="color: #008000;">user.firstName.set(edtFirstName.getText().toString());
 user.lastName.set(edtLastName.getText().toString());
 user.age.set(Integer.parseInt(edtAge.getText().toString()));</span></strong>

 Toast.makeText(getApplicationContext(), "Name: " + <strong><span style="color: #008000;">user.firstName.get()</span></strong> + " " + <strong><span style="color: #008000;">user.lastName.get()</span></strong> +
 "\nAge: " + <strong><span style="color: #008000;">user.age.get()</span></strong>, Toast.LENGTH_LONG).show();
 }

 }
}</pre>
<p>To set a value inside the field use the <strong><span class="s1" style="color: #008000;">set() </span></strong>and to get the value use <span class="s1"><strong><span style="color: #008000;">get()</span></strong> of the <strong><span style="color: #008000;">ObservableField</span></strong> class</span>.</p>
<p>The ObservableField class consists of set() which internally calls <span style="color: #0000ff;"><strong>notifyChange()</strong></span> (notifies listeners that the value of this property has changed and now the UI will be updated with the new values).</p>
<p><strong>3</strong> .The activity.xml file consists of a button on click of which we are updating fields(firstName, lastName, age) with the EditText values.</p>
<p>To access the observable fields inside views we have to write:</p>
<pre><strong><span style="color: #008000;">android:text="@{user.firstName}"</span></strong></pre>
<p>Where <strong><span style="color: #008000;">firstName</span></strong> is the User object property name.</p>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<pre><;?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"
 xmlns:tools="http://schemas.android.com/tools">;

 <;data>;

 <strong><span style="color: #008000;"> <;variable
 name="user"
 type="com.example.databindingexample.User" />;

 <;variable
 name="handler"
 type="com.example.databindingexample.MainActivity.ClickHandler" />;</span></strong>

 <;/data>;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_margin="30dp"
 android:orientation="vertical"
 tools:context=".MainActivity">;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="15dp"
 android:background="@drawable/background">;

 <;TextView
 android:id="@+id/tv_firstName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="20sp"
 android:layout_marginTop="10dp"
 <strong><span style="color: #008000;">android:text="@{user.firstName}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"/>;

 <;TextView
 android:id="@+id/tv_lastName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="10dp"
 android:textSize="20sp"
 <strong><span style="color: #008000;">android:text="@{user.lastName}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;

 <;TextView
 android:id="@+id/tv_age"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="20sp"
 android:layout_marginTop="10dp"
 <strong><span style="color: #008000;">android:text="@{String.valueOf(user.age)}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"/>;

 <;/LinearLayout>;

 <;EditText
 android:id="@+id/edt_fname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="40dp"
 android:textSize="22sp"
 android:hint="Enter First Name"
 />;

 <;EditText
 android:id="@+id/edt_lname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="22sp"
 android:hint="Enter Last Name"
 />;

 <;EditText
 android:id="@+id/edt_age"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="22sp"
 android:hint="Enter Age"
 />;

 <;Button
 android:id="@+id/btn_update"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 <strong><span style="color: #008000;">android:onClick="@{handler::updateUser}"</span></strong>
 android:layout_gravity="center"
 android:textSize="15sp"
 android:background="@drawable/background"
 android:layout_marginTop="30dp"
 android:padding="18dp"
 android:text="UPDATE USER"
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;

<;/layout>;</pre>
<p class="p1">When you run the code It will look like this:</p>
<p><img class="alignnone wp-image-1588" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582537116.png" alt="Screenshot_1582537116" width="328" height="583" /> <img class="alignnone wp-image-1589" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582537370.png" alt="Screenshot_1582537370" width="328" height="583" /></p>
<h3></h3>
<h3><span style="color: #000080;"><strong>Observable Collections</strong></span></h3>
<p>A Collection is a group of individual objects represented as a single unit. DataBinding provides two Observable Collection classes:</p>
<p><strong><span style="color: #0000ff;">ObservableArrayList</span></strong>: class which extends <strong><span style="color: #008000;">ArrayList</span></strong><;>; and is useful when the key is an integer.</p>
<p><strong><span style="color: #0000ff;">ObservableArrayMap</span></strong>: class which extends <strong><span style="color: #008000;">ArrayMap</span></strong><;K, V>; and is useful when the key is a reference type, such as <strong><span class="s1" style="color: #008000;">String</span></strong>,</p>
<p>Let&#8217;s understand with an example how to make Collections observable.</p>
<h4><span style="color: #000080;"><strong>ObservableArrayList</strong></span></h4>
<p><strong>1</strong> .Inside MainActivity.java, I have created an <strong><span style="color: #008000;">ObservableArrayList</span></strong> named <strong><span style="color: #008000;">list</span></strong> which holds String data. To test this( ObservableArrayList), I am updating list by setting new values at particular keys on button click. You can see the UI updated on button click right away.</p>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre>package com.example.databindingexample;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import com.example.databindingexample.databinding.ActivityMainBinding;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.databinding.ObservableArrayList;

public class MainActivity extends AppCompatActivity {

 ActivityMainBinding binding;
 ClickHandler handler;
 <strong><span style="color: #008000;">ObservableArrayList<;String>; list;</span></strong>

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

 <span style="color: #008000;"><strong>list = new ObservableArrayList<;>;();
 list.add("Arun");
 list.add("Chandravanshi");
 binding.setUserlist(list);</strong></span>

 handler = new ClickHandler(binding.edtFname, binding.edtLname);
 binding.setHandler(handler);

 }

 public class ClickHandler {

 EditText edtFirstName, edtLastName;

 public ClickHandler(EditText edtFirstName, EditText edtLastName) {
 this.edtFirstName = edtFirstName;
 this.edtLastName = edtLastName;
 }

 public void updateName(View view) {
 <strong><span style="color: #008000;">list.add(0, edtFirstName.getText().toString());
 list.add(1, edtLastName.getText().toString());
</span></strong>
 }
 }
}</pre>
<p>The ObservableArrayList<;>; class consists of <strong><span style="color: #008000;">add()</span></strong> which internally calls <span style="color: #008000;"><strong><span style="color: #0000ff;">notifyAdd()</span>.</strong></span> <strong><span style="color: #008000;">notifyAdd</span></strong> method causes the UI to be updated with the new value.</p>
<p><strong>2</strong> .In activity_main.xml inside <strong><span style="color: #008000;"><;data>;</span></strong> tag we will define a variable named <span style="color: #008000;"><strong>userlist</strong></span> pointing to <strong><span style="color: #008000;">ObservableArrayList</span></strong> class object.</p>
<p>To access list data inside views we have to write like this:</p>
<pre><strong><span style="color: #008000;">android:text="@{userlist[0]}"</span></strong></pre>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<pre><;?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"
 xmlns:tools="http://schemas.android.com/tools">;
 
 <;data>;
 <strong><span style="color: #008000;"> <;import type="androidx.databinding.ObservableArrayList"/>;

 <;variable
 name="userlist"
 type="ObservableArrayList&;lt;String>;" />;
</span></strong>
 <;variable
 name="handler"
 type="com.example.databindingexample.MainActivity.ClickHandler" />;
 <;/data>;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_margin="30dp"
 android:orientation="vertical"
 tools:context=".MainActivity">;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="35dp"
 android:background="@drawable/background">;

 <;TextView
 android:id="@+id/tv_firstName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="30sp"
 android:layout_marginTop="10dp"
 <strong><span style="color: #008000;">android:text="@{userlist[0]}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"/>;

 <;TextView
 android:id="@+id/tv_lastName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="30sp"
 <strong><span style="color: #008000;">android:text="@{userlist[1]}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;


 <;EditText
 android:id="@+id/edt_fname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="60dp"
 android:textSize="22sp"
 android:hint="Enter First Name"
 />;

 <;EditText
 android:id="@+id/edt_lname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="22sp"
 android:hint="Enter Last Name"
 />;

 <;Button
 android:id="@+id/btn_update"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 <strong><span style="color: #008000;">android:onClick="@{handler::updateName}"</span></strong>
 android:layout_gravity="center"
 android:textSize="15sp"
 android:background="@drawable/background"
 android:layout_marginTop="30dp"
 android:padding="18dp"
 android:text="UPDATE NAME"
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;

<;/layout>;</pre>
<h4><span style="color: #000080;"><strong>ObservableArrayMap</strong></span></h4>
<p><strong>1</strong> .Inside MainActivity.java, I have created an <strong><span style="color: #008000;">ObservableArrayMap</span></strong> named <strong><span style="color: #008000;">list</span></strong> with key of type <span style="color: #008000;"><strong>String</strong></span> and which holds <strong><span style="color: #008000;">String</span></strong> data. To test this( ObservableArrayMap), I am updating list by setting new values at particular keys on button click. You can see the UI updated on button click right away.</p>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre>package com.example.databindingexample;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import com.example.databindingexample.databinding.ActivityMainBinding;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.databinding.ObservableArrayMap;

public class MainActivity extends AppCompatActivity {

 ActivityMainBinding binding;
 ClickHandler handler;
 <strong><span style="color: #008000;"> ObservableArrayMap<;String, String>; list;</span></strong>

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

 <strong><span style="color: #008000;">list = new ObservableArrayMap<;>;();
 list.put("firstName", "Arun");
 list.put("lastName", "Chandravanshi");
 binding.setUserlist(list);</span></strong>

 handler = new ClickHandler(binding.edtFname, binding.edtLname);
 binding.setHandler(handler);

 }

 public class ClickHandler {

 EditText edtFirstName, edtLastName;

 public ClickHandler(EditText edtFirstName, EditText edtLastName) {
 this.edtFirstName = edtFirstName;
 this.edtLastName = edtLastName;
 }

 public void updateName(View view) {
 <strong><span style="color: #008000;">list.put("firstName", edtFirstName.getText().toString());
 list.put("lastName", edtLastName.getText().toString());</span></strong>
 
 }

 }
}</pre>
<p>The <strong><span style="color: #008000;">ObservableArrayMap</span></strong><;K, V>; class consists of <strong><span style="color: #0000ff;">put()</span></strong> which internally calls notifyChange(K) (notifies listeners that the value of this key has changed and now the UI will be updated with the new value).</p>
<p><strong>2</strong> .In activity_main.xml inside <strong><span style="color: #008000;"><;data>;</span></strong> tag we will define a variable named <span style="color: #008000;"><strong>userlist</strong></span> pointing to <strong><span style="color: #008000;">ObservableArrayMap</span></strong> class object.</p>
<p>To access list data inside views we have to write like this:</p>
<pre><strong><span style="color: #008000;">android:text="@{userlist.firstName}"</span></strong></pre>
<p>where <strong><span style="color: #008000;">firstName</span></strong> is the key name.</p>
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p>
<pre><;?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"
 xmlns:tools="http://schemas.android.com/tools">;

 <;data>;
 <strong><span style="color: #008000;"><;import type="androidx.databinding.ObservableArrayMap"/>;

 <;variable
 name="userlist"
 type="ObservableArrayMap&;lt;String,String>;" />;</span></strong>

 <;variable
 name="handler"
 type="com.example.databindingexample.MainActivity.ClickHandler" />;
 <;/data>;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_margin="30dp"
 android:orientation="vertical"
 tools:context=".MainActivity">;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="35dp"
 android:background="@drawable/background">;

 <;TextView
 android:id="@+id/tv_firstName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="30sp"
 android:layout_marginTop="10dp"
 <strong><span style="color: #008000;">android:text="@{userlist.firstName}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"/>;

 <;TextView
 android:id="@+id/tv_lastName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="30sp"
 <strong><span style="color: #008000;">android:text="@{userlist.lastName}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;


 <;EditText
 android:id="@+id/edt_fname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="60dp"
 android:textSize="22sp"
 android:hint="Enter First Name"
 />;

 <;EditText
 android:id="@+id/edt_lname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="22sp"
 android:hint="Enter Last Name"
 />;

 <;Button
 android:id="@+id/btn_update"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 <strong><span style="color: #008000;">android:onClick="@{handler::updateName}"</span></strong>
 android:layout_gravity="center"
 android:textSize="15sp"
 android:background="@drawable/background"
 android:layout_marginTop="30dp"
 android:padding="18dp"
 android:text="UPDATE NAME"
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;

<;/layout>;</pre>
<p>When you run the code for both <strong><span style="color: #008000;">ObservableArrayList</span></strong> and <strong><span style="color: #008000;">ObservableArrayMap</span></strong> it will look like this:</p>
<h3><img class="alignnone wp-image-1586" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582534216.png" alt="Screenshot_1582534216" width="319" height="567" /> <img class="alignnone wp-image-1587" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582534224.png" alt="Screenshot_1582534224" width="319" height="567" /></h3>
<h3></h3>
<h3><span style="color: #000080;"><strong>Observable Objects</strong></span></h3>
<p class="p1">The Data Binding library provides the <span style="color: #000000;">BaseObservable</span> class which implements the listener registration mechanism. To make the object observable, extend the class from <span style="color: #008000;"><b>BaseObservable</b></span>.</p>
<ul class="ul1">
<li class="li1">To make a property observable, use <span style="color: #008000;"><b>@Bindable</b></span> annotation on getter method.</li>
<li class="li1">Call <span style="color: #008000;"><b>notifyPropertyChanged(BR.property)</b></span> in setter method to update the UI whenever the data is changed.</li>
<li class="li1">The <span style="color: #008000;"><b>BR</b></span> class will be generated automatically when data binding is enabled.</li>
</ul>
<p>Let&#8217;s understand with an example how to make <strong><span style="color: #008000;">Object</span></strong> observable.</p>
<p class="p1"><strong>1</strong> .Below is the modified <span style="color: #008000;"><b>User</b></span> class that extends <span style="color: #008000;"><b>BaseObservable</b></span>. You can notice here <span style="color: #008000;"><b>notifyPropertyChanged()</b></span> is called after assigning new values.</p>
<p><strong><span style="color: #0000ff;">User.java</span></strong></p>
<pre>package com.example.databindingexample;

import androidx.databinding.BaseObservable;
import androidx.databinding.Bindable;

public class User extends <strong><span style="color: #008000;">BaseObservable</span></strong> {

 public String firstName, lastName;

 <strong><span style="color: #008000;">@Bindable</span></strong>
 public String getFirstName() {
 return firstName;
 }

 public void setFirstName(String firstName) {
 this.firstName = firstName;
 <strong><span style="color: #008000;">notifyPropertyChanged(BR.firstName);</span></strong>
 }

 <strong><span style="color: #008000;"> @Bindable</span></strong>
 public String getLastName() {
 return lastName;
 }

 public void setLastName(String lastName) {
 this.lastName = lastName;
 <strong><span style="color: #008000;">notifyPropertyChanged(BR.lastName);</span></strong>
 }

}</pre>
<p class="p1">We must specify the getter method of the specific field with the <strong><span style="color: #008000;">@Bindable</span></strong> annotation to generate the specific field inside <strong><span style="color: #008000;">BR</span></strong> class which we will pass from the <strong><span style="color: #008000;">notifyPropertyChanged()</span> </strong>inside the setter method.</p>
<p class="p1"><strong>2</strong> .The generated BR class for the app is shown below:</p>
<p><strong><span style="color: #0000ff;">BR.java</span></strong></p>
<pre>package com.example.databindingexample;

public class BR {
 
 <strong><span style="color: #008000;">public static final int _all = 0;</span></strong>

<strong><span style="color: #008000;"> public static final int firstName = 1;</span></strong>

<strong><span style="color: #008000;"> public static final int lastName = 2;</span></strong>

<strong><span style="color: #008000;"> public static final int handler = 3;</span></strong>

<strong><span style="color: #008000;"> public static final int user = 4;</span></strong>

}</pre>
<p class="p1">BR class also consists of variable names defined inside the <span style="color: #008000;"><strong>activity_main.xml</strong></span> file.</p>
<p class="p1"><span style="color: #000000;"><strong>3</strong></span> .Inside activity_main.xml file, I have defined two variables with name user (a reference for User class object) and handler(a reference for ClickHandler class object) inside <span style="color: #008000;"><strong><;data>;</strong></span> tag:</p>
<p>To access the object property inside views we have to simply write :</p>
<pre><span style="color: #008000;"><strong>android:text="@{user.firstName}"</strong></span></pre>
<p>Wher <strong><span style="color: #008000;">firstName</span></strong> is the User object property name.</p>
<p><span style="color: #0000ff;"><strong>activity_main.xml</strong></span></p>
<pre><;?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"
 xmlns:tools="http://schemas.android.com/tools">;

 <;data>;
 <;<strong><span style="color: #008000;">variable
 name="user"
 type="com.example.databindingexample.User" />;

 <;variable
 name="handler"
 type="com.example.databindingexample.MainActivity.ClickHandler" />;</span></strong>
 <;/data>;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_margin="30dp"
 android:orientation="vertical"
 tools:context=".MainActivity">;

 <;LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="35dp"
 android:background="@drawable/background">;

 <;TextView
 android:id="@+id/tv_firstName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="30sp"
 android:layout_marginTop="10dp"
 <span style="color: #008000;"><strong>android:text="@{user.firstName}"</strong></span>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"/>;

 <;TextView
 android:id="@+id/tv_lastName"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="30sp"
 <strong><span style="color: #008000;">android:text="@{user.lastName}"</span></strong>
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;
 <;EditText
 android:id="@+id/edt_fname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="60dp"
 android:textSize="22sp"
 android:hint="Enter First Name"
 />;

 <;EditText
 android:id="@+id/edt_lname"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:textSize="22sp"
 android:hint="Enter Last Name"
 />;

 <;Button
 android:id="@+id/btn_update"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 <strong><span style="color: #008000;">android:onClick="@{handler::updateName}"</span></strong>
 android:layout_gravity="center"
 android:textSize="15sp"
 android:background="@drawable/background"
 android:layout_marginTop="30dp"
 android:padding="18dp"
 android:text="UPDATE NAME"
 android:textColor="@android:color/holo_blue_dark"
 android:textStyle="bold"
 />;
 <;/LinearLayout>;
 
<;/layout>;</pre>
<p class="p1"><strong>4</strong> .Open MainActivity.java. To test this(observable object), I am changing user object properties on button click. You can see the UI updated on button(UPDATE NAME) click right away.</p>
<p><strong><span style="color: #0000ff;">MainActivity.java</span></strong></p>
<pre>package com.example.databindingexample;

import android.os.Bundle;
import android.view.View;
import android.widget.EditText;

import com.example.databindingexample.databinding.ActivityMainBinding;

import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;

public class MainActivity extends AppCompatActivity {

 ActivityMainBinding binding;
 <strong><span style="color: #008000;">User user;</span></strong>
 ClickHandler handler;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
 <strong><span style="color: #008000;">user = new User();
 user.setFirstName("Arun");
 user.setLastName("Chandravanshi");
 binding.setUser(user);
</span></strong>
 handler = new ClickHandler(binding.edtFname,binding.edtLname);
 binding.setHandler(handler);

 }

 public class ClickHandler {

 EditText edtFirstName, edtLastName;

 public ClickHandler(EditText edtFirstName, EditText edtLastName) {
 this.edtFirstName = edtFirstName;
 this.edtLastName = edtLastName;
 }

 public void updateName(View view) {

 <span style="color: #008000;"><strong> user.setFirstName(edtFirstName.getText().toString());
 user.setLastName(edtLastName.getText().toString());</strong></span>
 }

 }
}</pre>
<p class="p1">When you run the app It will look like this:</p>
<p><img class="alignnone wp-image-1584" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582370409.png" alt="Screenshot_1582370409" width="320" height="569" /> <img class="alignnone wp-image-1585" src="https://c1ctech.com/wp-content/uploads/2020/02/Screenshot_1582370469.png" alt="Screenshot_1582370469" width="320" height="569" /></p>
<p>I hope this article will help you in understanding how to work with Observable data objects using DataBinding.