Hi Can someone please help me in achieving this U...

# compose

[Danish Ansari]

Hi

Can someone please help me in achieving this UI(first image) in compose?
Till now I have been able to achieve this (second image) with Popup and PopupPositionProvider

The background and arrow are the most challenging part as it’s position will be dynamic, for eg. arrow will be on top normally and it might be on bottom if the anchoring view (trailing icon of text view) is on bottom of screen and very less space is available below. And the arrow should point exactly to the “help” icon as shown in first image

[Danish Ansari]

I took help of this article for dynamic positioning of Popup
https://medium.com/codex/how-to-accomplish-dynamic-absolute-positioning-in-androids-jetpack-compose-afa14f0e8dea

[Chris Sinco [G]]

Are you wondering how to draw the arrow in the shape dynamically? Likely it will require a custom shape as a background that takes a parameter to decide on arrow position

[Danish Ansari]

Yes, I figured it will be a custom shape, will the arrow be part of that rounded rectangle shape?

[Chris Sinco [G]]

Yes I think so

[Danish Ansari]

ok, another challenge is to point that arrow to that help icon

[efemoney]

You should read the popup code but to answer, the trick that popup uses to know where to render is it requires you to add (basically) an empty layout node in your current heirarchy which will report its position (but also its bounds) to the popup.

You can use the same trick here, figure out the bounds of your help icon via onPlaced or onGloballyPositioned plus locationInWindow, then use that information within the popup to figure out where the triangle of the shape should be

[AmrJyniat]

@Danish Ansari Did you figure out a way to draw this?

[Danish Ansari]

Yes, I did. It’s not perfect but it works for me. I’ll share code with you in a few mins.

[Danish Ansari]

https://gist.github.com/mddanishansari/0d3f2144fa06b505ec48edbe38b87366

It works but the arrow position is still not stable. It looks misaligned on some device. I dunno when and if I will fix it 😬

[Danish Ansari]

Please change the code and experiment with it as per your need

[Danish Ansari]

@AmrJyniat

[AmrJyniat]

Yup, Thank you for sharing!

[efemoney]

@Danish Ansari You should remember your popup position provider! Right now you are recreating it on every recmposition

[Danish Ansari]

ok I will change that

[Danish Ansari]

@AmrJyniat one more thing, I haven’t implemented dynamic vertical positioning of arrow, for eg. arrow will be on top normally and it might be on bottom if the anchoring view (trailing icon of text view) is on bottom of screen and very less space is available below.

So if you want that, change the code(TooltipShape.kt) as per your need.

[AmrJyniat]

I couldn't change the X offset of the Popup, here you declared the the width to take 3/4 the screen's width, but in my case I want to make it wrap the content and change the X offset of it, I changed the `anchorCoordinates`'s X, but this didn't help, any tip?