How to control DropDownMenu position in Jetpack Compose

Question

I have a row with a text align at the start and a image align at the end. When I press the image I'm showing a DropdownMenu, but this appear in the start of the row and I want that appear at the end of the row.

I'm trying to use Alignment.centerEnd in Modifier component but is not working.

How can I do that the popup appear at the end of the row?

@Composable
fun DropdownDemo(currentItem: CartListItems) {
    var expanded by remember { mutableStateOf(false) }
    Box(modifier = Modifier
        .fillMaxWidth()) {
        Text(modifier = Modifier.align(Alignment.TopStart),
            text = currentItem.type,
            color = colorResource(id = R.color.app_grey_dark),
            fontSize = 12.sp)
        Image(painter = painterResource(R.drawable.three_dots),
            contentDescription = "more options button",
            Modifier
                .padding(top = 5.dp, bottom = 5.dp, start = 5.dp)
                .align(Alignment.CenterEnd)
                .width(24.dp)
                .height(6.75.dp)
                .clickable(indication = null,
                    interactionSource = remember { MutableInteractionSource() },
                    onClick = {
                        expanded = true
                    }))
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .background(
                    Color.LightGray
                ).align(Alignment.CenterEnd),
        ) {
            DropdownMenuItem(onClick = { expanded = false }) {
                Text("Delete")
            }
            DropdownMenuItem(onClick = { expanded = false }) {
                Text("Save")
            }
        }
    }
}

Answer 1

As documentation says:

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen.

You need to put DropdownMenu together with the caller view in a Box. In this case DropdownMenu will appear under the caller view.

var expanded by remember { mutableStateOf(false) }

Box {
    // your button to expand the menu
    Image(
        painter = painterResource(R.drawable.test),
        contentDescription = "more options button",
        modifier = Modifier
            .clickable {
                expanded = true
            }
    )
    DropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false },
    ) {
        DropdownMenuItem(onClick = { expanded = false }) {
            Text("Delete")
        }
        DropdownMenuItem(onClick = { expanded = false }) {
            Text("Save")
        }
    }
}