A modern programming language that makes developers happier.

kotlinlang

image.png

I want to have an universal component looking like this image. I'd like to have a one composable slot for rendering Items(). That will render that item's icon, but the connection line (and optionally gradient) would be drawn by the parent/wrapping component. I can send the item's color using a ParentDataModifier. But, Layout allows me only customize measuring/layouting, not adding an additional drawing (though drawing phase continues after it). What would be an ideal approach to this?

API would be something like
```Timeline {
    TimelineItem(
         status = TimelineItemStatus.DoneSuccess,
         title = { Text("Check-in details") },
         description = { Text("...") },
    )
    TimelineItem(
         status = TimelineItemStatus.DoneSuccess,
         title = { Text("Waiting for the airline") },
         description = { Text("...") },
    )
    TimelineItem(
         status = TimelineItemStatus.DoneSuccess,
         title = { Text("Processing online check-in") },
         description = { Text("...") },
    )
    TimelineItem(
         status = TimelineItemStatus.InProgress,
         title = { Text("Boarding passes ready") },
         description = { Text("...") },
    )
}```


I can imagine an implementation based on `List&lt;@Composable () -&gt; Unit&gt;`  and `SubcomposeLayout`   but it seems to be unfriendly api and avoiding subcomposition seems to be the way I'd like to try first.

If you dont want a custom layout, then you can instead use a `Column` . First each child will be offset horizontally in the column to make space for the status track then they will also report their `locationInParent`  (something like that) via some modifier (one of `onPlaced` / `onGloballyPositioned` ) plus their statuses back to the drawing state. The parent Column will have a custom drawing modifier which based on the positions the children reported can draw the track

You might also look at existing libraries for this, such as <https://github.com/yeocak/ComposableTimelineView> and <https://github.com/jisungbin/ComposeTimeLineView>, to see how they did it.

&gt; The children can set `parentData`  to inform the parent `Layout` of their status which will influence the status check mark &amp; the “gradient line” you draw from one child to the next.
Actually, this is what I'm asking about. How to read parentData and be able to draw something.
I can read parentData in Layout's MeasureScope, but I don't know how to draw additional lines there.

&gt; report their `locationInParent` 
This is something I'd like to avoid since it will draw using recomposition.

&gt; You might also look at existing libraries for this
Thx, I did so but it seems they're quite simpler (e.g. the item state doesn't affect the previous item line (color))

Anyway, you can look how I solved it:
<https://github.com/kiwicom/orbit-compose/pull/277>

Basically the timeline item emits three composables (measurables):
• item
• line
• gradient line overlay for the previous item's line
Then the custom Layout combines them together.