How can bring the cross button above the box? The ...

# compose

[Kshitij Patil]

How can bring the cross button above the box? The Text & Icon are being defined inside a box which is managing stroke & background color as well as shape. I tried putting cross button in parent box and with zIndex of this child box less than the icon’s but didn’t work. Do I need to write custom layout for this?

[Denis]

Code?

[Yuri Drigin]

Box - alignment TopEnd, and Modifier. padding(4.dp) for the center shape

[Kshitij Patil]

cc: @Denis

OverlappingIcon.kt

[Denis]

@Kshitij Patil, I tried to insert your code like

@Preview
@Composable
fun CrossButtonPreview() {
    /* Your code */
}

but there were too many errors. It would be nice to have a self-contained example, so we can collaborate easily.

Have you solved the problem?

[Afzal Najam]

Instead of putting the icon in the box with the border, you could use a container and make them siblings inside it

[Shakil Karim]

Try offset

[Kshitij Patil]

@Denis will share a self contained example tomorrow, I was in bit hurry so just shared a snippet that's responsible for Box & Icon.

@Afzal Najam I tried that way but how can I know the dimensions of box so that I can correctly place the icon on it's topRight edge.

[Kshitij Patil]

@Shakil Karim I've already used that in the snippet I shared

[Kshitij Patil]

Surprisingly, when I wrote them in a separate Composable and doing as @ Afzal Najam mentioned, it just worked. Here is a snippet for that.

BoxWithEdgeIcon