[FIXED] Negative Spacing in Kotlin Compose forEach

Issue

I've tried to set a negative spacing on some circles, but I've had no luck with either:

.padding(horizontal = (-5).dp)

and

.offset(x = (-5).dp)

I'm not quite sure how to make this possible, I'm trying to achieve this:

href="https://i.stack.imgur.com/ZnZHA.jpg" rel="nofollow noreferrer">

As you can see the image does include an overlay, but the images are behind each other.

Is there any way to achieve this in Kotlin Compose?

Solution

You can do it by wrapping second Image with a Box. Setting a background and offset.

@Composable
private fun ImageSample() {

    Row(
        modifier = Modifier
            .wrapContentHeight()
            .padding(20.dp), verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            modifier = Modifier
                .size(100.dp)
                .clip(CircleShape),
            painter = painterResource(id = R.drawable.landscape1),
            contentDescription = null,
            contentScale = ContentScale.FillBounds
        )

        Box(
            modifier = Modifier
                .offset((-20).dp)
                .background(Color.White, CircleShape)
                .padding(10.dp)
        ) {
            Image(
                modifier = Modifier
                    .size(100.dp)
                    .clip(CircleShape),
                painter = painterResource(id = R.drawable.landscape2),
                contentDescription = null,
                contentScale = ContentScale.FillBounds
            )
        }
    }
}

Answered By - Thracian
Answer Checked By - Clifford M. (JavaFixing Volunteer)