Introduction
In the Android world, architecture seems to be something a lot of us care deeply about. Different engineers have different preferences for the many architectural styles out there such as MVC (Model-View-Controller), MVVM(Model-View-ViewModel) and MVI (Model-View-Intent) . We all have our preferences amongst these three and I'm not going to debate the merits of one over the other. However, I'd like to explain how we can use the MVI architecture efficiently with data binding.
Concepts Of MVI Architecture
ViewState: This is part of the model layer of MVI, and our view observes this model for state changes. It should represent the current state of the view at any given time. It should be immutable. Every time the view needs to be updated as a result of a user action, we will expose a modified copy of the previous ViewState. The ViewState will have a result based on MutableLiveData.
ViewEffect: This is also part of the model layer of MVI. There are certain actions in Android development that we do not want the results to be re-emitted whenever the view is recreated probably due to a configuration change. Actions such as navigating to another screen, showing a toast or a dialog. Our view will thereby observe ViewEffects which is based on SingleLiveEvent for actions that are more or less fire and forget.
Intent: This represents all user actions/events performed on the view such as a click event, swipe event etc. These events are passed to the ViewModel as the user intent.
So in summary, the ViewModel takes input via intents, and gives output via ViewState and ViewEffect.
ViewEffect: This is also part of the model layer of MVI. There are certain actions in Android development that we do not want the results to be re-emitted whenever the view is recreated probably due to a configuration change. Actions such as navigating to another screen, showing a toast or a dialog. Our view will thereby observe ViewEffects which is based on SingleLiveEvent for actions that are more or less fire and forget.
Intent: This represents all user actions/events performed on the view such as a click event, swipe event etc. These events are passed to the ViewModel as the user intent.
So in summary, the ViewModel takes input via intents, and gives output via ViewState and ViewEffect.
Base Components
So let's set up our base components so that we can reuse them across board in our codebase
Firstly, we will create a data state as a sealed class which will act as a wrapper for all our view states
Firstly, we will create a data state as a sealed class which will act as a wrapper for all our view states
//T represents our ViewState
sealed class DataState<out T> {
data class Success<T>(val data: T?) : DataState<T>()
data class Error<T>(val data: T?, val exception: Exception) : DataState<T>()
data class Loading<T>(val data: T?) : DataState<T>()
//Helper methods that make it easy to access the sealed class contents in xml data binding
fun toData(): T? = when (this) {
is Success -> this.data
is Error -> this.data
is Loading -> this.data
}
fun isLoading(): Boolean? = if (this is Loading) true else null
fun toErrorMessage(): String? = if (this is Error) this.exception.message else null
}
Secondly, we will create a BaseViewModel that will be the backbone holding all our MVI components together
//T represents our ViewState
//U represents our ViewEffect
abstract class BaseViewModel<T, U> : ViewModel() {
//It will be accessed by child classes to update the view states
protected val _dataStates: MutableLiveData<DataState<T>> = MutableLiveData()
//Will be accessed by the view to observe view state updates
val dataStates: LiveData<DataState<T>> = _dataStates
//It will be accessed by child classes to update the view effects
protected val _viewEffects: SingleLiveEvent<U> = SingleLiveEvent()
//It will be accessed by the view to observe view effects updates
val viewEffects: SingleLiveEvent<U> = _viewEffects
//This is a wrapper for making network/room calls (use the latest version of room and retrofit that supports suspend functions)
//This way we don't have to manually set our error and loading states in our child view models.
protected fun launchRequest(block: suspend () -> Unit): Job {
val currentViewState = getViewState()
return viewModelScope.launch {
try {
_dataStates.postValue(DataState.Loading(currentViewState))
block()
} catch (exception: Exception) {
_dataStates.postValue(DataState.Error(currentViewState, exception))
}
}
}
protected fun getViewState() : T? = _dataStates.value?.toData()
}
Here's a snippet of the SingleLiveEvent that allows us to emit an update for a liveData once, even when there is a configuration change.
class SingleLiveEvent<T> : MutableLiveData<T>() {
private val mPending = AtomicBoolean(false)
@MainThread
override fun observe(owner: LifecycleOwner, observer: Observer<in T>) {
if (hasActiveObservers()) {
Log.w(TAG, "Multiple observers registered but only one will be notified of changes.")
}
// Observe the internal MutableLiveData
super.observe(owner, Observer { t ->
if (mPending.compareAndSet(true, false)) {
observer.onChanged(t)
}
})
}
@MainThread
override fun setValue(t: T?) {
mPending.set(true)
super.setValue(t)
}
/**
* Used for cases where T is Void, to make calls cleaner.
*/
@MainThread
fun call() {
value = null
}
operator fun invoke() {
call()
}
operator fun invoke(data: T) {
value = data
}
companion object {
private val TAG = "SingleLiveEvent"
}
}
What is Next?
Now that we have our base components ready, let's pretend we are building a simple view with 3 buttons, a textview and a recyclerView. The user has to click on a button to view a list of wallet transactions. The user also has to click on a button to view the wallet amount and we would like the user to navigate to the next screen after clicking the next button.
Let's pretend our WalletListItem looks like this:
Let's pretend our WalletListItem looks like this:
data class WalletListItem (
val amount: String,
val type: String
)
Let's pretend our retrofit service looks something like this:
interface WalletService {
@GET
suspend fun getWalletAmount(): String
@GET
suspend fun getWalletList(): List<WalletListItem>
}
I'll be skipping all the other hoops you probably have to add to your flow such as use cases and repositories. Then we can have a user intent that looks like this:
sealed class WalletIntent {
object GetWalletListEvent(): WalletIntent()
object GetWalletAmountEvent(): WalletIntent()
object OnNextEvent(): WalletIntent()
}
Our ViewState will look like this:
data class WalletViewState(
val walletItems: List<WalletListItem>? = null,
val walletAmount: String? = null
)
Our ViewEffect will look like this:
sealed class WalletViewEffect {
object NavigateToNextScreen : WalletViewEffect()
}
Our ViewModel will then look like this:
class WalletViewModel constructor(private val walletService: WalletService) : BaseViewModel<WalletViewState, WalletViewEffect>() {
init { //set default for the view state
_dataStates.postValue(DataState.Success(WalletViewState()))
}
//User related actions will trigger this method
fun setIntent(intent: WalletIntent) {
when (intent) {
is WalletIntent.GetWalletListEvent -> getWalletList()
is WalletIntent.GetWalletAmountEvent -> getWalletAmount()
is WalletIntent.OnNextEvent -> navigateToNextScreen()
}
}
private fun getWalletList() {
val currentViewState = getViewState()
launchRequest {
val walletItems = walletService.getWalletList()
val newViewState = currentViewState?.copy(walletItems = walletItems)
_dataStates.postValue(DataState.Success(newViewState))
}
}
private fun getWalletAmount() {
val currentViewState = getViewState()
launchRequest {
val walletAmount = walletService.getWalletAmount()
val newViewState = currentViewState?.copy(walletAmount = walletAmount)
_dataStates.postValue(DataState.Success(newViewState))
}
}
private fun navigateToNextScreen() {
_viewEffects.postValue(WalletViewEffect.NavigateToNextScreen)
}
}
Then our XML will look like this:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<import type="android.view.View" />
<variable
name="viewModel"
type="com.example.WalletViewModel" />
<variable
name="onGetWalletAmountEvent"
type="com.example.WalletIntent.GetWalletAmountEvent" />
<variable
name="onGetWalletListEvent"
type="com.example.WalletIntent.GetWalletListEvent" />
<variable
name="onNextEvent"
type="com.example.WalletIntent.OnNextEvent" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.WalletFragment">
<Button
android:id="@+id/button_get_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="40dp"
android:onClick="@{() -> viewModel.setIntent(onGetWalletAmountEvent)}"
android:text="Get Amount"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/amountTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:text="@{viewModel.dataStates.toData().walletAmount}"
app:layout_constraintStart_toEndOf="@+id/button_get_amount"
app:layout_constraintTop_toTopOf="@+id/button_get_amount" />
<Button
android:id="@+id/button_get_wallet_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:onClick="@{() -> viewModel.setIntent(onGetWalletListEvent)}"
android:text="Get Wallet List"
app:layout_constraintStart_toStartOf="@+id/button_get_amount"
app:layout_constraintTop_toBottomOf="@+id/button_get_amount" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:data="@{viewModel.dataStates.toData().walletItems}"
app:layout_constraintStart_toStartOf="@+id/button_get_wallet_list"
app:layout_constraintTop_toBottomOf="@+id/button_get_wallet_list" />
<Button
android:id="@+id/button_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="128dp"
android:onClick="@{() -> viewModel.setIntent(onNextEvent)}"
android:text="Next"
app:layout_constraintStart_toStartOf="@+id/recyclerView"
app:layout_constraintTop_toBottomOf="@+id/recyclerView" />
<TextView
android:id="@+id/label_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="@{viewModel.dataStates.toErrorMessage()}"
app:layout_constraintStart_toStartOf="@+id/button_next"
app:layout_constraintTop_toBottomOf="@+id/button_next" />
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="@{viewModel.dataStates.isLoading() ? View.VISIBLE : View.GONE}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>Finally, our fragment will look like this:
class WalletFragment : Fragment() {
private val viewModel: WalletViewModel by viewModels()
private lateinit var binding: WalletFragmentBinding
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = WalletFragmentBinding.inflate(inflater, container, false)
binding.lifecycleOwner = viewLifecycleOwner
binding.viewModel = viewModel
binding.onGetWalletAmountEvent = WalletIntent.GetWalletAmountEvent
binding.onGetWalletListEvent = WalletIntent.GetWalletListEvent
binding.onNextEvent = WalletIntent.OnNextEvent
return binding.root
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
viewModel.viewEffects.observe(viewLifecycleOwner, Observer { onViewEffectReceived(it) })
//If you want you can decide to handle your view state changes by simply observing it
viewModel.dataStates.observe(viewLifecycleOwner, Observer { onDataStateReceived(it) })
}
private fun onViewEffectReceived(it: WalletViewEffect?) {
when (it) {
is WalletViewEffect.NavigateToNextScreen -> navigateToNextScreen()
}
}
private fun onDataStateReceived(it: DataState<WalletViewState>) {
when (it) {
is DataState.Error -> { }
is DataState.Loading -> { }
is DataState.Success -> { }
}
}
private fun navigateToNextScreen() {}
}Conclusion
Please play around with the above and actually try to do something small with it so you can see the concept come to life. If you like being in an environment that cares about software architecture and best practices, you should consider joining our team at Oozou.
Looking for a new challenge? Join Our Team
