Create Android app with MVVM pattern simply using Android Architecture Component

hongbeom
hongbeomi dev
Published in
3 min readApr 15, 2020

🧐 What is MVVM?

First, let’s talk about what the MVVM pattern is. The MVVM pattern is a pattern derived from the MVP pattern defined by Martin Fowler in the 1990s. The MVVM (Model-View-ViewModel) pattern helps to completely separate the business and presentation logic from the UI, and the business logic and UI can be clearly separated for easier testing and easier maintenance. Let’s take a look at View, ViewModel and Model

View

View is responsible for the layout structure displayed on the screen. You can also execute UI logic.

ViewModel

The ViewModel implements the data and commands connected to the View to notify the View of state changes via change notification events. Then, the View that receives the state change notification determines whether to apply the change. The ViewModel here is different from the ViewModel of AAC (Android Architecture Component). The ViewModel in AAC is a class that knows the Lifecycle to hold the data used by the View in changes like screen rotation. If you want to use the MVVM pattern while developing Android, you can implement it without using AAC ViewModel.

Model

Model is a non-visual class that has the data to use. Examples include DTO (Data Transfer Objects), POJO (Plain Old Java Objects) and entity objects. It is commonly used service or repository that need to access or cache data.

https://docs.microsoft.com/ko-kr/xamarin/xamarin-forms/enterprise-application-patterns/mvvm-images/mvvm.png

As you can see from the figure above, ViewModel knows Model but does not know View and View can know ViewModel but does not know Model. Now let’s use AAC JetPack to apply the MVVM pattern to your project more easily.

⛰ Architecture

In this example, it is implemented based on MVVM pattern and repository pattern and Local DataSource is not used.

1. Connecting View and ViewModel

DetailActivity.kt

DetailActivity has the object that binds the layout file using the binding method of BaseActivity. Lines 16–20 connect lifecycleOwner and ViewModel and Data, and observe the characterList of DetailViewModel.

DetailViewModel.kt
ViewModelModule.kt

DetailViewModel has data of characterList and loading status. characterList receives data from the network via the repository asynchronously in the liveData block. Before receiving the data of characterList on the network, activate loading status and observe this in DetailActivity, and will update loading status after receiving data.

layout.xml

I used DataBinding to configure the background color and loading screen of RecyclerView. and I implemented a loading using LottieAnimationView.

2. Pass RecyclerView logic to BindingAdapter

Now you can use the BindingAdapter to connect the adapter to the RecyclerView and implement the itemDecoration.

BindingAdapter.kt

And simply use it.

layout.xml

3. Configure Repository

Repository is one of the design patterns where Eric Evens is define. When the ViewModel requests the data that will be used for the View, the Repository will provide you this by choosing the appropriate data locally or on the network. At this point, the ViewModel doesn’t care if the requested data was retrieved locally or from the network. You can make it independent of a particular implementation by using Repository as an interface and creating an implementation.

Repository.kt

The method called getCharacters is defined in the Repository interface and this is implement in the RepositoryImpl class. I implemented Remote DataSource in the same way.

RepositoryModule.kt

Then I used koin to create a single bean object of type Repository.

That’s all!

Using Harry Potter API and Jetpack, I made an example of applying MVVM pattern easily. Thank you for reading🙌 If this posting was helped, please give a star at GitHub.

The all code can be found here.

--

--