MVVM pattern in Android Kotlin - Mini App: Build & Ship

Build: Simple Counter MVVM

A screen that shows a number and a button to increase it using MVVM pattern.

Target UI

-------------------
|   Simple Counter  |
|                   |
|       0           |
|                   |
|   [ Increase ]    |
-------------------

Use MVVM architecture with ViewModel and LiveData

Display a number starting at 0

Increase number by 1 when button is clicked

Update UI automatically when number changes

Starter Code

Android Kotlin

package com.example.mvvmcounter

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.viewModels
import androidx.lifecycle.Observer
import com.example.mvvmcounter.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private val viewModel: CounterViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // TODO: Observe LiveData from ViewModel and update UI

        // TODO: Set button click listener to increase counter
    }
}

// TODO: Create CounterViewModel class with LiveData and increase function

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

package com.example.mvvmcounter

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.viewModels
import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModel
import com.example.mvvmcounter.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private val viewModel: CounterViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        viewModel.counter.observe(this, Observer { count ->
            binding.textViewCounter.text = count.toString()
        })

        binding.buttonIncrease.setOnClickListener {
            viewModel.increaseCounter()
        }
    }
}

class CounterViewModel : ViewModel() {
    private val _counter = MutableLiveData(0)
    val counter: LiveData<Int> = _counter

    fun increaseCounter() {
        _counter.value = (_counter.value ?: 0) + 1
    }
}

This solution uses the MVVM pattern by separating UI logic and data logic.

The CounterViewModel holds the counter data as LiveData. It starts at 0 and has a method to increase the count.

The MainActivity observes the LiveData from the ViewModel. When the counter changes, the UI text updates automatically.

The button click calls the ViewModel's increase method, keeping UI and data separate and reactive.

Final Result

Completed Screen

-------------------
|   Simple Counter  |
|                   |
|       0           |
|                   |
|   [ Increase ]    |
-------------------

When user taps 'Increase' button, the number increments by 1

The displayed number updates immediately without manual UI refresh

Stretch Goal

Add a Reset button that sets the counter back to 0

💡 Hint

Add another button in the layout and a resetCounter() method in ViewModel that sets MutableLiveData to 0

Practice

1. What is the main role of the ViewModel in the MVVM pattern?

easy

A. To render the UI components on the screen

B. To directly handle user input events and update the UI

C. To store raw data from the database without any processing

D. To hold and manage UI-related data and expose it to the View

Solution

1. Step 1: Understand ViewModel responsibility

   The ViewModel holds UI data and prepares it for the View, separating UI logic from data sources.

2. Step 2: Differentiate ViewModel from other components

   The View handles UI rendering and user input, while the Model manages raw data. ViewModel acts as a bridge.

3. Final Answer:

   To hold and manage UI-related data and expose it to the View -> Option D

4. Quick Check:

   ViewModel = UI data holder [OK]

Hint: ViewModel holds data for UI, not UI itself [OK]

Common Mistakes:

• Confusing ViewModel with View
• Thinking ViewModel handles UI rendering
• Assuming ViewModel stores raw database data only

2. Which of the following is the correct way to observe LiveData in a Kotlin Android View (Activity or Fragment)?

easy

A. viewModel.data.observe(this, Observer { value -> updateUI(value) })

B. viewModel.data.observeForever { value -> updateUI(value) }

C. viewModel.data.observe { value -> updateUI(value) }

D. viewModel.data.observe(this)

Solution

1. Step 1: Recall LiveData observe syntax

   LiveData.observe requires a LifecycleOwner and an Observer object or lambda with explicit Observer.

2. Step 2: Identify correct Kotlin syntax

   viewModel.data.observe(this, Observer { value -> updateUI(value) }) uses the correct method signature with LifecycleOwner and Observer lambda.

3. Final Answer:

   viewModel.data.observe(this, Observer { value -> updateUI(value) }) -> Option A

4. Quick Check:

   LiveData.observe needs LifecycleOwner + Observer [OK]

Hint: Use observe(this, Observer { }) in Kotlin [OK]

Common Mistakes:

• Using observeForever in UI components
• Omitting Observer wrapper in observe call
• Passing lambda without LifecycleOwner

3. Given this ViewModel code snippet, what will be the output when increment() is called twice?

class CounterViewModel : ViewModel() {
  private val _count = MutableLiveData(0)
  val count: LiveData<Int> = _count

  fun increment() {
    _count.value = (_count.value ?: 0) + 1
  }
}

medium

A. The count LiveData will have value 2

B. The count LiveData will have value 1

C. The count LiveData will have value 0

D. The code will cause a runtime error

Solution

1. Step 1: Understand initial LiveData value

   The MutableLiveData _count starts at 0.

2. Step 2: Trace increment calls

   Each increment adds 1 to current value: first call sets 1, second call sets 2.

3. Final Answer:

   The count LiveData will have value 2 -> Option A

4. Quick Check:

   0 + 1 + 1 = 2 [OK]

Hint: Increment adds 1 each call, so two calls = 2 [OK]

Common Mistakes:

• Assuming LiveData does not update value
• Forgetting initial value is 0
• Thinking LiveData is immutable

4. Identify the error in this ViewModel code snippet:

class UserViewModel : ViewModel() {
  val userName = MutableLiveData<String>()

  fun updateName(newName: String) {
    userName.value = newName
  }

  fun getName(): String {
    return userName.value!!
  }
}

medium

A. Using MutableLiveData instead of LiveData

B. Forcing non-null with !! on possibly null value

C. Not initializing userName with a default value

D. Missing observer for userName LiveData

Solution

1. Step 1: Analyze getName() method

   It returns userName.value!! which forces non-null but value can be null initially.

2. Step 2: Identify risk of NullPointerException

   If userName.value is null, !! causes crash. This is unsafe without default or null check.

3. Final Answer:

   Forcing non-null with !! on possibly null value -> Option B

4. Quick Check:

   !! on nullable LiveData value risks crash [OK]

Hint: Avoid !! on LiveData.value without null check [OK]

Common Mistakes:

• Ignoring null safety on LiveData values
• Assuming LiveData always has value
• Confusing MutableLiveData with LiveData usage

5. You want to fetch user data from a remote API and update the UI using MVVM. Which approach correctly separates concerns and updates the UI safely?

1. Repository fetches data asynchronously
2. ViewModel exposes LiveData for user data
3. View observes LiveData and updates UI

Which code snippet fits this pattern?

hard

A. View directly calls repository fetch and updates UI without ViewModel

B. Repository updates UI directly after fetching data

C. ViewModel calls repository fetch, updates MutableLiveData; View observes LiveData to update UI

D. ViewModel updates UI components directly after fetching data

Solution

1. Step 1: Understand MVVM data flow

   Repository handles data fetching, ViewModel holds data and exposes LiveData, View observes LiveData to update UI.

2. Step 2: Match correct separation of concerns

   Only ViewModel calls repository fetch, updates MutableLiveData; View observes LiveData to update UI follows this flow: ViewModel updates LiveData, View observes it, no direct UI updates in ViewModel or Repository.

3. Final Answer:

   ViewModel calls repository fetch, updates MutableLiveData; View observes LiveData to update UI -> Option C

4. Quick Check:

   Repository -> ViewModel -> LiveData -> View [OK]

Hint: Data flows Repository -> ViewModel -> LiveData -> View [OK]

Common Mistakes:

• Updating UI directly in Repository or ViewModel
• View fetching data directly
• Not using LiveData for UI updates