Advanced Android Development: MVVM Architecture

In the previous chapter, we explored Android Jetpack components in depth—powerful tools that significantly enhance our app development capabilities. In this chapter, we’ll discuss how to build maintainable and scalable Android applications using the MVVM (Model-View-ViewModel) architecture.

What Is the MVVM Architecture?

MVVM (Model-View-ViewModel) is a software design pattern that separates UI logic from business logic. Within this pattern:

• Model: Represents the application’s data layer—including data structures and business logic.
• View: The user interface responsible for displaying data and forwarding user input to the ViewModel.
• ViewModel: Acts as an intermediary between the View and Model. It handles UI-related logic and exposes observable data to the View.

Advantages of MVVM

1. Separation of Concerns: Leads to cleaner, more modular, and easier-to-maintain code.
2. Testability: By decoupling the View and Model, business logic becomes straightforward to unit-test independently of UI components.
3. Enhanced Reusability: Independent View and ViewModel components can be reused across different screens or even different projects.

Implementing MVVM in Android

To implement MVVM on Android, we typically leverage ViewModel and LiveData from Android Architecture Components. Below, we walk through a practical implementation using a simple To-Do List app.

1. Creating the Data Model

First, define a lightweight ToDo data class:

data class ToDo(
    val id: Int,
    val task: String,
    var isCompleted: Boolean
)

2. Creating the ViewModel

Next, create a ViewModel to encapsulate UI logic and manage data:

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class ToDoViewModel : ViewModel() {
    private val _toDoList = MutableLiveData<List<ToDo>>()

    val toDoList: LiveData<List<ToDo>>
        get() = _toDoList

    init {
        // Initialize sample data
        _toDoList.value = listOf(
            ToDo(1, "Learn MVVM", false),
            ToDo(2, "Update resume", false),
            ToDo(3, "Grocery shopping", false)
        )
    }

    fun toggleComplete(toDo: ToDo) {
        val currentList = _toDoList.value ?: return
        val updatedList = currentList.map {
            if (it.id == toDo.id) it.copy(isCompleted = !it.isCompleted) else it
        }
        _toDoList.value = updatedList
    }
}

3. Creating the View

In your Activity or Fragment, observe the ViewModel’s data and update the UI accordingly:

import android.os.Bundle
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Observer
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    private val viewModel: ToDoViewModel by viewModels()
    private lateinit var recyclerView: RecyclerView
    private lateinit var adapter: ToDoAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView = findViewById(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)
        adapter = ToDoAdapter { toDo ->
            viewModel.toggleComplete(toDo)
        }
        recyclerView.adapter = adapter

        // Observe changes to the to-do list
        viewModel.toDoList.observe(this, Observer { toDoList ->
            adapter.submitList(toDoList)
        })
    }
}

4. Creating the RecyclerView Adapter

Implement a ListAdapter to efficiently display the ToDo list:

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter
import androidx.recyclerview.widget.RecyclerView

class ToDoAdapter(private val onClick: (ToDo) -> Unit) :
    ListAdapter<ToDo, ToDoAdapter.ToDoViewHolder>(ToDoDiffCallback()) {

    class ToDoViewHolder(itemView: View, val onClick: (ToDo) -> Unit) : RecyclerView.ViewHolder(itemView) {
        private val taskTextView: TextView = itemView.findViewById(R.id.taskTextView)

        fun bind(toDo: ToDo) {
            taskTextView.text = toDo.task
            itemView.setOnClickListener { onClick(toDo) }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ToDoViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_todo, parent, false)
        return ToDoViewHolder(view, onClick)
    }

    override fun onBindViewHolder(holder: ToDoViewHolder, position: Int) {
        holder.bind(getItem(position))
    }
}

class ToDoDiffCallback : DiffUtil.ItemCallback<ToDo>() {
    override fun areItemsTheSame(oldItem: ToDo, newItem: ToDo): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: ToDo, newItem: ToDo): Boolean {
        return oldItem == newItem
    }
}

5. Layout Files

Define the main activity layout (activity_main.xml) with a RecyclerView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

And define each item’s layout (item_todo.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/taskTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Summary

In this chapter, we covered the core principles of the MVVM architecture and demonstrated its practical implementation in Android. Using ViewModel and LiveData, we built a functional To-Do List app that observes and reacts to data changes in a clean, lifecycle-aware way.

In the next chapter, we’ll explore how