Using Jetpack Compose for Android project with MVVM pattern

Tram Ho

At Google I / O 2019, Google introduced Jetpack Compose . Along with that, Android Studio 4.0 (test version) also supported application development using Jetpack Compose. Therefore, I am writing this article to share how to use Jetpack Compose with MVVM pattern. We will build a simple screen with a list of users and update the value of the list. Before I get started, I would like to introduce some basic features of Jetpack Compose:

  • @Composable is the annotation used to mark a function as a compose function.
  • @Model is the annotation used to mark a class that will make ui corresponding to that class be updated when the value of the model changes.
  • The flow of data is always from top to bottom. Therefore, in MVVM model, data will go from Repository -> ViewModel -> Activity and from Activity, the stateModel will be updated, from which the UI will be updated.
  • To be able to handle events from the UI such as click buttons, we will use the lambda expression to update the Activity where this event occurred. From Activity, the event stream will be Activity -> ViewModel -> Repository and from the Repository data will be sent back by the thread mentioned above.
  • This app is for demo purposes only, so I will try to use as little code as possible. Along with that, I will not use the Repository Pattern, but instead is static data that is initialized directly from the ViewModel.

If you want to code by article, you need to use Android Studio 4.0 or higher, can be downloaded here .

When creating the project, select the Empty compose activity when selecting the project template to use.

Now let’s start coding!

First, we need to create a simple user model, as well as create a list of users. UserModel class:

Next, create a Model class to hold the list of UserModel. We need to notify the UI every time the list is updated, so we will mark this class with the @Model annotation.

Next, we will create an object class to hold the composable functions for the UI. Our functions will take a parameter of UserState. One thing to note is that we can use Kotlin code as usual in the composable function.

In the code above, we are using the loop to display the list. This may not sound very effective. To display the list effectively, Google provides something called ScrollingList. However, at the time of this writing, it was not yet included in the Jetpack Compose suite. However, if you read this article it was released, just note that replace the other loop with ScrollingList.

Now, we will create a ViewModel to contain the business logic. We will use LiveData to create a userModel list. Add the following dependencies to the build.gradle file:

Create a new file for the UserListViewModel:

Next, put everything into MainActivity together:

  • *** Run the application *** All code of the current application is available here . For those who want to add or delete data in the user list, you can read on to the next section below. In the UserListUi classs, change the addList method declaration to get into two lambda expressions to notify the button click event:

Then add 2 buttons and invoke lambda when they are clicked:

From the activity, send lambda to the functions:

When a button is clicked, it will invoke lambda, from there notify the activity and activity will call ViewModel’s methods to update the data in the list. Thank you for reading your article. Hopefully what I just shared will be helpful to you when you start learning about Jetpack Compose. Reference: Jetpack Compose With MVVM

Share the news now

Source : Viblo