Jetpack Compose: Make offset image outside parent visible

user_5389713 0
Viewed 1195

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(

        ) {}
    }
}

Screen capture

android-jetpack-compose kotlin android-layout
1 Answers

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(

        ) {}
    }
}
user_35857960
Related