CodeX
Published in

CodeX

Best Architecture for Jetpack Compose

Compose UI and ViewModel interaction

11 months back, JetBrains announced the stable release of Jetpack Compose and it has taken over the Android Community like a storm. The new UI-tooling kit is becoming everyone’s favourite. However, understanding how to integrate this with modern architecture may be challenging. Let’s have a look at how we can do this.

Workflow

Created using Adobe XD

In the featured image, you have an idea of what we would do here. All our screen states will live inside of the ViewModel. We would also use a specific function that would listen to the user’s touch interactions and mutate our state accordingly. These changes will make the UI recompose with the updated data.

Setup

We need these two dependencies before we proceed with our application. Add them to your app-level build.gradle file.

implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.4.0'
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.0'

Build the UI

Let us have a simple UI with a couple of Buttons and a couple of Texts.

We are starting to have a schematic view of our screen. We have two Texts on the top and three Buttons on the bottom.

Create the ViewModel

We need two extra classes in addition to the ViewModel.

  1. UIState — This is a data class that will have all the information required as a state for your screen.
  2. UIEvent — This is a sealed class that will include all the possible user interactions with your screen.

Integrating the Screen and ViewModel

Now coming back to the Screen composable, we need to pass the instance of the ViewModel as a parameter and use it to define our screen.

When the UIEvent changes the state inside the ViewModel, the Screen is recomposed with the updated data. The ViewModel and your screen are tightly coupled together and work side-by-side.

Conclusion

This is a very basic example of how to use ViewModel with Jetpack Compose. I have tried various architectures and this is, by far in my opinion, the best. Separating the concerns in your application is always a good idea in the long run. Events can also be described as initiating network requests or retrieving data from the local database.

I hope you enjoyed reading my article and learnt something. Thank you! ✌️

Want to connect?My GitHub Profile.
My Portfolio Website.

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

Carousel Animation In Recycler view

IPC Techniques for Android -Broadcast

Learn by doing Android — Services and IntentServices(1/3)

Ionic App has Crashed or not Responding

ActivityView, advanced way of composing apps

ProAndroidDev Weekly Digest: Android Data Binding, Jetpack Compose & More

Firebase Predictions 🔮

Android lists — An effective and simple approach

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nishant Aanjaney Jalan

Nishant Aanjaney Jalan

CS and Math Teacher@Schoolhouse | Android Developer | Oracle Certified Java Programmer | Musician | https://cybercoder-naj.github.io

More from Medium

KMM UI Architecture - Part 1

Jetpack Compose bottom sheet over Android view using Kotlin extension

Enable Lua Scripting On Android App

The easiest way to implement Firebase RemoteConfig in Android