Implementing Image Click, User Selection, and Label Creation on TextView in Jetpack Compose with Composable Navigation and Accurate Positioning

Question

Clicking on an image (within a Image composable) should open a new screen (using NavHost and NavController). The new screen should display a list of users (using LazyColumn and rememberScrollState() for smooth scrolling). Upon selecting a user (by clicking a Button or similar composable), the app should navigate back to the original screen. A label (using Box or Text composables) should be created and positioned at a specific point on the TextView within the original image. I have attached an image to illustrate the desired functionality.

Technical challenges I am facing:

• Positioning the label accurately on the TextView.
• Handling the navigation between screens.
• Managing the user selection state.

This is the one of reference that I found while doing R&D to print image offset click point

How to detect what image part was clicked in Android Compose

What is current challenge for me is to print or recompose UI with latest text label to screen

Answer 1

To create a UI like this you should apply a constraint layout in compose for reference please check https://github.com/cengiztoru/ConstraintLayout-JetpackCompose/tree/master.

StateFlow in ViewModel will help you to maintain the state of your list.