Ovelapping icons images in compose

Question

I want to display the icons below so the center one is overlapping.

I am trying to use the Box but not sure how to arrange them so they are overlapping and in the center of the screen.

I have started using a Box with 3 Box stacked on each other. But not sure about how to arrange them so the center slightly overlaps the left and right icons. And slightly higher.

fun SurveyIconScreen() {
    Box {
        Box(modifier = Modifier
            .clip(CircleShape)
            .size(22.dp)
            .background(color = Color.White),
            contentAlignment = Alignment.Center) {
            Icon(painter = painterResource(id = R.drawable.ic_star), contentDescription = "Star")
        }

        Box(modifier = Modifier
            .clip(CircleShape)
            .size(22.dp)
            .background(color = Color.White),
            contentAlignment = Alignment.Center) {
            Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
        }

        Box(modifier = Modifier
            .clip(CircleShape)
            .size(22.dp)
            .background(color = Color.White),
            contentAlignment = Alignment.Center) {
            Icon(painter = painterResource(id = R.drawable.ic_cart), contentDescription = "Star")
        }
    }
}

Answer 1

You can apply an offset modifier to overlap the icons. Also use the zIndex(1f) modifier to drawn the icon in the center on top of all other icons.

Something like:

val shape = RoundedCornerShape(4.dp)
val borderColor = LightGray

Row(
    modifier = Modifier.fillMaxWidth().height(70.dp),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
){

    Icon(Icons.Outlined.Star, contentDescription = "Star",
        modifier = Modifier
            .offset(x = 3.dp)
            .size(32.dp)
            .border(BorderStroke(1.dp,borderColor), shape)
            .background(White)
    )


    Icon(
        Icons.Outlined.ShoppingCart,
        contentDescription = "Star",
        modifier = Modifier
            .zIndex(1f)
            .offset(y = -12.dp)
            .size(32.dp)
            .border(BorderStroke(1.dp,borderColor), shape)
            .background(White)
    )

    Icon(Icons.Outlined.Note, contentDescription = "Star",
        modifier = Modifier
            .offset(x = -3.dp)
            .size(32.dp)
            .border(BorderStroke(1.dp,borderColor), shape)
            .background(White)
    )
}