Data Binding in Android

My career started as a UI developer at Divami and it’s been a year. In the meantime, I’ve learned technologies like Angular, Android, and Flutter. When I had to move to Android development, it was a bit difficult for me.  I found data management in Android, especially difficult. Maintaining the views and manipulating data was a bit complex. And then I heard about the data binding concept which helps us to keep track of our data. It made things simpler!!!

What is data binding in android?

Data binding is the process that establishes a connection between the app UI and the data it displays. Suppose the binding has the correct settings, and the data provide the proper notifications. In that case, when the data changes its value, the elements that are bound to the data reflect changes automatically.

In a regular Android app, it is necessary to find the view and update the content. Every time data changes, the User Interface widget (TextView, ImageView, etc.) is bound to it and needs to be updated. Lots of hours will be wasted on writing and maintaining trivial and almost useless code occupying tens or even hundreds of lines in nearly all Activity. With DataBinding, comes many excellent features, but the most important thing you get is the elimination of findViewById().

Let us try an example with and without data binding. In the example, all we have to do is to update a text view as Edit text gets updated.

Without using data binding( findViewById ):

findViewById() takes the Id of the view specified in the .xml file and returns the view. findViewById() method returns only the View, but it does not tell which view is returned i.e., whether the view is Button, TextView, EditText, etc. Therefore, you need to typecast the view returned by this method.

In the .xml file we’ll specify the Id of the view as,

Get the view using findViewById() :

To get the EditText value on change, we’ll add a listener to the view:

The activity_main.xml file:

The MainActivity.java file is:

As we can see here, there’s a lot of work for the developer to get all the views by creating variables for all of them. And, whenever we try to fetch a view by using its Id, it will return the reference of the view if the specified Id exists, and if no Id is found, it will simply return null. It is difficult to maintain things with findViewById(). So, here comes the Data binding concept for easier maintenance of the views and information.

Using data binding:

To use data-binding in your application, the following changes are required.

Changes in Gradle 

There is no need to add any library for using data binding, just enabling data binding to true inside android tag is sufficient. The Data Binding Library is available for Android platforms from Android 2.1 (API 7) and newer.

Changes in activity_main.xml:

The simplest change in XML is adding a layout tag on top of all.

When you define layout tag, it conveys special meaning to the compiler that data binding is used in this XML. So it creates a new separate class to handle the data binding, and the name of the class is the same name of your XML in a camel-case appended with the Binding at the end. So if your XML name is activity_main, then it generates the class with the name ActivityMainBinding.

Add variable and data tags:

The data variable within the data block describes a property that can now be used within this layout. Next, we can now reference this object inside of our views using @{data.field}.

In MainActivity.java :

Create an instance of data class to access the name:

And, instead of this,

You have to add this

Where do setData come from?

The name given in the variable in the layout file is data, so the ActivityMainBinding class created the setData function. Suppose if you have the name as ‘item’, then you will have the ‘setItem’ method.

Now, if you have a text view in your XML with the id textView, then all you need to do in your activity class is just to call binding.textView.

What if I need to set a text watcher?

Make a single modification that is change @{} to @={}. That’s it!!

What it does is when the user types a value in the edit text, it sets the value back to the model class object. So when you want to retrieve the value, just call that object. This mechanism is called the Two-way data binding.

Data model class ( Data.java ):

Data should be observable to observe the changes and update the UI with the new value. To achieve this, the model class Data will extend the observable class BaseObservable. An Observable class is a class that is able to be observed by other classes. Then the “observer” classes are going to react and notify when they observe any change in the Observable class.

Have you heard of @Bindable?

It is made to be applied to the getter of an Observable class, and then it generates a field in the BR class to react if the field value changes.

Notify the changes in the data (notifyPropertyChanged):

Notifies listeners that specific property has changed. The getter for the property that changes should be marked with @Bindable to generate a field in BR to be used as fieldId.

Let’s see the complete code:

Model( Data.java ): 

activity_main.xml file:

MainActivity.java file:

Android data binding is a very interesting and powerful feature, and it can simplify a lot of app building. The real power of data binding is when the updating of value occurs at many points in the application code. In that situation, the developer doesn’t have to keep track of all the ways value can be updated. It avoids the use of reflection and generates binding classes at compile time for layouts you indicate will use data binding. Also, the view hierarchy is only traversed once to find your views.

Hope the explanation helped you in making the data-binding simpler. Have a look at the mobile applications page of our website. Thank you 🙂