In simple terms, the View is tied to a Model. When the data in the Model changes it is automatically reflected in the View or vice versa. In Android the View is XML layout and Model is a POJO class.

Here I have created a Android Studio project with package com.learn2crack.databinding also Activity as MainActivity and layout as activity_main.

You can download the complete project as zip or fork from our Github repository.

To enable Data Binding for your app you need to add a snippet to your app’s build.gradle

dataBinding {
    enabled = true
}

This snippet should be inside android block.

Note : Make sure you have downloaded the Android Support Repository from SDK Manager.

Lets create a POJO class which has two fields name and email. Generate getters and setters. Our model class extends BaseObservable. This BaseObservable implements Observable interface. By extending from BaseObservable class it is easy to listen for update when the value in the fields change. In this example I need to listen for changes in email field. So I add @Bindable annotation to the getter for email. And in the setter I call notifyPropertyChanged(BR.email). Where BR is auto generated class and email is field name.

package com.learn2crack.databinding;

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

public class User extends BaseObservable {

    private String name;
    private String email;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Bindable
    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
        notifyPropertyChanged(com.learn2crack.databinding.BR.email);
    }
}

The layout for Data Binding would be slightly different when compared to traditional one. The root element for the layout is <layout>. Then the Model is referred in <variable> element inside root <data> element. And for binding data the format should be similar to @ followed by field name in braces { }. For example take this line from the name TextView

android:text="@{user.name}"

where user refers to the model and name is the String field in that model. When this name field in the model is updated it will be reflected in the View. Similarly for EditText take this line,

android:text="@={user.email}"

where the additional = is for two way binding. ie The values changed in EditText is reflected back in the model.

And in the Button take this line,

android:onClick="@{()->activity.onButtonClick(user.email)}"

where activity variable denotes our MainActivity. The onButtonClick() is a method in our Activity which takes String as parameter. When the button is pressed the email String is passed from the model and the method is called. The -> operator shows this is a lambda expression.

<?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.learn2crack.databinding.User"/>
        <variable name="activity" type="com.learn2crack.databinding.MainActivity"/>
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:gravity="center"
        tools:context=".databinding.MainActivity">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:textSize="18sp"
            android:text="@{user.name}"/>

        <EditText
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_below="@+id/name"
            android:inputType="textEmailAddress"
            android:text="@={user.email}"/>

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_below="@+id/email"
            android:text="Get data"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white"
            android:onClick="@{()->activity.onButtonClick(user.email)}"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_below="@id/button"
            android:layout_centerHorizontal="true"
            android:textSize="16sp"
            android:text="@{user.email}"/>

    </RelativeLayout>
</layout>

Here we create a ActivityMainBinding object which is auto generated according to the layout name. Since the layout name is activity_main it is ActivityMainBinding. It is initialized as,

ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

Then we create a new User object and set name. This model is then tied to the view using the binding.setUser() method. Similarly the Actvity using setActivity() method. Since we are using two way binding for email field we can get the value using the getter binding.getUser().getEmail().

package com.learn2crack.databinding;

import android.databinding.DataBindingUtil;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;

import com.learn2crack.databinding.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {
    public static final String TAG =MainActivity.class.getSimpleName();

    private ActivityMainBinding binding;

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

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        User user = new User();
        user.setName("Learn2Crack");
        binding.setUser(user);
        binding.setActivity(this);
    }

    public void onButtonClick(String email){

        Log.d(TAG, "Email :" +binding.getUser().getEmail());
        Log.d(TAG, "Email : "+email);
        Toast.makeText(this,email,Toast.LENGTH_SHORT).show();
    }
}

Data Binding in Android has huge potential. We will go deep into this topic in future articles.

Enjoy Coding 🙂