From data to UI: Compose phases - MAD Skills

Learn how Jetpack Compose transforms data into UI in this second episode of the Compose Layouts and Modifiers MAD Skills series! We will discuss the three phases that play a role in this transformation, and how having a mental model of these phases will help you reason about your app’s design implementation.

Chapters:
0:00 - Introduction
0:24 - Transforming Data into UI
1:08 - A closer look at the phases
4:14 - Modifiers
5:46 - It’s modifiers all the way down
6:22 - Wrapping up

Resources:

#Featured #Android #MADSkills

[anaslolozi]

That's why .. I love working on Android projects because when I don't understand something I'm sure I'll find a wonderful video like this that explain what I want .. thanks a lot

[SiamakAshrafi]

Graphics make it very easy to follow the concepts ... very well done!

[technophile_]

Really useful video ❤️! Especially the visualization of how the tree is recursively traversed! Keep ‘em coming!

[amirhosseinghafoorian]

Amazing video, I love to know how compose works deep down. Thanks a lot

[nicolasmarin]

Such a great explanation and interesting topic! Great video!!

[ghZTrikz]

Thanks! Waiting for the next of these series! To the end of game;)

[warm-sweater-]

These videos are great!

I'm curious about something you mentioned while describing the layout phase:

"With a single pass 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."

By "exponentially", did you literally mean an exponential time complexity (I assume it actually couldn't have been more than quadratic), or did you just mean "a large amount more than 1 pass" (but actually a multiple of n, still linear)? I assumed the latter, but the gesture you did with your hands represented a quadratic or exponential graph, so I just wanted to make sure (for the sake of my own sanity 😅).

Thanks

[robertgasparyan]

Thanks for the nice explanation!
P.S. I am currently passing through the Jetpack Compose Course on the Android Developers website and I think that this particular video should be moved/added to 2nd path because there are steps that directly follow this video and also questions in the Quiz section so I will suggest at least add this one there too)

[mathijsbernson]

Very informative video! The layout algorithm of Compose seems to be quite similar to that of SwiftUI. 
It works as follows:
1. A parent view proposes a size for its child.
2. Based on that information, the child then chooses its own size and the parent must respect that choice.
3. The parent then positions the child in its 2D coordinate space.

Which begs the following question for me: 
When a composable measures its children in step 1, does the parent composable communicate a maximum size to the children? This information would be needed for example for a Text composable with multiple lines to know how tall it will be when its lines wrap at the maximum width of its parent.

[myxzlabs]

Given your explanation is it possible to visit each node in paralel?

[MrAndrewtux]

It sounds a lot like @flutter work. So why reinvent the wheel and not bring flutter into. As a 1st class tool

[mohamedhasan]

I need full course with the whole last updates, where to find the latest courses

[pvarela]

And this is why we are asked about trees in coding interviews.

[silver]

this is like third video where I've been shown hierarchies and trees, I mean it's cool but I'm not gonna write that in an app, just do real world apps, it's much more clear

[BurgerParty]

Improve update support by separating the oem layer like miui one ui vivo from the system oartition and making system partition the aosp base for easy and make google to update the system partition easily like wut you did on dsu gsi and oem partition for oem to easily update while the product partition for gapps partition and vendor for device layer . Maybe retiring the dsu gsi test on developer option and actually allowing the google server to update the system.img the aosp base and the oem partition easily via settings like wut you did on dsu gsi via developers option might help everyone to experience latest os and as well as security

[TheMikkelet]

Please improve viewmodels. Give us the ability to preview composables that uses the viewModel lifecycle method

[mohamedhasan]

How to find new updates and depricated codes in kotlin

[IvanVasheka]

Say that you’re German without saying that you’re German ;)