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")
        }
    }
}

You can use an offset – Gabriele Mariotti Dec 20 '22 at 16:03 — Gabriele Mariotti, Dec 20 '22 at 16:03

Gabriele Mariotti · Accepted Answer · 2022-12-20T17:23:23.417

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)
    )
}

Ovelapping icons images in compose

1 Answers1