Architecture Components

Working with Observable Data Object using Data Binding

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 notifyPropertyChanged() methods which will observe the changes in name variables and address variables. They notify about any changes in it. You see I have using BR class in notifyPropertyChanged() methods. This is a class that autogenerate by data binding which contains ids of the resources used for data binding. generatedJava=>com=>wave.databindingexample(this is package name in our case) you can find here BR.java. Here we have all the resource which are used for data binding.

Add two EditText in layout file

After all this open the activity_main.xml. I have to make fews changes in 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 MainActivity. Now the changes in android:text=”@={user.name}” this name will be observed and it will notify TextView. 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.

If you have any suggestion and feedback please put it in the comment box. Thank’s for reading, Happy Coding 🙂 Our tutorials series on Android Architecture Components

Download Sample Project- Observable Data Object using Data Binding

Leave a Reply

2000