How can I draw a dividers between `Column` children?

# compose

[grandstaish]

How can I draw a dividers between Column children?

[pardom]

Invoke the Divider() composable between each child.

[grandstaish]

Ah right. In my case i let callers of a custom composable specify the children of its internal Column. Then I want my custom composable to be able to add dividers in between each child. Maybe I need a custom Layout for this though

[pardom]

Are you not using LazyColumnFor?

[grandstaish]

Nah, just the regular one

[pardom]

It may be possible to do what you're describing, but I don't know enough about the more advanced APIs.

[Zach Klippenstein (he/him) [MOD]]

You’d probably need to do something like the old Table composable did for borders. Use a custom layout to measure and save where the spaces in between items are, then use something like the drawContent modifier to draw over/under the children in those spaces. If all your items are the same size, you can use the spacedBy arrangement with Column and just calculate where the dividers go without doing a custom layout.

[grandstaish]

Thanks Zach, I’ll give that a try. Any idea where I could find that Table composable by any chance? (I’m assuming it doesn’t exist anymore.)

[Zach Klippenstein (he/him) [MOD]]

Unfortunately it doesn’t exist, you’re right. Here’s something similar though: https://github.com/zach-klippenstein/compose-richtext/blob/f47c128a0d49597a7d8606f0edd3330070bc7e7c/richtext-ui/src/main/java/com/zachklipp/richtext/ui/Table.kt#L139-L158

[grandstaish]

thanks, this should help a lot 🙏

[Zach Klippenstein (he/him) [MOD]]

The main issue with that approach is that the first frame is rendered without the dividers unfortunately (i think this is one of the reasons why they removed the old Table composable)

[grandstaish]

maybe i need to re-think my component 🤔

[grandstaish]

So is this implementation drawing dividers based on the previous round's measurements? Couldn't those have changed?

[grandstaish]

Maybe I could use a mutable "out" array for storing the item heights, tho I feel like that's a bit hacky

[Zach Klippenstein (he/him) [MOD]]

If the measurements change on every frame (e.g. during animation), then yea the dividers will lag by a frame unfortunately.

[Zach Klippenstein (he/him) [MOD]]

This feels like it might be overkill, but another path you might want to explore is writing a custom SubcomposeLayout. There’s probably a way to use that to avoid the frame off-by-one issue.

[Louis Pullen-Freilich [G]]

Yes, SubcomposeLayout is designed exactly for these sort of use cases - you can avoid the 1f lag this way by measuring the content first, and then composing the dividers afterwards.

[grandstaish]

Neat, TIL. It's well past my ability to write code tonight, but i'll read up on SubcomposeLayout tomorrow. Thanks both!

[efemoney]

@Louis Pullen-Freilich [G] Any docs on how to understand and use SubcomposeLayout ?

[Zach Klippenstein (he/him) [MOD]]

both LazyList and WithConstraints use it, which are pretty different use cases so looking at their implementations is helpful.

[Louis Pullen-Freilich [G]]

You can take a look at the sample in the documentation, otherwise yes LazyList and WithConstraints can be useful.

Or for a more high level 'component' point of view, you can see the TabRow implementation, or the upcoming Scaffold change that moves to using SubcomposeLayout

[grandstaish]

cool, TabRow is doing dividers too, so this makes things pretty easy for me 🙂

[grandstaish]

SubcomposeLayout (and Layout) are so easy to use 👏. I managed to add my dividers fairly easily: https://gist.github.com/grandstaish/9eec95d879eb754cb5109caa49822dce

[efemoney]

Possible to add a screenshot of the final result to the gist?

[grandstaish]

Sure!

[grandstaish]

Still has a long way to polish the component, but the general idea is there. I think it’s pretty awesome that i can dynamically add more composables (the dividers) after measuring the content