Compose and Model binding

Roberto Orgiu
Jan 8 · 3 min read

Note: at the time of writing, Jetpack Compose has not yet been released to a stable channel, nor API surface has been finalised, hence everything might be subjected to changes.

When Compose was first announced, I was honestly super excited about moving away from XML to a clearer, more testable way of writing UI components on Android. I was also afraid that everything I learned was about to be useless, but I soon discovered it was not true at all.

The web is filled with examples on how to get started with this framework, but I want to focus on an aspect that made my life much easier in my last attempt, which is model binding.

Composing the UI

I wanted to create a very simple UI that would show me a ⛔ as a starting point and whenever internet was not detected on the ethernet, and a ✅ when the connection was instead available. This emoji would be displayed in the middle of the screen, big enough to be seen at a glance. A very simple UI for a very simple task.

The simple UI we are talking about

I can achieve this by using a Column with a Center arrangement flag, that would host a Row with a Center arrangement flag and ExpandedWidth modifier. This two items together will place my Text in the middle of the screen:

At this point, I needed a way to change the content based on the state of the network. As aforementioned, I exposed a LiveData, so it was only a matter of linking the change to the UI. Luckily enough, this could be achieved by annotating a class with the @Model class from the Compose framework:

With this annotation, instances of State will become observable, so that every component subjected to this class will be recomposed every time a change is performed.

This class is meant to be a state that represent the UI, and I decided to keep it as a private field inside the Activity , and pass it down to the drawing function so that it could be easily checked later on.

Of course, we needed to change the value inside the state according to the value emitted by the LiveData, but that could be achieved easily by observing the change:

Once the model gets updated, the same goes for the UI, as we simply need to pass the state to our function that will draw the components tree:

Now, the UI would react as soon as the value inside the LiveData changes.

Note: if I wanted to use a VectorDrawable instead of an emoji, this could be done by using the same logic used in one of the official samples.

Conclusion

I found binding the data much easier than expected, with only the need for a single annotation.

I’m super excited about Compose, and can’t wait to be using it on a day to day basis, kudos to the dev team!

Thanks to Daniele Bonaldo and Florina Muntenescu for proofreading this post.

Thanks to Daniele Bonaldo and Florina Muntenescu

Roberto Orgiu

Written by

Android developer and GDE for Android

Google Developers Experts

Experts on various Google products talking tech.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade