Hello. Please I am trying to achieve an overlappin...

# compose-android

[shock 11]

Hello. Please I am trying to achieve an overlapping effect in jetpack compose, but a precise one. I have tried to use Box with Alignments or negative padding values, and I still do not get the desired effect as I'm not entirely sure what rule governs this. I asked the question here and the picture is also attached to the question. Any help would be greatly appreciated please
https://stackoverflow.com/questions/78754223/how-to-achieve-this-overlapping-effect-in-jetpack-compose

[Timo Drick]

For me it is not clear how exactly you want this positioned. Should it be between two rows? Or should it be under the title of this row?

[shock 11]

@Timo Drick No not under the title of the row, but ontop of the TextField, the bottom half of the image is overlapping the top of the textfield. Its what I am trying to achieve, and yes also other content like the row will also be under the image

[shock 11]

I have gotten close in trying to achieve this but I am experiencing some problems, I have used translation x and translation y(with zIndex) to move the position of the Image(Both the image and the text field are both put inside a box), but the issue now is that when I use translation Y to push the Image to particular level, it doesn't show the full size. Almost as if something is covering the top half.

[shock 11]

If am still not clear, I can recreate the code in a simpler example and send

[Timo Drick]

Why no moving the second Box? using the offset modifier? Or did i get s.th. wrong here. Still not sure if understood the problem correctly. Sorry

[Timo Drick]

So you only want to move the image?

[Timo Drick]

Or is it some kind of dialog on top of the other composable

[shock 11]

No not a dialog, just a box,

[Timo Drick]

Yes i meant that it looks like a tooltip right?

[shock 11]

Yes I did that with the graphicsLayer modifier with translationX and translationY, but something is covering the top half of the Box, like something is restraining it

[shock 11]

Yes it looks like a tooltip, wait let me show you a screenshot

[Timo Drick]

Ok i see.

[Timo Drick]

Yes please show a screenshot

[Suyash Nigam]

@shock 11 Could putting the image and textfield inside a constraint layout solve it?

[shock 11]

@Suyash Nigam I haven't tried the constraintLayout solution yet, I decided to just using the graphicsLayer modifier

[shock 11]

So first of all @Timo Drick

[shock 11]

I just want to show you what the full box is supposed to look like

[shock 11]

This row is inside a Box, I did not apply any modifier to this Box at all,

[shock 11]

Now let me show you my issue

[shock 11]

Now, I want to push this Box a bit upwards, so I increase the translationY offset, but now this is the result. I will try to upload the full code so you can see @Timo Drick @Suyash Nigam

[shock 11]

I have not tried the constraintLayout solution @Suyash Nigam but since I was getting close with just using the offset, I just thought that I tried to make it work with this

[Suyash Nigam]

Sorry i just want to clarify one thing. Do you want this image to be at a fixed place or do you want the user to be able to drag it a bit upwards?

[shock 11]

No at a fixed place

[shock 11]

A photo is supposed to be there, when a user picks an image from their gallery just like the image in the stackoverflow link

[Suyash Nigam]

So this image box is getting clipped becoz of the parent container?

[Suyash Nigam]

Image(
modifier = Modifier
.wrapContentSize(unbounded = true, align = Alignment.TopStart),
)
Could something like this work. Just a guess

[shock 11]

Sorry, I'm not so sure of what you mean, but let me share the code for a better understandin

[shock 11]

okay I can try that

[shock 11]

https://pastebin.com/aygn9UpM

[Stylianos Gakis]

If your container is a scrollable container, unfortunately it's always gonna clip an arbitrary amount on the cross-axis and there is nothing you can do about it besides not making the parent scrollable. The code is here https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]bleClipModifier&ss=androidx%2Fplatform%2Fframeworks%2Fsupport

See this https://kotlinlang.slack.com/archives/CJLTWPH7S/p1718721957168569?thread_ts=1718721914.812109&cid=CJLTWPH7S for a previous discussion on this.

If you can get away without having the scrollable modifier there doing something like .wrapContentSize(unbounded = true, align = Alignment.TopStart), as suggested by Suyash is exactly what I would do here too.

[shock 11]

@Stylianos Gakis I just read all the links you sent to me and I did my best to follow along. So if I'm not mistaken, if we add some padding to the scrollable container, the row here, this padding will basically only show up when the scrollable content is visible(because in my case, there is a null check for some value to determine the visibility of the scrollable row content) and it will account for the clipped area, thereby not making the content clipped? Or is that how it works?

And then on the second one, if I use what @Suyash Nigam suggested which is the .wrapContentSize(unbounded = true, align = Alignment.TopStart), would it still work well if I still made the container scrollable? In this case the Row

[shock 11]

@Suyash Nigam this works but is there a way to basically unbound the content but still make it scrollable?

[shock 11]

Would using a LazyRow work?

[Stylianos Gakis]

That's still gonna be scrollable, so still will clip your content in the same way

[shock 11]

So is there no workaround at all? Or is it that its something that is just impossible to achieve please if I may ask @Stylianos Gakis

[Stylianos Gakis]

Very few things are impossible. You might just need to write a custom layout instead of doing the wrapContentSize trick

[shock 11]

I see. Thank you very much @Stylianos Gakis I will try that, I will also probably give constraintlayout a try as well, not sure if it will cause the same issue but I will try

[shock 11]

But finally @Stylianos Gakis please what is this thing they're saying about applying some sort of padding to the scrollable content, would applying like a top padding basically account for the clipped space and show the full content?

[Stylianos Gakis]

Theoretically yes, but then you got padding on the content, which is not what you want. And you then would need to adjust the item that is above it so that it does not move up according to that padding. Which overall feels like a worse idea than making a custom layout.

[Stylianos Gakis]

Also, just so you know for future threads. People who have already replied here will get notified of any new messages. Just like you are notified about this without me having to tag you again. So you can avoid tagging people who are already participating in a conversation on every reply.

[shock 11]

Okay, sorry about that. Noted.

[shock 11]

I see then, I will like to see what that padding will look like. It may or may not be so bad for my usecase, not sure yet but I think I will experiment with that then I will look to solving this issue with the custom layout

[Timo Drick]

Should the dismissable image also scroll? If not why not putting it outside of the scrollable composable at the main layout?

[shock 11]

Yes the dismissable image should scroll because I want to populate many images based on how many pictures the users want to upload.
but wait, so you mean like put it outside the Box layout that initially held it and the MessageTextField? But if I do that, how would I still achieve the overlapping effect? As the bottom part of the dismissable image needs to touch the top part(overlap) of the MessageTextField

[Timo Drick]

Sorry for later answer.
In theory you could get the coordinates of the row and use it. But makes only sense when you do not want it to scroll.

[shock 11]

No problem at all man. You are right. Thing is my Boss has decided to pick up the issue, but still I would like to see how it gets solved and I can surely come back and drop an answer on my question 👍