Data Binding Library In Android

Introduction

 

If you make a layout into a declarative layout with the data binding you can avoid the expensive call findViewById(). Suppose you want to create a calculator application, then you have to place a number of buttons in the layout file for representing the digits and the operator.

 

That means you have to make a number of calls to findViewById() from the class file. If you convert that layout into a declarative layout with data binding then you can avoid the number of calls to findViewById. And also the data binding makes your layout more flexible.

 

In this article, I am going to create a simple Android application that demonstrates how to add the data binding library to your Android application and how to convert a layout into the declarative layout with data binding.

 

First, create your Android application as usual and add the data binding library into the Android studio project. This is already included with the Android SDK and we just need to enable data binding. For this open the module level Gradle file and add the following lines to the file.

dataBinding {
    enabled true
}

And click on the Sync Now button to add necessary libraries into your project.

 

Now, create a bean class that is going to be used in the layout file.

public class Student {
    private String firstName;
    private String lastName;
    public Student(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    public String getFirstName() {
        return firstName;
    }
    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }
    public String getLastName() {
        return lastName;
    }
    public void setLastName(String lastName) {
        this.lastName = lastName;
    }
}

Now, I am going to make the layout file a declarative layout by adding the layout tag. And now out layout's root element would be layout tag like this.

<?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">

Now, we can pass any object from the Java class to the layout file by using the data tag. Inside data tag, we can declare our variables. Normally variables would have two attributes, they are name and type. The name can be any name that you want to use in the layout and type would be the Java class. So, here I am declaring the student class.

<data>
    <variable name="student" type="com.example.pranavjdev.databindingsample.Student" />
</data>

And in the layout I have created two text views and want to show the first and last name respsctively to each text view. For that we can use the variable name which we declared inside the variable and we can access the first name and last name respectively. 

android:text="@{student.firstName}"

Now our entire layout will look like the following

<?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>
        <variable name="student" type="com.example.pranavjdev.databindingsample.Student" />
    </data>
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity">
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_gravity="center_horizontal" android:text="@{student.firstName}" />
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_gravity="center_horizontal" android:text="@{student.lastName}" />
    </LinearLayout>
</layout>

Now go to the Java class and remove the setContentView() for it and initialize the binding variable for the mainactivity. Normally the name of the binding class would be layoutfinename+Binding. Here the layout name is activity_main and hence the binding class name would be like AcivityMainBinding(activity_main.xml). Create an object for the binding class and load the layout in onCreate by using the following codes.

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

Now, we have got an object named binding, with the help of this binding we can access all the components of the layout file and also we the compiler would create getter and setter for all of its varibale. So we can pass the Student object by calling binding.setStudent();

Student student = new Student("pranav","JDev");
binding.setStudent(student);

So, the on create will look like;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
    Student student = new Student("pranav", "JDev");
    binding.setStudent(student);
}

And the output will look like,

 

 

 

Happy coding. Cheers...