Android | Data Binding And Two-way Data Binding
Have you used data binding before, so what about two-way data binding?
Introduction
The most basic step in developing an application is to take the data and set it up to display in the user interface. The most frequently used method for Android applications was to find the element in the layout file with findViewbyID, define it to a local variable, and assign a value to an element by taking the value from the data. Moreover, you had to repeat this over and over for every element containing data in the layout.
Think how much of a torture it will turn into when the number of elements in the interface increases and how much code clutter it will create! Repeating this dreadful process over and over was annoying for the developer, and it took a lot of time, sometimes causing confusion and errors by forgetting the IDs of the variables. This process, which occupied hundreds of lines in the code, was also a complete source of problems in the readability of the code.
What if there was a way to bind the UI directly to the data?
Here is that hero Data Binding!
What is Data Binding?
Data Binding entered our lives when it was first introduced as Support Library at Google I/O 2015. Data Binding is basically one of the components of Jetpack architecture that we use to eliminate the standard view, bind data to views and enable us to write faster and more organized code for data-driven user interfaces.
Why we need it?
- Provides a way to connect data with UI without manual intervention
- As the number of data increases, it makes it easier to synchronize the user interface compared to other methods
- Model and interface are completely separated by getting rid of UI common codes in Activity or Fragments
- The entire interface is connected at the first start of the application so that the view hierarchy is not scanned repeatedly
- Faster as binding is not done in onCreate
- Safer to import UI components as binding is not done at runtime
- Easier to maintain with reduced number of codes and increased readability
So,
Let`s say good bye to findViewById and say hello to Data Bindig!
How Can I Use Data Binding?
Getting Ready
Data Binding, a Support Library, can be used with all Android platform versions up to Android 2.1 (API level 7+). You also need Android Plugin for Gradle 1.5.0-alpha1 or higher.
In order to use it in your application, we need to make Data Binding usable within the android script in the module-level build.gradle file.
Then let’s sync the project and the library is ready. Now we can use Data Binding.
Let’s go step by step!
1As we mentioned, most of the operations in Data Binding are done by XML. Before starting Data Binding, we are preparing our regular XML layout file.
In this project, we are creating an editview where the user enters his name, and two textviews where we will see the bound hello text and the name information we received from the user when he clicks the submit button.
Now we can start binding!
2
We include our XML design in <layout></layout> tags
3 Now, we first add the <data></data> tag to connect our data to our XML file. In the content of this tag, we include two variables, name and type.
name: the name we will use to reach later
type: the address of our model that we created, that is, the type address of the variable
Model created earlier:
4 We will set the text of the textview with Hello text as binding, not as written directly. We will provide this with the @{} syntax.
The name we defined in the data tag + the object we want to reach
So we will make the text part as @={user.helloText}
Final version of our XML file
5 That’s all we will do with the XML side, now it’s time to make binding on the Activity side. In order to bind at the activity level, we need to set the defined variables to the binding object. For this, we need to change it with the setContentView method in the activity.
At the same time, a binding class is created for each layout. The default naming convention for the created class is based on the name of the layout file.Layout name is Pascal case notation and binding statement is added to the end.Layout activity_main.xml becomes ActivityMainBinding This class holds all binding information.
The layout name we prepared in this project was activity_databind.xml. Our Binding class will also be ActivityDatabindBinding
The latest version of our Activity Class:
* DatabindingUtil helper class to create ViewDatabinding
Thus, when the button is clicked, we ensured that the hello text and the user-entered text are bind.
the syntax we use here :
bindingInstance.variableNameInXML = value
was in the form. So after we say binding, we call the name we defined in the data tag.
In the application, when we press the submit button, the value we enter in the edittext field get the text hello we bind and the text received from the user.
It’s that easy!
Data Binding is ok, but what about Two-way Data binding? What changes? What is the difference? Let`s see!
Two-way Data Binding
We talked about data binding, Data binding allows you to use view logic independent of Android Framework. But what if you need to add attributes to your object?
Here Two-way data binding is born!
Two-Way data binding allows you to send objects to the binding object of your layout. Thus, you can provide an instant view. If you ask what is the difference from the previous Data Binding, all the difference is formed by “ = “. So here is the syntax (@ = {variable} )
Let’s see with a short example
Since we will use ViewModel and LiveData in this project, we add lifecycle to gradle. You can find them with latest version numbers from this link.
and we enable databinding as we just learned
Gradle latest version
In this project, we will be showing the text that we will get from the user in the edittext instantly in the textview that we have connected with the binding below.
First, our model is:
and our Two-way Data Binding XML file
if you pay attention unlike when we normally bind data
android:text=”@={viewModel.userName}”
We used = in the syntax, and that’s it! Ta daa! we used Two-way Data Binding!
Activity Class:
When you type in the EditText field, you will see the text you typed in the TextView at the same time.
That’s the super power of Two-way Data Binding.
Conclusion
As a result, Data Binding enables you to perform more efficient and easier operations, especially in projects with complex structures and deep hierarchy. The difference of Two-way Data Binding is that the path of this operation is two-way, from observable to view and vice versa.
I tried to explain the usage of Two-way Data Binding and Data Binding using these two simple examples so that they are confused and the difference is better understood. And I wanted to give a place to this article, thinking that you will love it when you experience it.
Glad if it helped, thanks for reading!
Don’t forget to clap if you found this article helpful.
