DEV Community

Paul Franco
Paul Franco

Posted on

Android Jetpack: 2Way DataBinding

With the introduction of Android Jetpack’s ViewModel and Data Binding we are able to reduce the number of lines of code in out apps significantly. In this article we will walk through a simple application that implements 2-way Data Binding.

With 2-Way Data Binding when the value of the object changes, the User Interface changes and when the UI changes, the value of the object changes.

Lets begin by starting a new Project in Android Studio. Select Empty Activity as the project template.
Alt Text

I’ll be naming the project TwoWayDemo.
Alt Text

The next step is to enable Data Binding in the buildFeatures block, add the dependencies for ViewModel and LiveData in the dependencies block, and apply the kotlin-kapt plugin in the app’s build.gradle file. A list of updated dependencies for Lifecycle-aware components can be found here: https://developer.android.com/jetpack/androidx/releases/lifecycle
Alt Text
Alt Text
Alt Text

Next we will create a ViewModel Class called MainActivityViewModel which for now will only hold a single MutableLiveData of type String. MutableLiveData is Read/Write while LiveData is ReadOnly. We will initialize a variable of fullName with the initial value of “John Doe”.
Alt Text
Alt Text

In order to utilize data binding, we need to add Layout Tags as the outermost tags in our activity_main.xml file.
Alt Text

Now, we need to add Data Tags and define a reference variable for the MainActivityViewModel Class.
Alt Text

We can now bind the value of the fullname MutableLiveData to the TextView.
Alt Text

To complete our initial set up we need to define our data binding object in our MainActivity and replace the setContentView with our binding object.
Alt Text

Now we need to define a reference variable for our ViewModel.
Alt Text

We now need to assign this viewModel Object to the viewModel object we defined in out activity_main layout file.
Alt Text

Finally, since we are using LiveData we have to set MainActivity as the LifeCycle owner.
Alt Text

If we run our app, we should be able to see a TextView with the fullname value we defined earlier in our MainActivityViewModel class.
Alt Text

This is one-way data binding. We bound a view to a ViewModel Object. The bound views are displaying the values of the properties of the ViewModel object. Now that we have implemented one-way data binding, lets make a few changes to illustrate 2-way data binding.

Above the TextView, lets add an EditText so that when we type something on the EditText it will be immediately displayed in the TextView.
Alt Text

Now that we have bound the EditText to viewModel.fullname, we can see that both the EditText and the TextView are displaying “John Doe”.
Alt Text

But if we try to change the EditText to Robert Smith, nothing happens to the EditText.
Alt Text

This is because our app is still only implementing one-way data binding. In order to fully implement 2-way data binding we have to make a small change in our activity_main layout out file. In our EditText we have to add a = sign in between the @ and { of our text property.
Alt Text

We also have to annotate our fullname variable in out MainActivityViewModel with the Bindable annotation.
Alt Text

The last step is to extend Observable and implement its methods.
Alt Text

When you run the app you will see that as you type something in the EditText the TextView will automatically display whatever you wrote. This was a simple example of how to implement 2-way Data Binding with ViewModel and LiveData.
Alt Text

Top comments (0)