WTF data binding is? And why you should embrace it!
Good morning (or evening)! Today I bring a brief explanation of what “Data Binding” is, why I think you should use it and how it changed my daily life. My name is Daniel and I currently belong to the Apps development team at MásMovil Group. We have recently incorporated data binding into our Yoigo and MásMovil apps, streamlining the process of laying out the views.
Data Binding is a data link library between our native code and our views declared in XML. You can find all the official documentation here.
Before explaining why you should add data binding to your project, let’s start with a little bit of history. The native way that Android gives us access to our views from our native Java or Kotlin code is through the tedious findViewById, having to write this statement to access our views, either to assign listener or change a text.
Does the case of having a ViewHolder of a RecyclerView with 10 lines full of findViewById sound familiar to you? You're not alone! Luckily this has an easy solution.
My first experience with data binding began when I discovered ButterKnife (more info here).
ButterKnife was one of the first data binding libraries that emerged to make our lives a bit easier. Because we could refer to our views in a much more comfortable way from the code:
Or to implement in a simpler way an onClickListener:
With the use of ButterKnife we got a little less than boilerplate and a cleaner code, but still we had to declare the views as variables in our class.
At the beginning of 2017 came to my hands a new library of data binding developed by Google. Google released its own data binding library for Android, which allows us to write expressions directly in the XML to make certain view-related logic like show a certain text in a TextView, making that by just pressing a button it executes a certain method, or even show/hide a view.
This way we can simplify things up to this level:
Is it worth using Data Binding?
Currently at MásMovil we are working on a multibrand application and our goal is to reuse code as much as possible by changing only the visual part of the application. But when we have faced with this change of appearance the results are that much of the visualization logic is coupled to our activities and fragments. This leads us to have to create a new activity or a fragment for each flavor of the project every time the view logic is different. With data binding We move this logic to the XML file, which yes are indeed to each flavor.
How can I add it to my project?
Enable it is as simple as adding this into your app Build.Grade:
Okay, but how do I use it?
The number of features provided by the data binding library is extensive. In this article I will show the most basic concepts and I think that by just adding them makes the change worthy.
The data binding’s starter pack consists of:
- View reference in order to use our views in an activity, fragment or custom view.
- Link Data in XML.
- Event management to be able to make
onClickListenersa little more intelligent. - Binding adapters with which we will provide more logic to our XML.
View Reference
The necessary to use data binding in a given view is to add the label <layout> in XML in which we want to use it. For each XML that includes the <layout> tag, a class is generated with the name of the XML and the suffix "Binding". Ex: main_activity.xml --> MainActivityBinding. From this class we will have access to all the views declared in the XML as well as the methods to link data, if we have declared one in the view.
We can get our binding class by:
Once we have obtained our Binding object we will have access to all declared views in the XML from it:
Data Link
Of all the things that made me fall in love with this library was without a doubt the power to pass an object directly to an XML , leaving the XML to paint the information you need from that object. In the XML we can add the label <data> to be able to link variables, by means of the label <variable>, within the XML. This variable will have two parameters: name, which will be used to access the variable from the XML, and the type, which will be the class of our variable.
and to link an object to the view:
Once we have linked our object, we will be able to access it from the XML using the syntax @{}, for example:
Event Handling
In the XML we can link the events of the views, such as OnClickListener, with an object. As a result, we will be able to invoke its methods. This invocation can be done by reference to the class method or a lambda.
We can pass to the view an implementation of the interface:
And how to invoke this method from the XML will be:
Binding Adapters
The data binding library allows us to create referential methods from the XML to make a certain logic. For example, we can create a binding adapter to directly load an image from a glide URL:
Where imageUrl will be the name of the method that we invoke from the XML:
With the binding adapter we can also override methods of the Android framework naming in the @BindingAdapter the method that we want to overwrite. Ex: @BindingAdapter("android:text")
In a binding adapter we can receive multiple parameters. We can also decide whether or not they are required to be declared in the XML.
Former:
TL;DR and my conclusion
Thanks to link data directly to our XML we can lightweight our application by decoupling the logic of an activity or fragment from the view logic.
We should leave behind the findViewById or Kotlin synthetics (they aren’t a good practice anymore and they are gonna be deprecated). Which were giving us problems when working with several flavors.
In our case it has been quite useful when it comes to reuse views between different flavors of our application. Decoupling the view logic of activities and fragments by moving it to the XML, allow us to modify this logic without having to create an activity or a fragment specific for each flavor.
And there is much more… Things like the use of observable, LiveData, Two-way binding, etc. But that’s another story, and sooner or later I will write about them!
I hope you have found this article useful, and don’t hesitate to contact me for any question or advice!
You can see the full code of the example I’ve been illustrating here:
