androidandroid-jetpack-composeandroid-jetpack-compose-layout

Ovelapping icons images in compose


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.

enter image description here

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

Solution

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

    enter image description here