MVVM vs MVI in Jetpack Compose – Which One Should You Use?
Jetpack Compose has completely changed how we build Android UIs. No more XML. Just pure Kotlin code to declare your UI. But with great UI power comes great architecture confusion!
The big question:
❓ Should you use MVVM or MVI with Jetpack Compose?
Let’s break it down like friends talking over chai – with real-world examples, code patterns, and a sprinkle of developer wisdom. 🧠
Learn how to convert a Website into Android App Using Jetpack Compose
📦 What Is MVVM?
MVVM stands for Model-View-ViewModel. It's been the go-to architecture for Android devs for years.
Model: The data layer (Room DB, API, etc.)
View: The UI (Jetpack Compose screen)
ViewModel: Handles UI logic, exposes data using StateFlow, LiveData, etc.
🧠 How It Works in Compose:
@Composable
fun TodoScreen(viewModel: TodoViewModel = hiltViewModel()) {
val todos by viewModel.todoList.collectAsState()
LazyColumn {
items(todos) { todo ->
Text(todo.title)
}
}
}
Here, your ViewModel pushes state and the Composable observes it. Simple. Clean. Easy to test.
JETPACK COMPOSE STORY READER APP An app that speak
🔁 What Is MVI?
MVI stands for Model-View-Intent. It’s inspired by reactive and functional programming (hello Redux fans!).
Model: The full UI state
View: Emits Intents (user actions)
Intent: Triggers an update to the Model
State: A single source of truth, often represented by a data class
🧠 How It Works in Compose:
data class TodoState(
val todos: List = emptyList(),
val isLoading: Boolean = false,
val error: String? = null
)
sealed class TodoIntent {
object LoadTodos : TodoIntent()
data class AddTodo(val title: String) : TodoIntent()
}
Composable observes TodoState, sends TodoIntent, and the ViewModel processes it via a reducer-style method.
🧪 Key Differences
| Feature | MVVM | MVI |
|---|---|---|
| State Handling | Multiple sources (LiveData, StateFlow) | Single immutable state |
| Unidirectional Flow | Optional | Strict |
| Complex UI State | Can get messy | Centralized in one class |
| Testing | ViewModel is easy to unit test | Slightly more boilerplate but predictable |
| Learning Curve | Easy for beginners | Takes time to grasp reducer pattern |
| Tooling Support | Works well with Jetpack ecosystem | No native tooling but clean logic |
💥 Real-World Analogy
Imagine you’re running a tea shop.
MVVM:
- You (UI) talk to your staff (ViewModel).
- Your staff manages orders and tells the kitchen (Model).
- They give you updates when tea is ready.
- Simple, but if the tea machine (state) is acting weird, you might get confused where the delay happened.
MVI:
- You write everything in a logbook (Intent: MakeTea, ServeTea, etc.)
- The logbook decides how to react, step by step.
- The state of the tea shop is always in one place.
- More setup, but very predictable and traceable.
✅ When to Use What?
| Use Case | Recommendation |
|---|---|
| 🚀 Small to Medium Apps | MVVM is perfect |
| 🔄 Complex UI State (forms, tabs, dynamic UI) | MVI gives better control |
| 🧪 You want testability and time travel debugging | MVI wins here |
| 🧠 Team already knows MVVM | Stick with MVVM for faster delivery |
| 🧱 You love functional programming | Try MVI—you’ll enjoy it! |
⚔️ My Personal Verdict (as a dev)
If you’re building apps like Notes, Recipes, or E-commerce, MVVM is quick, intuitive, and works beautifully with Jetpack Compose.
But if you’re working on something like a real-time dashboard, game UI, or forms with lots of branching logic, MVI helps you avoid future headaches.
Use the right tool for the right job. Architecture isn’t religion—it’s a strategy. 🧩
🎯 Final Thoughts
Jetpack Compose doesn’t force one pattern over another. That’s its beauty.
Whether you go MVVM or MVI, consistency and clean state management are what matter most.
How to use Firebase Google Sign in?
Let’s Build a Counter App using MVI
We understood what MVI (Model-View-Intent) is and how it brings structure and predictability to our Jetpack Compose apps.
Now, let’s build our first real app using MVI—a clean, reactive Counter App with increment, decrement, and reset features.
🎯 What We'll Build
A simple counter app with three buttons:
- ➕ Increase Count
- ➖ Decrease Count
- 🔁 Reset to Zero
We'll use:
- Immutable State
- Sealed Intent classes
- A ViewModel to process intents and update state
- Jetpack Compose for the UI
🧠 MVI Components Recap
Before diving into code, here's how MVI works:
| Component | Role |
|---|---|
| Intent | User actions (Button clicked, Text changed) |
| State | Full representation of the UI |
| ViewModel | Processes intents, updates state |
| View (UI) | Reads state, sends intents |
1. 📦 Create the UI State
data class CounterState(
val count: Int = 0
)2. 🚦 Define Intents
sealed class CounterIntent {
data object Increment : CounterIntent()
data object Decrement : CounterIntent()
data object Reset : CounterIntent()
}3. 🧠 ViewModel: The Reducer and State Flow
package com.example.codingcompose
import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
class CounterViewModel : ViewModel() {
private val _state = MutableStateFlow(CounterState())
val state: StateFlow = _state.asStateFlow()
fun onIntent(intent: CounterIntent) {
when (intent) {
is CounterIntent.Increment -> {
_state.value = _state.value.copy(count = _state.value.count + 1)
}
is CounterIntent.Decrement -> {
_state.value = _state.value.copy(count = _state.value.count - 1)
}
is CounterIntent.Reset -> {
_state.value = _state.value.copy(count = 0)
}
}
}
} 4. 🎨 UI in Jetpack Compose
package com.example.codingcompose
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
val state by viewModel.state.collectAsState()
Column(
modifier = Modifier
.fillMaxSize()
.padding(32.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Count: ${state.count}", fontSize = 32.sp,
fontWeight = FontWeight.Bold)
Spacer(modifier = Modifier.height(24.dp))
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
Button(onClick = { viewModel.onIntent(CounterIntent.Decrement) }) {
Text("➖")
}
Button(onClick = { viewModel.onIntent(CounterIntent.Reset) }) {
Text("🔁")
}
Button(onClick = { viewModel.onIntent(CounterIntent.Increment) }) {
Text("➕")
}
}
}
}🎉 Result
A smooth, reactive counter app that follows unidirectional flow with centralized state—this is the power of MVI.
Jetpack Compose Counter App using MVVM
Let’s rebuild the same Counter App using MVVM (Model-View-ViewModel), so you and your readers can compare both patterns clearly.
📦 MVVM Architecture
| Layer | Responsibility |
|---|---|
| Model | The data (we won’t need a backend for this simple app) |
| ViewModel | Holds business logic and exposes UI state |
| View (UI) | Displays UI and observes state from ViewModel |
✅ MVVM Counter App in Jetpack Compose
1. 🧠 ViewModel with MutableInState
package com.example.counterapp
import androidx.compose.runtime.IntState
import androidx.compose.runtime.mutableIntStateOf
import androidx.lifecycle.ViewModel
class CounterMvvmViewModel : ViewModel() {
private val _count = mutableIntStateOf(0)
val count: IntState = _count
fun increment() {
_count.intValue++
}
fun decrement() {
_count.intValue--
}
fun reset() {
_count.intValue = 0
}
}🔍 Simpler and more direct than MVI—each function mutates the state.
2. 🎨 Composable UI
package com.example.counterapp
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun CounterScreen(viewModel: CounterMvvmViewModel = viewModel()) {
val count = viewModel.count.intValue
Column(
modifier = Modifier
.systemBarsPadding()
.fillMaxSize()
.padding(32.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("Count: $count", fontSize = 32.sp)
Spacer(modifier = Modifier.height(24.dp))
Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
ExtendedFloatingActionButton(onClick = { viewModel.decrement() }) {
Text("➖")
}
ExtendedFloatingActionButton(onClick = { viewModel.reset() }) {
Text("🔁 Reset")
}
ExtendedFloatingActionButton(onClick = { viewModel.increment() }) {
Text("➕")
}
}
}
}OUTPUT:
🎯 My Final Thoughts
- Use MVVM when building quick, readable, smaller UIs.
- Use MVI when scaling to complex state, side-effects, or reactive patterns.
