Kotlin Compose, Align items in row

Question

I'm using the brand new Kotlin Compose for my view, I have a row with 2 items, how can I make them center-vertical-like?

    Row(
            modifier = Spacing(20.dp)
    ) {
        Text(text = "Hello $name!")
        Spacing(10.dp)
        Padding(padding = 25.dp) {
            Button(text = "Click", onClick = { /*do something*/ })

        }
    }

Note that without padding they are not aligned too.

Answer 1

There's verticalAlignment argument in Row. You can also configure an item alignment individually using align modifier which overrides the row's verticalAlignment. For example:

@Composable
fun RowAlignmentExample() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        SizeTile(14)
        SizeTile(18)
        SizeTile(22)
        SizeTile(26)
        SizeTile(10, modifier = Modifier.align(Alignment.Top))
        SizeTile(10, modifier = Modifier.align(Alignment.Bottom))
    }
}

@Composable
fun SizeTile(fontSize: Int, modifier: Modifier = Modifier) {
    Text(
        text = fontSize.toString(),
        fontSize = fontSize.sp,
        modifier = modifier
            .padding(2.dp)
            .background(Color.White, RoundedCornerShape(4.dp))
            .padding(2.dp)
    )
}

Answer 2

You can use the verticalAlignment parameter in the Row.
Something like:

Row(
    modifier = Modifier.padding(20.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "Hello!")
    Spacer(modifier = Modifier.width(10.dp))
    Button(onClick = { /*do something*/ },
            modifier = Modifier.padding(25.dp)) {
        Text(text = "Click")
    }
}

You can also use the align modifier defined in the RowScope in each composable in the Row.
Pls note that:

Align the element vertically within the Row. This alignment will have priority over the Row's verticalAlignment parameter.

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    // The child with no align modifier is positioned by default so that is in the middle of
    // the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).background(Teal200))

    // Gravity.Top, the child will be positioned so that its top edge is aligned to the top
    // of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Top).background(Color.Red))

    // Gravity.Center, the child will be positioned so that its center is in the middle of
    // the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.CenterVertically).background(Color.Yellow))

    // Gravity.Bottom, the child will be positioned so that its bottom edge is aligned to the
    // bottom of the vertical axis.
    Box(Modifier.size(80.dp, 40.dp).align(Alignment.Bottom).background(Color.Green))

}

Answer 3

On compose version 1.0, this is a solution...

Row(
    modifier = Modifier.padding(20.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "Hello Android!",
        modifier = Modifier.padding(end = 10.dp))
    Button(text = { Text("Click") },
        onClick = { /*do something*/ },
        modifier = Modifier.padding(25.dp)
    )
}

Answer 4

You can use the Align composable

Align(Alignment.TopCenter) { //You can change the alignment to fit your needs.
    Row(modifier = Spacing(20.dp)) {
        Text(text = "Hello $name!")
        Spacing(10.dp)
        Padding(padding = 25.dp) {
            Button(text = "Click", onClick = { /*do something*/ })
        }
    }
}

The code above should align the entire row, but you will need to wrap every component individually if you want them to be aligned center in regards to the row.

Answer 5

In 1.0.1 you use verticalArrangement like this:

Row(
    Modifier
        .fillMaxWidth()
        .height(70.dp),
    verticalArrangement = Arrangement.Center
) {
    ...
}