In the context of a recent technical presentation, I was experimenting different layouts in Jetpack Compose, from which SubComposeLayout was one of the most challenging.

Theory

SubComposeLayout is a low level API for building layout in Jetpack Compose, by overriding the standard steps of composition-layout-drawing with a subcomposition step for child nodes of a layout (that is obviously a SubComposeLayout).
This way, we engineers, can decide at runtime whether we want to display (place) a subsequent child node on the UI based on the measurement (size and position) of a preceeding child node.

More about the theory can be found in Advanced layout concepts — MAD Skills and SubcomposeLayout — breaking the Compose phases rule.

Use case

Some of the good uses cases are LazyLayout together with it’s derivatives and BoxWithConstraints, however in the Compose Layouts and Modifiers: Live Q&A — MAD Skills discussion the experts say that there are not that many cases for the custom SubComposeLayout, however I wanted to enforce one for my presentation so, here MultiItemPager comes :)

Let’s consider that the business says the following:
- display a list of items on the UI that have different sizes
- place as many item on the UI as many can be fit vertically
- moving to the next page of items should be done by clicking on a button
- neither vertical nor horizontal scrolling cannot be used

After implementing, it looks this way:

Show me the code

The main point in the code is that it is only placing subsequent child items of SubComposeLayout, until there is space left by preceeding children (line 124).

The code is part of the ComposeSimulation draft project.