https://kotlinlang.org logo
#compose-android
Title
# compose-android
s

Sergio Moral

10/23/2023, 10:17 AM
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 🙃 )
r

Raphael TEYSSANDIER

10/23/2023, 11:43 AM
You should use
Modifier.graphicLayer { translationY = -100 }
1
s

Sergio Moral

10/23/2023, 2:11 PM
If I use this, then the image view is cut and only shows half of the iv
r

Raphael TEYSSANDIER

10/23/2023, 2:15 PM
It shouldn’t, can you share the code ?
o

Oleksandr Balan

10/24/2023, 12:59 AM
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:
Copy code
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.
s

Sergio Moral

10/26/2023, 5:55 PM
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
2 Views