Using Kotlin Sealed Classes in XML-Based ViewModel

Kotlin sealed classes are a powerful feature for representing restricted class hierarchies. When working with Android’s XML-based layouts and ViewModels, you might encounter scenarios where using sealed classes can enhance the way you handle UI states or events. While traditionally associated with more modern UI architectures like Jetpack Compose, Kotlin sealed classes can bring significant benefits even in an XML-based ViewModel setup.

What are Kotlin Sealed Classes?

Sealed classes in Kotlin represent a restricted class hierarchy. All subclasses must be declared in the same file as the sealed class itself. This offers more control over inheritance, making the code more predictable and easier to manage. Sealed classes are especially useful for representing states in a UI or results from an operation.

Why Use Sealed Classes with XML-Based ViewModel?

• State Management: Effectively model UI states (e.g., Loading, Success, Error) with exhaustive ‘when’ statements.
• Code Readability: Enhances code clarity by explicitly defining all possible states or outcomes.
• Compile-Time Safety: Ensures all cases are handled when using ‘when’ expressions, preventing unexpected runtime errors.

How to Integrate Kotlin Sealed Classes in XML-Based ViewModel

Here’s a step-by-step guide on how to use Kotlin sealed classes in an XML-based Android project with a ViewModel:

Step 1: Define the Sealed Class

Start by defining a sealed class to represent the different states of your UI. For example, consider a scenario where you’re fetching data from an API:

sealed class DataState {
    object Loading : DataState()
    data class Success(val data: String) : DataState()
    data class Error(val message: String) : DataState()
}

In this example:

• Loading represents the state when data is being fetched.
• Success contains the fetched data.
• Error represents a failure in fetching data along with an error message.

Step 2: Create the ViewModel

Create a ViewModel that uses the sealed class to manage its state. This ViewModel will update the DataState based on the result of the data-fetching operation.

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MyViewModel : ViewModel() {
    private val _dataState = MutableLiveData()
    val dataState: LiveData = _dataState

    fun fetchData() {
        _dataState.value = DataState.Loading

        viewModelScope.launch {
            try {
                // Simulate fetching data from a remote source
                delay(2000)
                val result = "Data fetched successfully!"
                _dataState.value = DataState.Success(result)
            } catch (e: Exception) {
                _dataState.value = DataState.Error("Failed to fetch data: ${e.message}")
            }
        }
    }
}

Explanation:

• _dataState is a MutableLiveData holding the current DataState.
• dataState is a public LiveData to observe the state from the UI.
• fetchData() simulates fetching data and updates _dataState accordingly.

Step 3: Observe the DataState in Your Activity/Fragment

In your Activity or Fragment, observe the dataState and update the UI based on the current state. Since you’re working with XML-based layouts, data binding can simplify this process.

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

android {
    buildFeatures {
        dataBinding true
    }
}

Next, update your layout file to use data binding:

<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.myapp.MyViewModel" />
        <variable
            name="dataState"
            type="com.example.myapp.DataState" />
    </data>

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

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            android:text="@{dataState instanceof com.example.myapp.DataState.Loading ? `Loading...` :
                         dataState instanceof com.example.myapp.DataState.Success ? `Success: ` + ((com.example.myapp.DataState.Success) dataState).data :
                         dataState instanceof com.example.myapp.DataState.Error ? `Error: ` + ((com.example.myapp.DataState.Error) dataState).message :
                         `Initial State`}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Initial State" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Fetch Data"
            android:onClick="@{() -> viewModel.fetchData()}"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

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

Explanation of the layout file:

• Data Binding: The layout is wrapped with <layout> tags to enable data binding.
• Variables: The viewModel and dataState variables are declared to bind data from the ViewModel to the UI.
• TextView: The text attribute is conditionally set based on the current dataState. It displays “Loading…” when the state is Loading, the data when the state is Success, and the error message when the state is Error.
• Button: The onClick attribute calls the fetchData() method on the ViewModel when the button is clicked.

Finally, in your Activity or Fragment, set up the data binding and observe the dataState:

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

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: MyViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this)[MyViewModel::class.java]

        binding.viewModel = viewModel
        binding.lifecycleOwner = this

        viewModel.dataState.observe(this) { dataState ->
            binding.dataState = dataState
        }
    }
}

Key parts of the Activity:

• Data Binding Setup: DataBindingUtil.setContentView inflates the layout and sets up the data binding.
• ViewModel Initialization: The ViewModel is retrieved using ViewModelProvider.
• Binding Variables: The ViewModel and LifecycleOwner are set in the binding.
• Observe DataState: The dataState LiveData is observed, and any changes are reflected in the UI via data binding.

Benefits of This Approach

• Clear State Representation: Using sealed classes ensures all possible states are explicitly defined and handled.
• Centralized State Management: The ViewModel is responsible for managing the UI state, making the Activity/Fragment cleaner.
• Data Binding Integration: Data binding simplifies the process of updating the UI based on the current state.

Considerations

• Complexity: Using data binding might add some complexity to the XML layouts, especially with complex conditional logic.
• Learning Curve: Data binding and LiveData might have a learning curve if you’re not already familiar with them.

Conclusion

Using Kotlin sealed classes with an XML-based ViewModel in Android can greatly improve the way you manage UI states. While this approach may require enabling data binding and working with LiveData, the benefits of clear state representation and centralized management often outweigh the costs. This pattern is particularly valuable in applications with complex UI logic where maintaining a clear and predictable state is critical. By leveraging Kotlin’s modern features within the traditional XML framework, you can achieve a more robust and maintainable architecture.