From Data to UI : Jetpack Compose Phases
Introduction
Jetpack Compose is a modern declarative UI Toolkit for Android. We provide specific state data for composition. It will handle everything and create the desired UI.
For us, all we need to do is to call the composable functions and pass required data in it.
If we go a little deeper, it develops the UI in three phases.
In this blog, we are going to discuss these three phases.
Three Phases of Jetpack Compose Phases
There are three data transformation phases :
- Composition : What ?
- Layout : Where ?
- Drawing : How ?
Let’s check what exactly is happening in these three phases and after that we will understand it with an example.
Composition Phase
In the Composition phase, the entire information is transformed into data structure form.
Compose checks the data it requires in order to render it on the screen. To wrap up all the information, it uses tree data structure.
Compose runtime executes composable functions. It turns the UI into a tree data structure after receiving the necessary data as input. Each composable function represents a tree node. These tree nodes contain all the necessary information which will be the input of the next phase.
Layout Phase
In the Layout phase, it identifies the placement of the UI on the screen. Its main purpose is to measure the width and height of each UI element and identify X-Y coordinates in available 2D space.
For measurement, it takes the UI tree as input, traverses it, identifies the children if any and measures the width and height accordingly.
As every node’s measurement depends upon its own properties and on children’s width & height.
To complete this process, there are further three steps :
- Measure Children : Measure of its children if any.
- Decide its own side : On the basis of its children’s width and height and its own properties, it decides its own maximum size.
- Place children : Finally, it positions its children in relation to where it will be at the end of the phase. Like for columns, it puts children in vertical positioning.
At the end of this phase, we will have all the sizes and X-Y coordinates of the layout nodes. It will be the input of the next phase.
Drawing Phase
In the Drawing phase, it draws UI on the screen.
The tree is traversed again and according to size and X-Y coordinates, each node draws its pixels on the screen.
Real Life Example
Now, let’s understand these three phases through an example.
When we run the above code, it transforms into the UI.
However, exactly how our code transforms?
Composition
In the first phase, UI converts into tree form.
Layout
In this phase, calculate size and X-Y coordinates. Traversing starts from the first node which is Row node here.
- As Row has two children, first it measures its children.
- First, Column is measured. Again, Column has two children. So, first measures its children.
- The first Text is measured. Since it doesn’t have any child, it chooses its own size and informs the Column of it.
- The second Text is measured. Since it doesn’t have any child, it chooses its own size and informs the Column of it.
- The Column chooses its own size based on the child’s measurements. It uses the maximum child width and the sum of the height of its children.
- The column places its children in vertically.
- Now, Image is measured. Since it doesn’t have any child, it chooses its own size and informs the Row of it.
- The Row chooses its own size based on the child’s measurements. It uses the maximum child width and the sum of the height of its children.
Drawing
Finally, our UI is rendered on the screen.
Conclusion
We now know how Jetpack Compose changes data into UI. Examples showed how data moved across the three phases of composition.
I hope this post will help you better understand what happens when we execute composable functions. Also, please check official blog for more details : Android Jetpack Compose Phases
I hope you enjoyed this tutorial. If you have any questions or feedback, please feel free to share in the comments.
Happy Learning 🙂
Visit my other Android blogs as well : Blogs