Impossible to center vertically a box into a column

Issue

I am trying to align a Box in Jetpack which contain 2 icons in the vertical center of a column

The code for the Box parts is:

@Composable
    private fun passwordValidate() {
        Box(){
            Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
            Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" ) 
        }
    }

The box is loaded in a column and donc as below:

Row(Modifier.padding(top = 20.dp)) {
                Column(modifier = Modifier
                    .weight(0.95f)) {
                    passwordField()
                }
                Column(modifier = Modifier          <------ Box part to be centered
                    .weight(0.05f),
                    verticalArrangement = Arrangement.Center,
                    horizontalAlignment = Alignment.CenterHorizontally) {
                    passwordValidate()
                }
            }

Right now it's look like this:

I intentionally have the red cross and green check image on top of the other one. because I only display one or the other, But I can't get them center in the column to be align with the EMAIL field

Any idea ?

Solution

Your Column wraps content size. So its size is equal to the icon size, that's why Column arrangement doesn't work.

You could've pass fillMaxHeight() modifier to the Column to fix this, but actually you don't need a Column here, as you only have a single child(Box) inside. Pass a modifier as a parameter to passwordValidate:

@Composable
private fun passwordValidate(modifier: Modifier) {
    Box(modifier){
        Image(painter = painterResource(id = R.drawable.ic_checkmark), contentDescription = "" )
        Image(painter = painterResource(id = R.drawable.ic_xmark), contentDescription = "" )
    }
}

Then choose one of two:

1. Center all your Row children with verticalAlignment parameter:

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier.padding(top = 20.dp)
) {
    Column(
        modifier = Modifier
            .weight(0.95f)
    ) {
        passwordField()
    }
    passwordValidate(
        Modifier
            .weight(0.05f)
    )
}

2. Center a specific child with align modifier.

passwordValidate(
    Modifier
        .weight(0.05f)
        .align(Alignment.CenterVertically)
)

Answered By - Philip Dukhov