Observable Data Object refers to the capability of an object to notify others about the changes in Its data and the data binding library allows us to make objects observable. Let’s understand with the help of example what I’m talking about.
In the previous article, I have explained about data binding concept with the help of a demo. I will move forward with that demo. The previous article is here Data Binding in Android Tutorial
Working App of Observable Data Object (Sample App)
Implement BaseObservable in Data Model class
The Data Binding library provides the BaseObservable class which implements the listener registration mechanism. Now User class (from the previous demo) inherit from BaseObservable. It will be responsible for notifying when its properties changes. So to do that we will use the @Bindable annotation. To make User class Observable Let’s extended the BaseObservable class.
package com.wave.databindingexample;
import android.databinding.BaseObservable;
import android.databinding.Bindable;
/**
* Created on : Mar 16, 2019
* Author : AndroidWave
*/
public class User extends BaseObservable {
private String name;
private String address;
private String followerCount;
private String followingCount;
public User(String name, String address, String followerCount, String followingCount) {
this.name = name;
this.address = address;
this.followerCount = followerCount;
this.followingCount = followingCount;
}
@Bindable
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
notifyPropertyChanged(BR.name);
}
@Bindable
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
notifyPropertyChanged(BR.address);
}
public String getFollowerCount() {
return followerCount;
}
public void setFollowerCount(String followerCount) {
this.followerCount = followerCount;
}
public String getFollowingCount() {
return followingCount;
}
public void setFollowingCount(String followingCount) {
this.followingCount = followingCount;
}
}
I have bind getter properties using @Bindable annotation and for setter properties, we used
Add two EditText in layout file
After all, this opens the activity_main.xml. I have to make a few changes in the previous layout. Let’s add two EditText one for name that id is etName and second for address like etAddress. Now set the text using bindable object variable like android:text=”@={user.name}”
<?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.wave.databindingexample.User" />
<variable
name="handler"
type="com.wave.databindingexample.EventHandler" />
</data>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/rellay1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/grad"
android:paddingBottom="20dp">
<RelativeLayout
android:id="@+id/imgUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="@drawable/circle_border">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_margin="9dp"
android:adjustViewBounds="true"
android:background="@drawable/circle"
android:padding="3dp"
android:scaleType="centerInside"
android:src="@drawable/profile_pic" />
</RelativeLayout>
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imgUser"
android:layout_centerHorizontal="true"
android:layout_marginTop="15sp"
android:fontFamily="@font/montserrat"
android:text="@{user.name, default=Name}"
android:textColor="@color/white"
android:textSize="32sp" />
<TextView
android:id="@+id/tv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_name"
android:layout_centerHorizontal="true"
android:fontFamily="@font/montserrat"
android:text="@{user.address, default=Address}"
android:textAllCaps="true"
android:textColor="@color/address"
android:textSize="14sp" />
</RelativeLayout>
<LinearLayout
android:id="@+id/linlay1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/rellay1"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/followersBg"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/tvFollowers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/montserrat"
android:text='@{user.followerCount, default="0 K"}'
android:textColor="@color/white"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/montserrat"
android:text="followers"
android:textAllCaps="true"
android:textColor="@color/white"
android:textSize="13sp" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="@color/followingBg"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/tvfollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/montserrat"
android:text='@{user.followingCount, default="0 K"}'
android:textColor="@color/white"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/montserrat"
android:text="following"
android:textAllCaps="true"
android:textColor="@color/white"
android:textSize="13sp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<EditText
android:id="@+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/linlay1"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="16dp"
android:ems="10"
android:inputType="textPersonName"
android:text="@={user.name, default=Name}" />
<EditText
android:id="@+id/etAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etName"
android:layout_margin="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="@={user.address, default=Address}" />
<Button
android:id="@+id/btnFollow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/etAddress"
android:layout_margin="8dp"
android:background="@color/colorPrimary"
android:onClick="@{() -> handler.onButtonClick(user.name)}"
android:padding="8dp"
android:text="Follow"
android:textColor="@color/white" />
</RelativeLayout>
</layout>
We do not need any changes to MainActivity. Now the changes in android:text=”@={user.name}” this name will be observed and it will notify TextView.
Conclusion
Now let us see how it works. Just run the application, the application is up and running. So we have made name and address is observable so any change in name and address you can see the TextView automatically changes.
Download Sample Project- Observable Data Object using Data Binding
If you have any suggestions and feedback please put it in the comment box. Thank’s for reading, Happy Coding 🙂
Our tutorials series on Android Architecture Components
