How to show Drop down Menu where ever I touch in a box Jetpack Compose in android studio

Question

I want to show my DropdownMenu where ever I touch but it doesn't work. I used offset to set the location of my drop down menu but it doesn't work properly. It looks like it only sets the x value to the location of my drop down menu.

            var expanded by remember { mutableStateOf(false) }
            var touchPoint: Offset by remember { mutableStateOf(Offset.Zero) }
            val density = LocalDensity.current

            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color.Cyan)
                    .pointerInput(Unit) {
                        detectTapGestures {
                            Log.d(TAG, "onCreate: ${it}")
                            touchPoint = it
                            expanded = true

                        }

                    }
            ) {
                val (xDp, yDp) = with(density) {
                    (touchPoint.x.toDp()) to (touchPoint.y.toDp())
                }
                DropdownMenu(
                    modifier = Modifier.align(Alignment.Center),
                    expanded = expanded,
                    offset = DpOffset(xDp, yDp),
                    onDismissRequest = {
                        expanded = false
                    },

                    ) {
                    DropdownMenuItem(onClick = {
                        expanded = false

                    }) {
                        Text("Copy")
                    }
                    DropdownMenuItem(onClick = { expanded = false }) {
                        Text("Get Balance")
                    }
                }

            }

Why use alien code to initialize your dp values. Just do a simple `xDp by remember { mutableStateOf (...) }` and similar for `yDp`, and you're done. — Richard Onslow Roper, Sep 17 '22 at 10:33

score 4 · Accepted Answer · answered Sep 17 '22 at 10:35

What you actually should be doing is offseting upward by giving a negative Offset.

You need get height of your parent you can get it via Modifier.onSizeChanged or using BoxWithConstraints if it covers whole parent.

I used BoxWithConstraints for demonstration but both can be used.

If you offset by maxHeight or height of the Composable Dropdown menu appears at the top so we need another positive offset which is y axis of touch position to move it down

@Composable
private fun DropDownSample() {
    var expanded by remember { mutableStateOf(false) }
    var touchPoint: Offset by remember { mutableStateOf(Offset.Zero) }
    val density = LocalDensity.current

    BoxWithConstraints(
        Modifier
            .fillMaxSize()
            .background(Color.Cyan)
            .pointerInput(Unit) {
                detectTapGestures {
                    Log.d("TAG", "onCreate: ${it}")
                    touchPoint = it
                    expanded = true

                }

            }
    ) {
        val (xDp, yDp) = with(density) {
            (touchPoint.x.toDp()) to (touchPoint.y.toDp())
        }
        DropdownMenu(
            expanded = expanded,
            offset = DpOffset(xDp, -maxHeight + yDp),
            onDismissRequest = {
                expanded = false
            }
        ) {

            DropdownMenuItem(
                onClick = {
                    expanded = false
                },
                interactionSource = MutableInteractionSource(),
                text = {
                    Text("Copy")
                }
            )

            DropdownMenuItem(
                onClick = {
                    expanded = false
                },
                interactionSource = MutableInteractionSource(),
                text = {
                    Text("Get Balance")
                }
            )
        }
    }
}

As can be seen in gif if you touch area where Dropdown appears if you touch the bottom of the screen it is moved up to top of the Composable. It's at the end of the gif. I don't know what's causing this. Other than this issue it works as expected.

I'm using 1.3.0-beta02 with Material3. You only need -maxHeight and yDp from my code — Thracian, Sep 17 '22 at 10:54
Any ideas how to make this work for a lazycolumn? So it opens the context menu whenever you click on an item of the lazycolumn — MKiperszmid, Mar 02 '23 at 01:33

How to show Drop down Menu where ever I touch in a box Jetpack Compose in android studio

1 Answers1

Linked