Two-way data-binding in Android: 101
If you’re an android developer, there is a high chance that you’ve heard of Data Binding.
Pre-requisite: It’ll be good if you’re already familiar with normal or one-way data-binding.
So, what is two-way data binding?
In one-way data binding, you set a value on an attribute and set a listener that reacts to a change in that attribute. But two-way data binding allows you to directly react to the changes without using listeners.
Let me give you an example. I recently had to add a feature in one of my company’s projects where we ask users to fill some details regarding soil like pH value and there is an expected range for it like 6–9. So if the user types 3, an icon labeled as “LOW” should be displayed at the end of the EditText. And this should be dynamic.
Basically, the first thing that I thought was to use a TextWatcher such that whenever a user writes something it’ll let me know. But there are 3 methods in it and generally, we use only one of them for our purpose. And what if, you’ve to add multiple EditText with similar requirements?
So by using two-way data binding, you can easily achieve this by writing very few lines of code. Let’s see how.
In this example, we’ll enable a button if the EditText is not empty.
Define a variable in your ViewModel that will listen to your user’s input
class MyViewModel: ViewModel(){ //variable that will listen to user's input
var _userInput = MutableLiveData<String>() //expose the variable to the owner(activity/fragment)
val getUserInput: LiveData<String> = _userInput}
Now, add a variable for your ViewModel in your XML. One thing that is important here is, in one-way data-binding, we use @{expression} but here we’ve to use @={expression}. It receives the data changes to the property and listens to user updates at the same time.
<layout> <data>
<variable
name="viewmodel"
type="com.example.MyViewModel"</data>
<EditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="@string/hint"
android:text="@={viewModel._userInput}" />
<Button
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:clickable="@{viewModel._userInput.toString().length()>0}" /></layout>
And that’s it. No need to attach any TextWatcher here to observe the user’s input.
class ExampleActivity: AppCompatActivity(){ override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView(this, R.layout.activity_example)
val viewModel = ViewModelProvider(this).get(MyViewModel::class.java)
binding.lifecycleOwner = this
binding.viewModel = viewModel
}
}
Well, this is just an introduction of how you can use two-way data binding in your projects but there are a lot of things that you can do with this. To learn more, check out the official android documentation on two-way data binding.
Also, there is one more thing that I want to discuss. If you read about the clean architecture, it says that our UI should be as dumb as possible such that we don’t need to do any testing on it. But if we’re using data binding that means that we’re not following clean architecture strictly. But still, our ViewModel doesn’t know anything about the view and we can test our business logic independently. In my point of view, if you’re not writing any logic that should be in ViewModel than it’s okay to write simple if-else in your views. But if you’ve any different perspective on this, please let me know your thoughts.
Hope you learned something in this article. Let’s connect on LinkedIn or Twitter.
Happy coding! Peace out✌
We are trying to fix some broken benches in the Indian agriculture ecosystem through technology, to improve farmers’ income. If you share the same passion join us in the pursuit, or simply drop us a line on report@carnot.co.in
Follow Tech@Carnot for more such blogs on topics like Data Science and Visualization, Cloud Engineering, Firmware Development, and many more.
