in Jetpack compose you write declarative code that describes how data should be displayed as UI
but how does compose perform that transformation in this episode we'll
discuss three phases that play a role in this and how having a mental model
of these phases will help you reason about your app's design implementation [Music]
so compose transforms data into UI the three phases in this process are composition layout
and drawing or what to show where to place it and how to render it during the composition phase the
compose runtime executes your composable functions it outputs a tree data structure
that represents your UI this UI tree consists of layout nodes together these layout nodes
hold all the information needed to complete the next phases then during the layout phase
each element in the tree measures its children if any and places them in the available 2D space
finally in the drawing phase each node in a tree draws its pixels on the screen
let's take a closer look at these phases for that we'll only focus on the bottom part of the screen
where you see the author of the article the publication date and the reading time
during the composition phase we transformed composable functions into a UI tree as we're
looking only at the author element we can zoom in on a subsection of our code and our UI tree
in this case each composable function in our Code maps to a single layout node in the UI tree
this is a pretty simple example but your composables can contain logic and control
flow producing a different tree given different states when we move to the
layout phase we use this UI tree as input the collection of layout nodes contain all
the information needed to eventually decide on each node's size and location in 2D space
during the layout phase the tree is reversed using the following three-step algorithm first
a node measures its children if any and then based on those measurements it decides on its own size
and finally it places its children relative to its own position at the end of the phase each
layout note will have an assigned width and height and an x y coordinate of where it should be drawn
so for our composable this would work as follows we start with the root note the row
it will start with step 1 measuring its children we continue to the image the image doesn't have
any children so it can directly continue to the Second Step it decides its own size
step 3 can also be skipped for the image as it has no children now the row measures
its next child the column the column starts again with step one measuring its children
the text does not have any children so it only needs to decide its own size
the column measures its second child and this text also directly decides its own size
now the column knows the two measurements of its children it uses those measurements
to decide its own size using the maximum child width and the sum of the height of its children
then it places its children relative to itself putting them beneath each other vertically
finally the row now has all the information it needs from its children to decide its own size
and where its children should be placed one key takeaway here is that we visited each node only
once with a single bus through the UI tree we were able to measure and place all the nodes
this is great for performance when the number of nodes in the tree increases the time spent
traversing it increases in a linear fashion in contrast if we were to visit each node multiple
times the traversal time would increase exponentially now that we know the sizes
and XY coordinates of all of our layout nodes we can continue to the draw phase
the tree is traversed again from top to bottom and each node draws itself on the screen in turn
so in our case first a row will draw any content it might have such as a background color
then the image will draw itself then the column and then the first and the second text
great we've seen how the three phases are executed for our composable but we took some shortcuts if
we go back to the composition phase we said we execute the code and build the UI tree but looking
closer at the codes we can see that it actually uses modifiers to change the look and feel of some
of our composables in our UI tree we can visualize these as wrapper nodes for our layout nodes when
we chain multiple modifiers each modifier node wraps the rest of the chain and the layout node
Within for example when we chain a clip in a size modifier the clip modifier node wraps the size
modifier node which then wraps the image layout node in the layout phase the algorithm we used
to walk the tree stays the same but each modifier node is visited as well this way a modifier can
change the size requirements and placement of the modifier or layout node that it wraps
in our case the size modifier decides on the size and thereby overrides the image's default size
the bedding modifiers increase their rep Note size and place them accordingly in the available space
The Columns content will be entered by 8dp and the text will be 4dp higher and its content placed
to add that space at the top the clip modifier affects the drawing phase as it doesn't change
the size or placement of its wrap node it only affects how the content is being drawn
specifically it creates a mask that the image will then draw its content in
now interestingly if we would look at the implementation of our image composable we
can actually see that it itself consists of a chain of modifiers wrapping a single layer node
similarly a text composable is implemented with a chain of modifiers wrapping a layout node as well
and finally the implementations of our row and column are simply layout nodes
that describe how to lay out their children now we'll get back to this in a later episode
but for now it's good to think about a modifier as wrapping a single modifier
or layout node while a layout node can lay out multiple child nodes so with this mental
model you now have a better understanding of how the different phases in compose work
in the next episode we'll dive a bit deeper into the layout phase and learn to reason about
how exactly layouts and modifiers influence the measurement and placement of their children thanks
for watching and don't forget to subscribe to our channel for more Android developer content [Music]