Jetpack Compose: Make offset image outside parent visible

Question

I added an image inside a card with a background color and I want some part of my image to overflow outside the container and be visible. I used offset to offset the image but I can’t find the way to make it visible.

Here’s my code:

Card(
    shape = RoundedCornerShape(8.dp),
    modifier = Modifier.padding(),
    backgroundColor = Color.Cyan,
    onClick = {},
) {
    Box(modifier = Modifier.wrapContentHeight()) {

        Image(
            modifier = Modifier
                .width(250.dp)
                .align(alignment = Alignment.TopEnd)
                .offset(y = -75.dp, x = 50.dp),
            painter = painterResource(id = R.drawable.ic_pray),
            contentDescription = null,
        )
        Column(

        ) {}
    }
}

Answer 1

Card is based on Material surface, and it's using Modifier.clip which prevent your offset view from being displayed.

If you need to maintain Card elevation, you can place the image in a Box outside of Card:

Box {
    Card(...)
    Image(
        modifier = Modifier
            .width(250.dp)
            .align(alignment = Alignment.TopEnd)
            .offset(y = -75.dp, x = 50.dp),
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = null,
    )
}

Otherwise you can skip using Card at the first place, and set background and shape to your Box with Modifier.background:

Box(
    modifier = Modifier
        .padding(10.dp)
        .background(Color.Cyan, shape = RoundedCornerShape(8.dp))
) {
    Box(modifier = Modifier.wrapContentHeight()) {
        Image(
            modifier = Modifier
                .width(250.dp)
                .align(alignment = Alignment.TopEnd)
                .offset(y = -75.dp, x = 50.dp),
            painter = painterResource(id = R.drawable.my_image),
            contentDescription = null,
        )
        Column(

        ) {}
    }
}