Jetpack Compose Row - Draw over child element siblings - kotlin

Question

I have a LazyColumn with Rows as children
I'm trying to draw a circle on just one of the row elements that overlaps the other children but the circle is being drawn below the siblings to the left and bottom
I have tried playing around with Modifier.zIndex with no luck.
Here's what I have:
#Composable
fun HorizontalGrid() {
val days = (1..300).toList()
val weekChunks: List<List<Int>> = days.chunked(7)
LazyColumn {
items(weekChunks) { days: List<Int> ->
Week(days)
}
}
}
#Composable
fun Week(days: List<Int>) {
Row(horizontalArrangement = Arrangement.SpaceEvenly, modifier = Modifier.fillMaxSize()) {
days.forEach {
Day(it)
}
}
}
#Composable
fun Day(dayOfWeek: Int) {
Box(
modifier = Modifier
.size(48.dp)
.padding(4.dp)
.background(Color.LightGray)
) {
Text(
modifier = Modifier
.drawWithContent {
if (dayOfWeek == 17) {
drawContent()
drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
}
},
text = dayOfWeek.toString()
)
}
}
Here's what I get:
What I need is the circle to be over all of the squares.

Answer 1

There are two places where need to add zIndex
Code
#Composable
fun HorizontalGrid() {
val days = (1..300).toList()
val weekChunks: List<List<Int>> = days.chunked(7)
LazyColumn {
items(items = weekChunks) { days: List<Int> ->
Week(days)
}
}
}
#Composable
fun Week(days: List<Int>) {
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
modifier = Modifier
.fillMaxSize()
.zIndex(if (days.contains(17)) 2f else 1f)
) {
days.forEach {
Day(it)
}
}
}
#Composable
fun Day(dayOfWeek: Int) {
Box(
modifier = Modifier
.zIndex(if (dayOfWeek == 17) 2f else 1f)
.size(48.dp)
.padding(4.dp)
.background(Color.LightGray)
) {
Text(
modifier = Modifier
.drawWithContent {
if (dayOfWeek == 17) {
drawContent()
drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
}
},
text = dayOfWeek.toString()
)
}
}
Result