How to make timeline of 30 min step instead of 1 hour?

[chat2goku]

I want to make timeline of 30 min step. what should I change?

[oleksandrbalan]

Hey 👋

You have to double "count" of timeline items in timeline lambda. And then use index to place each item correctly and show the correct time. For example this updated timeline lambda in ProgramGuideSimpleScreen:

timeline(
    // timeline variable is defined as a range 8..22, thus we want double the count of
    // items in this range. Plus 1 is used to add a last 22:30-23:00 item
    count = timeline.count() * 2 + 1,
    layoutInfo = {
        // Then use index to calculate the correct start & end hours, keep in mind that
        // 10.5 is 10:30
        val start = timeline.first + 0.5f * it
        ProgramGuideItem.Timeline(
            startHour = start,
            endHour = start + 0.5f
        )
    },
    itemContent = {
        // Again use an index to calculate the correct hour to show in the text
        TimelineItemCell(timeline.first + 0.5f * it)
    },
)

Produces 30m intervals:

[chat2goku]

Hi

Thank you for your amazing guidance. It is really appreciated.

I also have one more question. Is there any way to make timeline like this image.

Let me know, Do you know how to achieve this or just tell me in which file of library need to be changed.

Thank you very much...

[ChetanPatelPlayBoxTV]

working fine for timeline of 30 min step but how can we increase width size of 30 min slab?

[ChetanPatelPlayBoxTV]

@oleksandrbalan How do we increase timeline width size in 3o min slab?

[oleksandrbalan]

@chat2goku I have answered in https://github.com/oleksandrbalan/programguide/issues/17#issuecomment-2066862664, sorry for the late response.

@ChetanPatelPlayBoxTV See dimensions parameter in ProgramGuide, where you can set the width of the whole hour: timelineHourWidth.

ProgramGuide(
    dimensions = ProgramGuideDefaults.dimensions.copy(timelineHourWidth = 256.dp),
    ...
) { ... }

timeline-width.webm