CurrentTime design.

[chat2goku]

I want to show current timeline view above the timeline like below image. I have checked sdk for this and I found if I put timelinesContent above the currentTime content like below code then its working

MinaBox(
    state = state.minaBoxState,
    contentPadding = contentPadding,
    scrollDirection = scrollDirection,
    modifier = modifier
) {
    items(
        toMinaBoxItem = { toMinaBoxItem(scope.guideStartHour, dimensionsPx) },
        scope.timelinesContent,
        scope.programsContent,
        scope.currentTimeContent,
        scope.channelsContent,
        scope.topCornerContent
    )
}

But after this  animateToCurrentTime() method is not working perfectly.  Can you please help here?

Thanks in advance

[oleksandrbalan]

Sorry for the late response.

I think you can achieve this design with ProgramGuide API, see the code snippet with comments below.

/**
 * Current time vertical line.
 *
 * @param modifier The modifier instance for the root composable.
 */
@Composable
fun CurrentTimeLine(modifier: Modifier = Modifier) {
    // Use Box instead of Surface to not clip current time box
    // Also set "propagateMinConstraints", so that "wrapContentSize" can work correctly
    // Set a Z-index to any positive value, so that line is rendered "above" timeline
    Box(
        propagateMinConstraints = true,
        modifier = modifier.zIndex(1f),
    ) {
        // Draw the vertical line, but add a top padding equals to the half of the timeline height,
        // (which is 32.dp by default, see ProgramGuideDefaults)
        Box(
            modifier = Modifier
                .padding(top = 16.dp)
                .background(Color(0xFFA42015)),
        )

        // Add a current time box, the crucial part is "wrapContentSize", which allows as to
        // "ignore" min width set by "ProgramGuide" for current time line. Also set the height to
        // be as height as timeline height, so that current time box is centered correctly
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .wrapContentSize(Alignment.TopCenter, unbounded = true)
                .height(32.dp)
        ) {
            // Finally add a current time box and style as needed :)
            Surface(
                contentColor = Color.White,
                color = Color(0xFFA42015),
                shape = RoundedCornerShape(8.dp),
                border = BorderStroke(1.dp, Color(0xFFEA3323))
            ) {
                Text(
                    text = "12:30",
                    fontSize = 14.sp,
                    modifier = Modifier.padding(vertical = 2.dp, horizontal = 4.dp)
                )
            }
        }
    }
}

current-time.webm