Mvvm Pattern | App Architecture | Android Development Tutorial

Introduction

MVVM (Model-View-ViewModel) is a software architectural pattern that facilitates separation of development of the graphical user interface (GUI) from the business logic or back-end logic (the data model), so that the view is not dependent on any specific model platform. This pattern is particularly useful in Android development as it provides a clear structure for the project and helps in achieving better code reusability and maintainability.

Components of MVVM

The MVVM pattern consists of three main components:

Model: This layer represents the data and business logic of the application. It is responsible for handling the data operations and does not depend on the View or ViewModel.
View: This layer represents the UI components like Activities and Fragments. It displays the data and sends user actions to the ViewModel.
ViewModel: This layer acts as a bridge between the View and the Model. It retrieves the data from the Model and formats it for display in the View. It also handles user interactions and updates the Model accordingly.

Setting Up MVVM in an Android Project

Let's set up a simple MVVM structure in an Android project. We'll create a sample application to demonstrate this pattern.

Step-by-Step Implementation

Step 1: Create a New Android Project

Create a new Android project in Android Studio and set up your environment.

File -> New -> New Project

Step 2: Add Dependencies

Add the necessary dependencies for ViewModel and LiveData in your build.gradle file:

implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'

Step 3: Create the Model

Create a simple data model class:

public class User {
    private String name;
    private String email;

    public User(String name, String email) {
        this.name = name;
        this.email = email;
    }

    public String getName() {
        return name;
    }

    public String getEmail() {
        return email;
    }
}

Step 4: Create the ViewModel

Create a ViewModel class to hold the user data:

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

public class UserViewModel extends ViewModel {
    private MutableLiveData userLiveData;

    public UserViewModel() {
        userLiveData = new MutableLiveData<>();
    }

    public LiveData getUser() {
        return userLiveData;
    }

    public void setUser(User user) {
        userLiveData.setValue(user);
    }
}

Step 5: Create the View

Update the UI components (Activity/Fragment) to observe the ViewModel data:

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProvider;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private UserViewModel userViewModel;
    private TextView userNameTextView;
    private TextView userEmailTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        userNameTextView = findViewById(R.id.userNameTextView);
        userEmailTextView = findViewById(R.id.userEmailTextView);

        userViewModel = new ViewModelProvider(this).get(UserViewModel.class);

        userViewModel.getUser().observe(this, new Observer() {
            @Override
            public void onChanged(User user) {
                if (user != null) {
                    userNameTextView.setText(user.getName());
                    userEmailTextView.setText(user.getEmail());
                }
            }
        });

        // Set a sample user
        userViewModel.setUser(new User("John Doe", "john.doe@example.com"));
    }
}

Step 6: Update the Layout

Update the layout file activity_main.xml to include TextViews for displaying user data:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/userNameTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/userEmailTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email"
        android:textSize="18sp"/>

</LinearLayout>

Conclusion

By following the MVVM pattern, you can create a more modular and testable codebase in your Android applications. The separation of concerns allows you to manage the UI and business logic independently, making the code easier to maintain and extend.

We hope this tutorial has given you a good understanding of the MVVM pattern and how to implement it in your Android projects.

MVVM Pattern in Android Development