Android basics of Data Binding in Kotlin

findViewById() function to get references to views. When your app has complex view hierarchies, findViewById() is expensive and slows down the app, because Android traverses the view hierarchy, starting at the root, until it finds the desired view. Fortunately, there's a better way with other cool benefits like removing lots of boiler code so code looks clean.

Here is the solution :) Data Binding Library

What is Data Binding?

According to google document;

“The Data Binding Library is a support library that allows you to bind UI components in your layouts to data sources in your app using a declarative format rather than programmatically.”

Implementing data binding

To use Data Binding library, open build.gradle and add the following lines inside Android block. By default this setting is not enabled.

Click Sync Now, and wait until Android Studio finishes syncing your project.

In my case I am creating an example application that will fetch country information from web api, in simple way we will take any country name from user in edit text and will make a web call to a public free api and it will give us given country information, this code I have written in MVVM you can use any architectural pattern or without. For reference you can get pull my code Github link.

Pradeep-root/DataBinding

For data binding you have to convert your regular layout into data binding layout, go to your xml layout and select the root layout and press Alt+Enter and select the option convert to data binding.

After conversion layout will be looks like that.

Android studio will wrap the root layout with layout tag and it will add data tag in layout. Data binding layouts start with a root tag of layout, followed by a data element. For the data element, you need to specify your own data source, which is usually a ViewModel, but can sometimes be a Model.

Add a variable name and type as your viewModel or model class. In my case I am adding both as two variables, because I want to call a web call method which is inside the my viewModel, and when I will get response it will come into Country class model with the country information.

Now on click of a button I want to call a web call method which is present in the viewModel class, so that we have to bind the viewModel method with our xml layout component with the button. For that we use android:onClick=”@{()->viewModel.getCountryDataWeb()}” here we use @ {} syntax to link the model method with on click property so it will call it from here directly using data binding library.

Now come to the MainActivity.java class we have to do one more change in activity to set the layout in onCreate() method instead of setContentView() we have to use DataBindingUtil.setContentView(activity_context, your_layout) it will return you your binding object which is auto generated class using your xml layout by data binding library. Now you have to set view model into binding object. binding.viewModel = viewModel

Now your one way data binding is done, when you will run the code it will able to call the method which is linked with the model. In my case I want to send Country name in web call so for that we have to take country name string from edit text. Now the Two way data binding comes to the picture

For doing that we have to create a string variable with in viewModel as observableField var countryName = ObservableField<String>(“”) empty string is set as default value of the variable, now set this variable into xml layout edit text UI component using @ {viewModel.countryName} all thing set this variable will get the edit text value you can use this for further use, I am suing it in web call string.

Till now we are done with clicking button and taking data from edit text now when you want to set any data on the UI component, as in my case I will get response of web call in Country object and will set the information to the UI. As I already have set the two variables in my data tag of layout so this time I used that variable for setting its properties similar way @ {country.name}, @ {country.capital} and so on, noticed ? here I am using the model class type.:)

Now finally set the response data to the Model class of binding object, I am getting response in liveData observable so setting inside it.

viewModel.countryData.observe(this, Observer {
    binding.country = it
})

Now all thinks are set you will get the data on UI by doing this. I hope you learned something basics from this. Happy coding… :)