[FIXED] How to center text inside DropdownMenuItem in compose

Issue

Currently, when I create a DropdownMenu it always shows the text to the start. I want it to be centered and didn't find any resource that answers that.

Solution

By default, Box wraps content size, so for a single view inside, without additional modifiers, contentAlignment makes no difference. For @Francesc's answer to work, you need to apply Modifier.fillMaxWidth() to the box:

DropdownMenuItem(onClick = {}) {
    Box(
        contentAlignment = Alignment.Center, 
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(text = "text")
    }
}

Alternatively, you can do this without Box using textAlign parameter and you also need Modifier.fillMaxWidth():

DropdownMenuItem(onClick = {}) {
    Text(
        text = "text",
        textAlign = TextAlign.Center,
        modifier = Modifier.fillMaxWidth()
    )
}

Answered By - Philip Dukhov
Answer Checked By - Willingham (JavaFixing Volunteer)