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(
) {}
}
}
CodePudding user response:
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(
) {}
}
}