what i want is to make image overlap top edge of its parent view. without fixating any of view sizes
i tried to use Box with image inside set to .wrapContentHeight(align = Alignment.Bottom, unbounded = true), but parent Box takes whole image inside itself.
i suppose parent box takes size of its biggest child, so image, as Box biggest child, can no longer be outside box frame
finally it looks like this
my code looks like this
@Composable
fun ComponentViewOverhead(
title: String,
modifier: Modifier,
subTitle: String,
avatar: Avatar,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
onClick: () -> Unit
) {
Box(
modifier = modifier
.wrapContentSize()
.background(
gradient = GradientsDefault.pink,
roundedCornerShape,
gradientStyle = GradientStyle.Horizontal
)
.clickable(
interactionSource = interactionSource,
indication = LocalIndication.current,
role = Role.Button,
onClick = onClick
)
) {
Row(modifier = modifier.fillMaxWidth()) {
Column(
modifier = modifier
.weight(1f)
.padding(
start = Theme.space.s16,
top = Theme.space.s16,
bottom = Theme.space.s16
),
verticalArrangement = Arrangement.spacedBy(Theme.space.s2)
) {
Text(
text = title,
style = Theme.typography.h5,
color = Theme.color.universal.white
)
}
Avatar(
model = Avatar,
modifier = modifier
.align(Alignment.Bottom)
.wrapContentHeight(align = Alignment.Bottom, unbounded = true)
)
}
}
}
@Composable
private fun Avatar(
model: Avatar,
modifier: Modifier = Modifier
) {
val painter = painterResource(id = model.iconResId)
Image(
modifier = modifier,
painter = painter,
contentDescription = model.contentDescription
)
}