Android Data Binding & MVVM
In the article, we will introduce basic concepts of Android data binding and MVVM. Google I/O 2015 announced a data binding library for Android. This is very cool for developers. Android Data Binding also allowed developers to implement MVVM design pattern easier.
There some resources you can refer to understand the basic concepts of MVVM.
After taking a look at the links above, you can find MVVM is divided into three parts
1. View -> View is responsible for displaying UI and doing UI logic.
2. Model -> Model represents data source
3. ViewModel -> handles presentation logic
The next stop introduces how to use the MVVM design pattern in Android projects. Android data binding is very helpful for achieving MVVM design pattern. Let’s check how it works on the example below.
Set up Data Binding
The data binding Library is a support library, so you can use it with all Android platform version back to Android 2.1(API level 7+). The only requirement is that Gradle should be 1.5.0-alpha1 or higher version.
At first, configuring your app to use data binding, and you add the Data binding element to your build.gradle file in the app module:
android {````dataBinding {
enabled = true
}
}
Use MVVM approach and create Model and a View Model for binding
Model
The data-binding layout allows us to connect object field and present its data, if the data in application that is read once and never changes thereafter. It is also possible to use a JavaBeans object. We advise that you end the file name with “Model”:
ViewModel
ViewModel is responsible for handling presentation logic. About event handler, there are two ways to handle an event. You can from the official website. The ViewModel retrieves the necessary data from the data model, then applies the UI logic. For example, a user clicks button then picking data and navigating to next page. You can see onProfileImageClicked method, we advise that you end the file name with “ViewModel”:
View
The view is the actual user interface in the app. It would be Activity, fragment . When the layout file adds thelayout root element. Android studio automatically generate a binding java object, depending on xml layout file name. In the example, we name it Let’s go to binding model and ViewModel with xml :
Connecting the Model and ViewModel with XML layout
Data-binding layout files are different from normal layout files, which start with a root tag of layout element followed by a data element which includes the data you want to use in the layout file and a view root element. In layout files, we use a data binding expression @{expression} for controlling actions in the view, user input, UI should display or not, event listener, etc…
Using in xml
In layout file, @{model.userName} obtains value from getUserName(), @{model.imageProfileRId}, @{model.age} are the same. And @{(v) -> viewModel.onProfileImageClicked(model.userName)} means set onClick callback listener.
Conclusion
As you can see, the activity is very simple, ha yeah! NO findViewById. MVVM takes advantage of data binding, and separates UI logic, UI and data, minimizing the logic in view. This article shows the basic MVVM concepts and how to combine with data binding.
