Hi! Has anyone tried to show an image view out of the bounds of a dialog in compose? Something like ...

# compose-android

[Sergio Moral]

Hi! Has anyone tried to show an image view out of the bounds of a dialog in compose? Something like the following. (Just to clarify, the image view is the orange rectangle 🙃 )

[Raphael TEYSSANDIER]

You should use Modifier.graphicLayer { translationY = -100 }

[Sergio Moral]

If I use this, then the image view is cut and only shows half of the iv

[Raphael TEYSSANDIER]

It shouldn’t, can you share the code ?

[Oleksandr Balan]

Hmm, I would say you will need to shift down the surface of the dialog content by the value which is equal to the half-height of the image.

Something like:

Dialog(onDismissRequest = { }) {
    Box {
        Surface(
            shape = RoundedCornerShape(8.dp),
            modifier = Modifier.padding(top = 32.dp),
        ) {
            Column(
                modifier = Modifier
                    .padding(top = 32.dp)
                    .padding(all = 16.dp)
            ) {
                Box(
                    modifier = Modifier
                        .size(200.dp, 64.dp)
                        .border(4.dp, Color.Green, RoundedCornerShape(8.dp))
                )
                Box(
                    modifier = Modifier
                        .padding(top = 16.dp)
                        .size(200.dp, 32.dp)
                        .border(4.dp, Color.Green, RoundedCornerShape(8.dp))
                )
            }
        }

        Box(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .size(64.dp)
                .border(4.dp, Color.Yellow, RoundedCornerShape(8.dp))
        )
    }
}

However I guess the dialog would not be dismissed when user taps near the image (above surface). Maybe you will need to add some "no-ripple-click-listener" on the outer Box to handle those taps.

[Sergio Moral]

I have made something very similar to @Oleksandr Balan solution, just using graphicslayer and modifying the translationY , the image view is cut and I wasn’t able to find another solution