Hi everyone. I discovered an interesting optimizat...

# compose-android

[Sergey Y.]

Hi everyone.
I discovered an interesting optimization while working on our project, and I thought it was worth sharing.
I don’t know if it’s related to Compose or Android system, but it’s intriguing.

Details in the thread 🧵K

[Sergey Y.]

While stacking multiple composable widgets inside a Box, I noticed something curious in the Layout Inspector. When widgets had different sizes to match their graphics content, drawn on the canvas using the Modifier.drawBehind, they were rendered in separate layers. I added some magenta bounding box lines to highlight the different sizes, and the Layout Inspector 3D view clearly showed each layer stacked on top of the others.

[Sergey Y.]

layered_rendering.mov

layered_rendering.mov

[Sergey Y.]

However, when I made all the widgets the same size, stretching them to the layout of the screen and using transformed coordinates for drawing graphics, the visual output stayed the same, the Layout Inspector showed a single collapsed layer. The boundaries stretched to match the parent layout, and the 3D view no longer displayed distinct layers.

[Sergey Y.]

collapsed_layers_rendering.mov

collapsed_layers_rendering.mov

[Sergey Y.]

Both variants have the same number of composable widgets, but the system draws them differently. It’s quite intriguing, and I thought it was worth sharing 😄

[Albert Chang]

There is Modifier.toolingGraphicsLayer() to add a layer in the inspector.

[Sergey Y.]

Okay, thanks for the information. But that's not quite what I was getting at 🙂