Open chat2goku opened 4 months ago
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)
)
}
}
}
}
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