Data binding is a technique used when you want to glue pieces of information (your data) to some visual user input elements. In this process, whenever the input gets updated, the data behind it gets updated as well.
This is far from a new concept, and there are a plethora of frameworks that have incorporated this into their design (like AngularJS/React/Vue).
If you are unfamiliar with the Jetpack library suite, it might be because Google has announced that it will be dropping development for its support libraries. Instead, it will move into supporting AndroidX libraries (which are the newer version of the support libraries).
I am aware that there are many articles explaining how to use data binding using an adapter, but this piece won’t focus on that. Instead, I will show a bare-bones, minimal approach to data binding that can save you time by minimizing the amount of code you have to write.
Why Use Data Binding?
If you aren’t sold yet, let’s take a few minutes to explain the benefit of using data binding by showing an example. Let’s say you have a menu with three custom buttons, where each button is a layout within itself.
One way to generate all of this is by using four different XML layouts: one for the main layout and one for each of the three buttons.
You need to do this since each button will direct the user to a different part of your application and therefore needs different text and a different image.
Granted, this isn’t a lot of code duplication as we are only handling three layouts. But if you think about it, it’s quite a waste of time dealing with all that code. If you take into account an application that has a more complicated layout, one that might showcase products and their images, this can lead to a lot of tedious code replication.
With data binding, we will manage to create only one XML layout that will be used by all of our buttons.
Where Do We Start?
We need to let our project enable data binding. For that, we need to add the
dataBinding element in our application’s
After synchronizing our project, we’ll create our data class, which we will use to bind the layout to.
Pay attention to the fact that we have two fields in our
buttonText— This is the text that will show up beneath our image.
buttonImageSrc— This is responsible for the button’s image.
If we wanted more data, we would just add more fields to our data class.
The Actual Binding
Next, we need to declare a variable property in our layout so that it can be used. This variable will be bounded to the data class that we created. To do this, there are two things we need to do:
- Wrap our root layout element in a layout tag.
- Add a data tag that will contain the declaration of our variable (
Notice that we can remove the schema from our previous main layout as it was moved to the root layout tag. Also, the variable we added is tied directly to our data class.
MainActivity file, we need to add code to handle the binding:
Each time you create a variable inside of a layout, a binding class is generated for that layout automatically. In our case, our layout is called
activity_main, so the binding class will be named
The convention is always the name of the layout with Binding added at the end.
Since we declared
buttonData as our variable in the layout, it gets appended to the binding object and we can assign it a new instance of our
After doing all that, we can finally use the data that we just bound in our layout.
And the result is:
Wait a Second…
We have three buttons and our data class can only be used for one button, so how do we get past this?
We had to override the
get method as it needs to be recognized when we use it in our layout.
Then, we need to change the references in our
And we have to create a new binding to the new data class:
We create three instances of the
ButtonData class. Then we instantiate a
ButtonsData object and attach it to our binding object.
Lastly, we can now use our data class properly in our layout:
This article was written due to my experience developing the following application:
(You never know, it might be useful)
You can see the entire source code here: