Make image overlap its parent view in Jetpack Compose

41 views Asked by At

what i want is to make image overlap top edge of its parent view. without fixating any of view sizes

image 1 expected

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

image 2 actual

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
    )
}
0

There are 0 answers