Getting Started With MVVM in Jetpack Compose

We are going to learn how to apply MVVM to Jetpack Compose

Photo by Markus Winkler on Unsplash

You can find the previous article about the Jetpack Compose tutorial here:

• A Glimpse Into Jetpack Compose by Building an App
• Layouting in Jetpack Compose
• Navigation in Jetpack Compose

In this article, we will learn how to apply MVVM to Android applications using Jetpack Compose.

What is MVVM?

MVVM, aka Model-View-ViewModel is a software architecture pattern that is designed for a separate view from business logic (use case) that will be handled in ViewModel. The pattern itself is explained in this diagram.

Diagram about pattern in MVVM

MVVM is divided into three parts:

1. View : This section is responsible for showing User Interface for the end user from use case logic that is being directed in ViewModel. This section is also responsible for collecting input from the end user, such as click, submit form, and then transfer it to ViewModel. Usually, this section consists activity or fragment.
2. ViewModel : This section is responsible for presentation logic that usually directs business logic from Model to View, or give input from View to Model.
3. Model : This section serves as the brain of the application. This section is responsible for business logic that will be directed to View from ViewModel. This section also handles use cases that receive input from the end user. Usually, this section consists of service class.

For more information about MVVM, you may refer to it here — this article explains MVP too.

Here Our Application Work

Using MVVM, our application will more or less look like this diagram below:

Our Application consists HomeFragment and DetailFragment (View Section), each fragment has own ViewModel (ViewModel Section), that will refer to repositories/service (Model Section). In repositories, we will retrieve our data from rawg.io REST API.

Before we start, we have to retrieve our API key from rawg.io. Refer to this link to retrieve it. And store the ApiKey. We will need this in order to successfully call the rawg.io API.

Let’s Get Started

Open gradle from app level. Make sure to add this code.

Because we need to retrieve API, we have to add permission to use the internet to our app. Open AndroidManifest.xml and add this line.

Usually, we will get Loading, Success, and Failure type from API response. Therefore, we will make Utility Class named Response.kt. The code, much or less, will look like this:

So in the future, each time we call something from API, we will refer to this class to find out which response type API response will give us.

Now, let’s implement MVVM in our app. Previously, we built View Section (MainActivity.kt, HomeFragment.kt, DetailFragment.kt). Now, we will build Model section and ViewModel section.

We will create a class responsible for calling API from external sources. Remember, we will call API from rawg.io. Create a class named GamesService.kt. Copy this code.

There are three main functions in GamesService.kt:

• getAllGames : a function that will retrieve all Games data using parameter ApiKey, which page it is, and how much is the data in one call? This data will be stored in GamesResponse.kt. (We will create it later on)
• getGamesDetail : a function that will retrieve the detail of the Games using parameter ApiKey, and id from Games.kt, This data will be stored in Games.kt. (We will create it later on)
• getInstance : a function which is the initialization of GamesService.kt to let Retrofit do their job initialize service from rawg.io .

Noted that we use ApiKey from rawg.io that we used to save.

Now we need to create a data class called GamesResponse.kt and Games.kt. These two will be used as a Data Model class from GamesService.kt.

GamesResponse.kt will store a list of Games.kt, and other information about the page as well. And Games.kt will store data about the detail of Games.

null in Games.kt and GamesResponse.kt is marked as an optional data.

Now, we just have to parse GamesService.kt into repositories and their function as well.

Create interface class named GamesRepository.kt, and class named GamesRepositoryImpl.kt which will be receiving implementation class from GamesRepository.kt. Copy the code so the class looks like this:

There are two main functions in GamesRepositoryImpl.kt:

• getAllGames : This will be called the paging function to retrieve the bulk of GamesResponse.kt from GamesService.kt
• getDetailgames : This will called Response of Games.kt that contains the detail of Games from GamesService.kt

Now we create GamesPagingSource.kt for paging function.

There are two main functions about GamesPagingSource.kt :

• load: This function will call getAllGames from GamesService function from response parameter, and store it with nextPage and prevPage information to LoadResult from PagingSource class from paging library.
• getRefreshKey: This function is responsible when load want to be executed. This function will return PagingState.anchorposition in order for load to know which position does the user at right now, so the load will execute the service properly without issue.

Noted that variable next in GamesResponse is null, so if that happen, we will use nextPage as a default value.

For more information about PagingSource, refer to it here.

The repositories are one by us to be implemented into ViewModel. Create HomeViewModel.kt and DetailViewModel.kt.

HomeViewModel.kt is responsible for retrieving a list of Games and direct it to HomeFragment.kt, which at the same time, retrieve the information about paging information to GamesRepository.kt for PagingSource to decide if they want to execute load or not.

DetailViewModel.kt is responsible for retrieving information about Games from DetailFragment.kt (User clicks one of Games from list of Games), and direct it to GamesRepository.kt, and retrieve information about API response from GamesRepository.kt to DetailFragment.kt for the end users to know about API Response.

Conclusion

We have learned much about implementing MVVM into our application by creating Model and ViewModel sections.

All code for this article can be viewed here for the complete version.

In the next article, I will write about how to implement from ViewModel Section to View Section in Jetpack Compose. The next article is the final part of MVVM in Jetpack Compose.

You can view my next article here

ViewModel To View in Jetpack Compose