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.
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
Note: if I wanted to use a
VectorDrawableinstead of an emoji, this could be done by using the same logic used in one of the official samples.
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!