How can I achieve something like this with Compose...

# compose

[K Merle]

How can I achieve something like this with Compose? So I have LazyRow where each item is a day and it can be indefinite in the past or future. Rectangles need to be drawn across days, and each can hold centered text and has different styles. 🧵

[K Merle]

I've handled it by drawing canvas, than generating bitmap from it per each grouped work, than I'm slicing that image and each part goes to it's own item (day), which in the end gives this result.

I am wondering if there is a better and easier way to handle this in Compose without losing lazy load?

[Stylianos Gakis]

Would probably not be very easy, but maybe have a look at this https://www.droidcon.com/2022/11/16/thinking-outside-the-box-custom-compose-layouts/ to see how to build your own custom lazy layouts

[K Merle]

Gonna check it out, tnx.

[Stylianos Gakis]

Also remembered this exists https://github.com/oleksandrbalan/minabox I am not sure if it fits your needs, but in any case you would be able to read the source code from it to help you out

[Filip Wiesner]

When I was implementing custom lazy layout (2D lazy grid where rows were differently sized), I was heavily inspired (AKA copy&paste 😅) by Minabox and I think it's a good starting point for any custom lazy layout you might need - your example included

[Stylianos Gakis]

“Heavily inspired” is my favorite phrase 😅

[Timo Drick]

There is also this official sample app which is using custom layouts:
https://github.com/android/compose-samples/tree/main/JetLagged
not sure if you already checked it.

[Stylianos Gakis]

The “Thinking outside the box” talk basically goes over this ^^ sample in a very detailed way

[K Merle]

So, learning from Minabox, my approach would be to add row on top of another row to get desired result? I do require to have that bottom boxes fixed size.

[Filip Wiesner]

The Minabox is just a lazy layout primitive. There are no rows and column, just X and Y coordinates and content lambda where you can put anything.
MinaBox will do the lazy behavior and scrolling for you

[K Merle]

Hopefully Minabox is using rememberLazyListState , as I do have another requirement, and that is for LazyRow and LazyColumn to have synced state. Tnx guys, I'll check it out!

[Filip Wiesner]

No it doesn't, it uses it's own MinaBoxState. But I am sure we can summon @Oleksandr Balan to get some answers for questions you might have ❤️

[Oleksandr Balan]

Yeap, as Filip said MinaBox is basically a 2D lazy loading board, where you can place your own composables. So you will have to calculate exact position and size for every component (rectangle). It has its own MinaBoxState , where you could observe translate (basically viewport position on the bigger board) to update other elements if needed.

[K Merle]

@Oleksandr Balan I have vertical and horizontal lazy layout in LazyColumn and LazyRow. Scrolling any of these also scrolls another layout, so scrolling is synced. Would it be possible to do it with 2 Minabox layouts something like this?

[Colton Idle]

FWIW. the screenshot you sent reminds me of this talk

[Oleksandr Balan]

Not sure I understand correctly what is your current setup, but MinaBox is two dimensional layout, so you will need only one.

[K Merle]

I need to have 2 layouts, and their base items (days) are in sync when you scroll up or down, left or right.

[K Merle]

I was wondering can two Minabox layouts be in sync with their lazy state?

[Filip Wiesner]

So when you scroll the horizontal layout to the right, the vertical layout will scroll down?

[K Merle]

Yes

[K Merle]

I am able to do this currently with LazyColumn and LazyRow. If I would be able to sync scroll in two layouts, I'd be happy to try out Minabox instead of using bitmaps to draw timelines.

[Oleksandr Balan]

Theoretically you could observe translate from one MinaBox and use snapTo on another one and vice-versa. But I am not sure if it will work 😅

[K Merle]

Okay, thanks for heads-up.

[K Merle]

Your suggestion about translate and snapTo worked, problem I have is that column item height is dynamic. 😄 Company did their best to make things harder. What dynamic height causes is items to not be in sync, as they're synced by x, y axis and not indexes.

[K Merle]

What would be helpful is something like you have with translate.maxX.
Possibly something like translate.firstVisibleItemMaxX where I could take first visible item maxX from horizontal layout and first visible item maxY from vertical layout and correctly find transition scale to sync layouts correctly.
On the other hand, that might not be the goal of this lib. 🙂