Android MVVM data binding with ViewModel

Hello everyone, this article is about how you can implement android MVVM architecture to your android application. I thought to right this article because I was having many troubles when I first using the android MVVM pattern. So, I wanted other people not to face same problems again.

Introduction

MVVM is an architectural design pattern, which helps us to accomplish separation of concerns. Also it is used to build reusable and testable native android applications.

What is MVVM?

MVVM stands for:

• Model — This holds the data of the application. It cannot directly talk to the View. Generally, it’s recommended to expose the data to the ViewModel through Observables.
• View — Simply this is the user interface of the application. Does not contain any application logic.
• View Model — It acts as a link between the Model and the View. It’s responsible for transforming the data from the Model. It provides data streams to the View. It also uses hooks or callbacks to update the View. It’ll ask for the data from the Model.

MVVM

There are 3 possible ways to bind data with a view model in android. Those are:

1. Two way data binding
2. Binding using LiveData
3. Binding using RxJava

In this article, we are going to learn binding using LiveData. We will be using Kotlin as the PL. Let’s begin.

Project structure

Project structure

Add libraries and dependencies

Enable data binding and view binding libraries

In order to do this, you need to open the build.gradle file and enable those as this:

android {
    buildFeatures {
        viewBinding true
        dataBinding true
    }
}

Add dependencies

Add these dependencies in the build.gradle file under dependencies section.

implementation 'androidx.lifecycle:lifecycle-livedata-ktx:2.5.1'
implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.5.1'

Here you have successfully completed the first step. Let’s create our model.

Create data model

To store the data within the application run time, we are using a model. So let’s create a model called Counter as below.

Create View Model

Create a view model as below.

important

Remember that we cannot directly use _data.value.increment() method, because it does not update the value in MutableLiveData object. So we assign _data.value with _data.value.apply {this?.increament()} to awoid live data updating issues.

Creating the view

Let’s create a simple view with a TextView and a Button.

Important

• You need to remember that you need to have <data> tag inside the <layout> tag. Otherwise it does not work.
• To bind a value, we use “@{viewModel.data}” format.
• We use android:onClick=”@{() -> viewModel.increase()}” format to bind events.
• Remember to use the same name in the <data> tag.
• Use android:text=”@{viewModel.data.toString()}” format. not android:text=”@={viewModel.data.toString()}”.

Associated kotlin file:

Important

• Here, we are getting the view model from the ViewModelProvider, because there will be having a single instance of the view model until we destroy the view.
• In line number 26, we initialise the binding variable from the DataBindingUtil class.
• We have to set the binding.viewModel to our view model (Line: 29). So that we can use the view model in xml file.
• One important thing most of the people forget to do is setting the lifecycleOwner (Line: 32). Without this, your data will update in the view model. But, your UI will not be updated.

Thank you for reading this article. If you find something valuable in this article please give it a clap and leave your thoughts. Don’t forget to share.

To be continued!