Implementing MVVM Architecture with XML UI

While Jetpack Compose is revolutionizing Android UI development, many existing projects and developers still rely on XML layouts. Implementing the Model-View-ViewModel (MVVM) architecture with XML UIs provides a robust and maintainable structure for Android applications. This blog post delves into how to effectively implement MVVM architecture in Android using XML layouts.

What is MVVM Architecture?

MVVM stands for Model-View-ViewModel, an architectural pattern that separates the application into three interconnected parts:

• Model: Manages the data and business logic.
• View: The UI (XML layouts and Activities/Fragments) that displays the data and allows user interaction.
• ViewModel: Acts as a bridge between the Model and the View, exposing data needed by the View and handling user input.

Why Use MVVM with XML UI?

• Separation of Concerns: Simplifies development and testing by separating UI logic from business logic.
• Maintainability: Codebase becomes easier to maintain and update.
• Testability: Allows easier unit testing of the ViewModel without involving UI components.
• Reusability: The ViewModel can be reused across different Views.

Steps to Implement MVVM Architecture with XML UI

Step 1: Project Setup

Create a new Android project in Android Studio or open an existing project. Ensure you have the necessary dependencies.

Step 2: Add Dependencies

Add the required dependencies to your build.gradle file:

dependencies {
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
    implementation 'androidx.lifecycle:lifecycle-viewmodel:2.6.1'
    implementation 'androidx.lifecycle:lifecycle-livedata:2.6.1'
    annotationProcessor 'androidx.lifecycle:lifecycle-compiler:2.6.1'
}

These dependencies include:

• appcompat and constraintlayout for general Android support and layout constraints.
• lifecycle-extensions, lifecycle-viewmodel, and lifecycle-livedata for lifecycle-aware components.
• lifecycle-compiler for annotation processing, which is necessary for LiveData and ViewModel.

Make sure to sync the Gradle file after adding the dependencies.

Step 3: Define the Model

The Model represents the data layer. It can be a simple data class or a more complex class responsible for data fetching and management.

public class User {
    private String firstName;
    private String lastName;

    public User(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public String getFirstName() {
        return firstName;
    }

    public String getLastName() {
        return lastName;
    }
}

Step 4: Create the ViewModel

The ViewModel prepares and manages the data for the View. It also handles interactions from the View and updates the Model if necessary. The ViewModel should not hold references to the View.

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

public class UserViewModel extends ViewModel {
    private MutableLiveData<User> userLiveData = new MutableLiveData<>();

    public LiveData<User> getUser() {
        return userLiveData;
    }

    public void setUser(String firstName, String lastName) {
        User user = new User(firstName, lastName);
        userLiveData.setValue(user);
    }
}

Key points:

• UserViewModel extends ViewModel.
• userLiveData is a MutableLiveData that holds the User data. LiveData is a lifecycle-aware observable that updates the View when the data changes.
• getUser() returns a LiveData<User>.
• setUser() updates the userLiveData with new user data.

Step 5: Design the XML Layout (View)

The View is responsible for displaying the data and capturing user input. Use data binding to bind the View to the ViewModel. Data Binding simplifies connecting the ViewModel to the XML layout.

First, enable data binding in your module-level build.gradle file:

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

Then, create your XML layout:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.example.mvvmxml.UserViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:id="@+id/firstNameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.user.firstName}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="32dp"
            tools:text="First Name" />

        <TextView
            android:id="@+id/lastNameTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.user.lastName}"
            app:layout_constraintTop_toBottomOf="@+id/firstNameTextView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp"
            tools:text="Last Name" />

        <EditText
            android:id="@+id/firstNameEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="First Name"
            android:inputType="text"
            app:layout_constraintTop_toBottomOf="@+id/lastNameTextView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/lastNameEditText"
            android:layout_marginTop="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="8dp" />

        <EditText
            android:id="@+id/lastNameEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="Last Name"
            android:inputType="text"
            app:layout_constraintTop_toTopOf="@+id/firstNameEditText"
            app:layout_constraintStart_toEndOf="@+id/firstNameEditText"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="16dp" />

        <Button
            android:id="@+id/updateButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Update"
            app:layout_constraintTop_toBottomOf="@+id/firstNameEditText"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Notable elements in the layout file:

• <layout>: Wraps the layout and declares that it is a data binding layout.
• <data>: Defines variables that can be bound to the layout.
• <variable>: Declares a variable named viewModel of type com.example.mvvmxml.UserViewModel.
• @{viewModel.user.firstName} and @{viewModel.user.lastName}: Bind the text of TextView elements to the firstName and lastName properties of the User object in the ViewModel.

Step 6: Bind the View to the ViewModel in the Activity

In your Activity or Fragment, set up data binding and connect it to the ViewModel:

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.databinding.DataBindingUtil;
import androidx.lifecycle.ViewModelProvider;
import com.example.mvvmxml.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;
    private UserViewModel viewModel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        viewModel = new ViewModelProvider(this).get(UserViewModel.class);
        binding.setViewModel(viewModel);
        binding.setLifecycleOwner(this);

        binding.updateButton.setOnClickListener(v -> {
            String firstName = binding.firstNameEditText.getText().toString();
            String lastName = binding.lastNameEditText.getText().toString();
            viewModel.setUser(firstName, lastName);
        });
    }
}

Key parts of the Activity:

• DataBindingUtil.setContentView(this, R.layout.activity_main) inflates the layout and binds it to the Activity.
• viewModel = new ViewModelProvider(this).get(UserViewModel.class) retrieves or creates the UserViewModel.
• binding.setViewModel(viewModel) sets the ViewModel to the binding, allowing the layout to access the ViewModel’s properties.
• binding.setLifecycleOwner(this) sets the lifecycle owner for LiveData observations.
• The updateButton click listener updates the ViewModel with new user data from the EditText fields.

Additional Considerations

• Error Handling: Implement proper error handling within the ViewModel to manage and propagate exceptions.
• Asynchronous Operations: Use Kotlin Coroutines or RxJava for background tasks within the ViewModel to avoid blocking the main thread.
• Navigation: Use Android Navigation Component to manage navigation between Fragments or Activities within the MVVM architecture.

Conclusion

Implementing the MVVM architecture with XML UI provides a clean and maintainable approach to Android development. By separating concerns and utilizing data binding, developers can create robust applications that are easier to test and maintain. Although Jetpack Compose is gaining popularity, understanding and applying MVVM with XML UI remains crucial for many Android projects, ensuring best practices and scalability. Following the steps outlined above can greatly improve the architecture and overall quality of your Android applications.