What is the simplest way to align center on first component of two ordered component in jetpack compose?

Issue

I want to align the red surface to the center of the page, how can i do that?

@Composable
fun Screen() {

    Row(
        modifier = Modifier.fillMaxSize(),
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Surface(
            color = Color.Red,
            modifier = Modifier.size(100.dp, 50.dp)
        ){}
        Surface(
            color = Color.Blue,
            modifier = Modifier.size(100.dp, 50.dp)
        ) {}
    }
}

View:

Want this:

Solution

If your blue view has a static size, just add Spacer of the same size on the other side.

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
) {
    val blueViewWidth = 100.dp
    Spacer(Modifier.width(blueViewWidth))
    RedView()
    BlueView(Modifier.size(blueViewWidth, 50.dp))
}

If blue view size depends on content, you can use it instead of Spacer and apply Modifier.alpha(0) - this will be less performant than creating a custom layout, but should be perfectly fine, unless your view has a really huge layout to measure.

Row(
    modifier = Modifier.fillMaxSize(),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically
) {
    BlueView(Modifier.alpha(0f))
    RedView()
    BlueView()
}

Answered By - Pylyp Dukhov