CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-compose-layout
Kamran Akbary
Kamran Akbary

Reputation: 3003

Kotlin Compose, Align items in row

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*/ })

        }
    }

enter image description here

Note that without padding they are not aligned too.

Upvotes: 46

Views: 52592

Answers (5)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364938

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")
    }
}

enter image description here

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))

}

enter image description here

Upvotes: 23

nglauber
nglauber

Reputation: 24024

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)
    )
}

Upvotes: 9

Murdokai
Murdokai

Reputation: 222

In 1.0.1 you use verticalArrangement like this:

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

Upvotes: 0

Valeriy Katkov
Valeriy Katkov

Reputation: 40722

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)
    )
}

enter image description here

Upvotes: 65

Gil G
Gil G

Reputation: 1869

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.

Upvotes: 0

Related Questions