How To Accomplish Dynamic Absolute Positioning In Android’s Jetpack Compose

Position composables within their parent's exact coordinates by using other elements as anchor

Yanneck Reiß
CodeX

--

A woman with a laser positioned on her face, metaphoric representing the positioning of UI elements that this article is about.
Photo by cottonbro on Pexels

While using Jetpack Compose, in most cases you will only need the ordinary way of laying out composables in a fixed layout structure.

However, dynamically aligning UI elements by the x and y coordinates (absolute coordinates) on the screen is a relatively common task that you probably stumbled upon when you are developing Android apps regularly.

In the good old days when we developed our UIs using XML, we had the option to check on runtime for the x and y position of specific View elements in the view tree and could then dynamically inflate View elements at these positions.

One use case in which you might need this behavior is when you want to develop some onboarding or tutorial in which case you want to point to a specific view element and show a description text in some spotlight or tooltip.

But how can we achieve the same functionality using Jetpack Compose? Unfortunately, we no longer can reference specific Views directly.

But no worries, there is an option. How this option exactly looks like is what we are gonna talk about in this…

--

--

Yanneck Reiß
CodeX

Follow me on my journey as a professional mobile and fullstack developer