Tips on how to use MVVM in your Android initiatives
I simply began enjoying round with the Jetpack Compose APIs and the datastore and I discover it actually helpful to make use of.
Let’s make a easy demo app the place we’ll have bidirectional(2-way) stream of knowledge.
We’ll be utilizing MVVM as structure for our little challenge, utilizing Jetpack compose library and Datastore library. Coroutines is available in right here as pure half. Let’s begin!
That is what our demo app will appear like:
Our principal structure seems like this:
We see how our 2 means stream seems like. On the left aspect, we now have the view the place on person interplay the information is modified, then the
ViewModel forwards this modified information to the datastore and there the brand new information its endured.
As quickly as the information is endured to the
Datastore it emits a brand new information stream and that is forwarded again to the View and UI may be up to date. That is actually easy resolution and there’s no want for boilerplate code for subscribing/observing/binding views with
The UI chances are high triggered with each emit on the stream information. And that is triggered with each UI change adopted by
//Composable UI factor that handles onTextChangeAction
onTextChangeAction: (dataString: String) -> Unit
val textAnswerState = keep in mind
Floor(coloration = MaterialTheme.colours.background)
Spacer(modifier = Modifier.top(16.dp))
Spacer(modifier = Modifier.top(32.dp))
"enter settings textual content",
//Exercise|Fragment view setting the composable
) dataString ->
//ViewModel interplay with the datastore.viewModelScope.launch
The code proven above exhibits how the UI parts are positioned. We have now one composable factor outlined
DataStorePlaygroundActivityComponent the place the textual content that’s saved is displayed on textual content view and there may be additionally motion which known as when person interplay is finished (change of the textual content in TextField element). Afterward, the
ViewModel simply forwards the brand new worth to the datastore.
As quickly as the brand new worth is endured within the datastore new worth is straight away emitted and propagated to the view. Listed below are some code snippets:
//Movement information from the datastore
override val customTextData: Movement<String>
get() = App.applicationContext().dataStore.information
.map preferences ->
preferences[customTextKey] ?: CUSTOM_TEXT_SETTINGS_DEFAULT_VALUE
//Listening the the stream throughout the ViewModel
localDataStore.customTextData.gather information ->
mutableFlowData.worth = LatestDataUiState.Success(information)
//Information class for UI state
sealed class LatestDataUiState
information class Success(val tempString: String): LatestDataUiState()
information class Error(val exception: Throwable): LatestDataUiState()
dataStoreViewModel?.uiStateFlow?.gather uiState ->
// New worth acquired
is LatestDataUiState.Success -> showSuccessUI(uiState.tempString)
is LatestDataUiState.Error -> showErrorUI(uiState.exception)
The code snipped above exhibits how the view is related with the information stream and when new UI information is acquired the re-compose is occurring.
And that is it! The code is basically small in comparison with different patterns. The total code may be discovered here.
Need to Join?If you're I’ve developed a easy puzzle app utilizing Jetpack elements. Test it out here.