Improving UX with Android ViewModel Architecture Component

Google launched Android Architecture Components in 2017, a collection of libraries that help you design robust, testable, and maintainable apps. Now widely adopted.

Coding benefits aside, these components can also be seen from a UX point of view.

This article will not go into detail of coding benefits and implementation (I will add links to recommended articles intended for that).
Focus will be on the UX strategies around these architecture components.

ViewModel

Lifecycle of a ViewModel

ViewModel architecture component stores and manages UI related data in a lifecycle conscious manner. In short, ViewModel lets you easily resume application in same state even when it was in background for a long time. You can learn more from official doc or this simple example.

On the UX front, ViewModel is great for –

1. Designing for device orientation

A simple app with scoring. Without the ViewModel the scores stored in activity are lost on orientation change. From simple example.

Master-Detail interface is providing an extended layout in horizontal orientation. It is very intuitive for a tablet user to expect an extended layout with more controls and details in landscape orientation, and not finding one is a UX kill.

And for some, readability or typing is just better in landscape.

ViewModel allows to persist data and its state after screen orientation changes, which is a re-configuration of the view. Which otherwise is tedious.

2. Designing for content engagement

9GAG app checks for new content in the background, and prompts for a refresh by ‘New Posts’ bubble when available.

A lively app having real-time updates, has much better
engagement then the stale one.

A simple ‘New Posts’ bubble can make wonders on engagement metrics. Pull-to-refresh on its own will not encourage refresh.

ViewModel provides a layer to run this async job to request/refresh data in background.
Following SoC, it also improves testability, maintainability and efficiency of the ViewController using it.

ViewModel also returns observable data, for easily updating UI elements related with it. eg–

val model: MyViewModel by viewModels()
model.getUsers().observe(this, Observer<List<User>>{ users ->
   // update UI
})

3. Designing for continuity in App’s UI

Ever notice how your eyes like to travel along lines, following and flowing with them? This is the principle of continuity, one of the five from Gestalt’s Principle for UI/UX.

Profile-image card and profile details bottomsheet essentially has the same data source. credits: link

For continuity, master-detail layout and even in general it is common that two or more fragments in an activity need to communicate with each other or share data. It is a tedious implementation when both fragments needs to check for each other’s lifecycle.

This pain point can be solved by ViewModel objects. As both fragments can share same ViewModel. Learn more in docs.

Also read this story from the same series

Improving UX with Android Architecture Component: LiveData

Drop a comment if you need any help or sample code for implementing above mentioned UX benefits using ViewModel.

I am one of the co-founders of Zuka Technologies — A Software Development Company, based out of Pune, India. You can follow our Medium Blog to find more articles on Android, iOS, Backend Technologies, Cloud Infra, DevOps, Blockchain and AI/ML, based on our experience from the numerous projects we developed over the years.