MVVM Architecture Tutorial for beginners-Android

In this tutorial, We are going to learn how to build MVVM Architecture for our app and how we migrate existing projects in MVVM Architecture. Few months ago I was not using any architecture, due to performance issues and uneven code, I’ve migrated existing projects into MVVM. I’ve seen many differences in performance. Using MVVM Architecture, it’s easy to replace UI components with minimum changes or sometimes without changes in other classes. I have been using this architecture for the last 6 months and I prefer the Model-View-ViewModel pattern.

What is MVVM(Model-View-ViewModel)?

1. Model: Model contains the business logic i.e database and remote model classes, that works with the ViewModel for fetching data and storing the data.
2. View: View contains the UI part i.e XML,Activity and Fragments, it interacts with the ViewModel about the user’s action.
3. ViewModel: ViewModel is an intermediary between View and Model.

MVVM Architecture

This tutorial is for beginners who want to build MVVM Architecture. So, I simplified the steps.

Now let’s move to implementation.

Steps to create a new project with kotlin.

• Go to File
• Select Empty Activity
• Give the name of the project MVVM-Architecture-Sample-App
• Set the package name com.mvvmsampleapp
• Set the Location of your workspace
• Select Language Kotlin
• Click on Finish

Now add the kapt plugin to your app gradle.

apply plugin: ‘kotlin-kapt’

Annotation processors are supported in Kotlin with the kapt compiler plugin. You can use libraries such as Dagger or Data Binding in your Kotlin projects. For more detail check this

Add below dependencies and sync.

About Dagger

• dagger package contains the public API for the Dagger 2 dependency injection framework.
• dagger is a fully static, compile-time dependency injection framework for Java, Kotlin, and Android. For more detail check dagger.

Add dataBinding.enabled = true to your app gradle file for use data binding.

Now our project is ready. Our project structure will be like this.

data: It contains the model, remote and repository

1. model is responsible for managing the data to the application.i.e our login api response is like below.

{
“token”: “QpwL5tke4Pnpja7X4”
}

Based on this response will make the Login model class like below

You can direct create model class from here

2. Now we’ll set the api interface and end points. We’ll make the interface.

3. repository provides the communication bridge between data and an app. Now create the MVVMRepository class inside the repository and implement the ApiHelper.

di: di stands for dependency injection that injects the activity, fragments and module.

1. All the activities should be in ActivityBuilder, all the fragments should be in FragmentBuilder. I.e

@ContributesAndroidInjector
abstract fun bindLoginActivity(): LoginActivity

2. Create AppComponent inside the component package. AppComponent is used for injecting the AppModule.

3. Create an AppModule inside the module package. AppModule is a dagger module that is used for providing singleton at the application level.

ui/base: Create the base classes such as BaseActivity, BaseFragment, BaseViewModel etc.

1. It’s going to be common for all Activities, Fragments, ViewModels, Navigators and BaseViewHolder.
2. BaseActivity performs for binding variables and views.

3. Navigator responsible for every Navigator class to register itself and common methods.

4. BaseViewModel is responsible for registering every ViewModel class itself and also registering observers to get the livedata event for all its different custom livedata models.

Create a callback interface, then define a method, which would act as a callback like below.

Create the package based on your views i.e For Login i have created a login package.

1. Create LoginActivity inside the login package.

2. Create a LoginViewModel like below

3. Create a LoginNavigator to perform the user’s actions.

4. Create all view packages based on your views.

Create an rx package to use RxJava which can help us a lot better structure.

1. Create a SchedulerProvider inside the rx package that gives you complete flexibility and control over your Schedulers and defines access to all the Schedulers that your app uses.

2. Create ViewModelProviderFactory in an app. It is responsible for creating your instance of ViewModel and passing dependency through ViewModel constructor and giving value to the ViewModelProvider.

3. Create ViewModelProviderFactory in an app. It is responsible for creating your instance of ViewModel and passing dependency through ViewModel constructor and giving value to the ViewModelProvider.

For full source code kindly check the here

If you want to implement MVVM in existing project then follow below steps.

1. Add all libraries that I have mentioned above.
2. Make packages that described in this doc.
3. Make Views based on your app functionalities.
4. Inject all your activities and fragments.

Hope It may help you :)